Hands of man using online virtual app on mobile phone. Millennial guy chatting on smartphone, using banking services, reading text message, typing, shopping, making call, browsing internet. Close up

Handlebars.js – Die Semantische Template Library

Handlebars.js ist eine Template-Engine für JavaScript. Sie ermöglicht dem Entwickler, mit Hilfe von semantischen Templates Business-Logik und HTML zu trennen. Somit ist es nicht von Nöten, HTML-Code per JavaScript zu generieren. Ein großer Vorteil hierbei ist die Übersichtlichkeit durch das Auslagern des JavaScript- und Handlebars-Codes in eigene .js-Dateien. Die durch Handlebars geschaffene Struktur sorgt für einen verständlichen Code und erleichtert somit die Wartbarkeit.
Ein weiterer Vorteil ist es, dass Templates nicht bei jeder erneuten Verwendung neu kompiliert werden müssen. Gerade in der mobilen Nutzung ist dies ein essentieller Performance-Gewinn.

Wann empfiehlt es sich, Handlebars.js zu verwenden?

Es empfiehlt sich, Handlebars zu verwenden, wenn Seiteninhalte während eines Aufrufes öfters aktualisiert werden (z.B. durch Filterung oder Sortierung), denn hierbei müssen die DOM-Elemente nicht jedesmal im JavaScript-Code neu generiert und eingehängt werden, sondern es werden nur entsprechende Templates gerendert. Würde man all dies von JavaScript aus steuern, müsste man jedes DOM-Element z.B. per createElement()-Methode erstellen und per appendChild()-Methode oder innerHTML-Property einzeln erstellen und einhängen.
Man sollte jedoch die Notwendigkeit einer solchen Library überprüfen, denn bei einfachen Webseiten ohne viel Logik würde Handlebars zu viel Overhead produzieren.

Anwendung

Handlebars bietet neben dem Verwenden von Platzhaltern verschiedene Helper-Functions an, wie zum Beispiel if-Abfragen, foreach-Schleifen und Block Parameters. Um Handlebars anzusprechen, werden jegliche Statements und Variablen in doppelt geschweiften Klammern geschrieben. Der Zugriff auf Funktionen erfolgt jeweils mit einem „#“ und endet mit einem „/“ vor der Anweisung.

Im folgenden Code wird geprüft, ob die Property „items“ des JSON-Objekts „news“ Einträge enthält. Ist dies der Fall wird das entsprechende Template „news-table-template“ an dieser Stelle aufgerufen. Als Parameter wird dem Template das „news“-Objekt mit übergeben.

Handlebars.js – Semantische Template Library-1Abbildung 1: news-template
Abbildung 1: news-template

Im Template für die News-Tabelle wird nun bis auf den <tbody> die Tabelle vorbereitet.
Die einzelnen Row‘s werden in einer foreach-Schleife erstellt, die durch „news.items“ iteriert. Für jedes Element in diesem Array wird ein <tr>-Tag erstellt und dessen <td>-Tags mit den entsprechenden Informationen befüllt.

Handlebars.js – Semantische Template Library 2Abbildung 2: news-table-template
Abbildung 2: news-table-template

Im folgenden JavaScript-Code wird nun zuerst das Template compiliert damit es ab sofort zur Verfügung steht. Anschließend wird mit dem vorhandenen Objekt „renderTemplate“ das Template erstellt und in den <div> mit der ID „content-body“ eingehängt. Dieser JavaScript-Code muss in die Seite per <script>-Tag eingebunden werden.

Handlebars.js – Semantische Template Library 3Abbildung 3: renderNewsTemplate.js
Abbildung 3: renderNewsTemplate.js

Worin genau besteht in diesem Fall der Vorteil?

Hierbei wird die Logik einer if-Abfrage und einer foreach-Schleife verwendet, um dynamisch eine Tabelle zu erstellen und diese im HTML zu rendern. Trotz dieser Logik müssen dank Handlebars.js keine HTML-Tags im JavaScript-Code erstellt werden und ebenso wird kein inline-JavaScript im HTML ausgeführt. Somit wird die Logik vom Markup getrennt und es entsteht ein übersichtlicher, gut wartbarer Code.
Zudem bringt Handlebars.js neben den oben genannten Helpern noch viele weitere Build-In Helpers mit sich, jedoch besteht auch die Möglichkeit, selbst solche Helper-Funktionen zu implementieren, welche dann im HTML aufgerufen werden können.
Eine Übersicht über alle Build-In Helpers findet man auf folgender Seite: http://handlebarsjs.com

novaCapta
Andy KurzBlog
novaCapta: Ihr Partner für die digitale Transformation mit Microsoft Technologien
Blog

Warum ist Inline-CSS und JavaScript-Code so schlecht?

Warum der Einsatz von Inline-CSS bzw. JavaScript-Code schlecht ist, da Dinge wie Caching, DRY-Prinzip, Wartbarkeit und Media-Queries gänzlich außer Acht gelassen werden.

novaCapta
Blog
News der novaCapta
Blog

Der wiederholte Bereich in Nintex Forms

Nintex für Fortgeschrittene

novaCapta
Michael SonntagBlog
Zwei Frauen schauen gemeinsam auf einen Bildschirm
Blog

Tipps und Tricks mit Entity Framework

In diesem Blogbeitrag möchte ich einige Tipps und Tricks rund um Entity Framework mit euch teilen. In allen Beispielen gehen wir vom Code-First Ansatz aus.

novaCapta
Michael SonntagBlog
Hands of man using online virtual app on mobile phone. Millennial guy chatting on smartphone, using banking services, reading text message, typing, shopping, making call, browsing internet. Close up
Blog

GraphQL – Die Alternative zu REST

GraphQL ist eine Abfragesprache für APIs zur Ausführung von Abfragen mit Hilfe eines für die Daten definierten Typensystems. In dieser kleinen Blog-Serie schauen wir uns einfache Queries und Mutations an.

novaCapta
Julius ElsnerBlog
novaCapta: Ihr Partner für die digitale Transformation mit Microsoft Technologien
Blog

Nutzung der SharePoint REST API mit Microsoft Flow

Durch Zugriffe über die REST API lassen sich viele Vorgänge mit Microsoft Flow automatisieren.

novaCapta
Andy KurzBlog
novaCapta: Ihr Partner für die digitale Transformation mit Microsoft Technologien
Blog

Braucht man wirklich jQuery?

Ich beleuchte diese Frage anhand von Beispielen aus der Praxis und hinterfrage, ob in der modernen Browserlandschaft auch natives JavaScript ausreicht.

novaCapta
Blog
novaCapta: Ihr Partner für die digitale Transformation mit Microsoft Technologien
Blog

Migration IBM Lotus Notes zu Microsoft SharePoint

Eine Migration von Lotus Notes/Domino nach SharePoint/Exchange besteht grundsätzlich aus mindestens zwei Bereichen.

novaCapta
Leistung
Company Operations Manager Holds Meeting Presentation. Diverse Team Uses TV Screen with Growth Analysis, Charts, Statistics and Data. People Work in Business Office.
Leistung

Data Management

Treffen Sie fundierte Entscheidungen, indem Sie Ihre Daten optimal nutzen. Eine unternehmensweite Business-Intelligence und Analytics-Plattform auf Basis von Azure ermöglicht es Ihnen, den maximalen Nutzen aus den vorhandenen Daten zu ziehen.

novaCapta
Blog
Hands of man using online virtual app on mobile phone. Millennial guy chatting on smartphone, using banking services, reading text message, typing, shopping, making call, browsing internet. Close up
Blog

Ich bin im Flow! – Eine Übersicht zu Microsoft Flow

Die Power Platform wird aktuell von Microsoft sehr stark gepusht. Zeit, sich mit dem Potenzial der einzelnen Komponenten zu beschäftigen. Heute: Flow.

novaCapta
Blog
Close up of female hands while typing on laptop
Blog

SharePoint Framework Client-Side Webparts mit React

React ist ein Framework zum Erstellen von Benutzeroberflächen. In der SharePoint Online Entwicklung bietet es sich für die Entwicklung von Client-Side Webparts an.

novaCapta
Blog
Hands of man using online virtual app on mobile phone. Millennial guy chatting on smartphone, using banking services, reading text message, typing, shopping, making call, browsing internet. Close up
Blog

Teams Extensions – Erstellen von Erweiterungen für Teams

Mit der Entwicklung von Extensions kann Teams einfach erweitert werden. Hierfür gibt es das App Studio, welches über den Teams Store installiert werden kann.

novaCapta
Blog
Zwei Frauen schauen gemeinsam auf einen Bildschirm
Blog

Xamarin – plattformübergreifende App-Entwicklung

Xamarin ist eine übergreifende Entwicklungsplattform, die die Welten zusammenführt und die bislang erforderliche Mehrarbeit weitgehend überflüssig macht.

novaCapta
Andy KurzBlog
Hands of man using online virtual app on mobile phone. Millennial guy chatting on smartphone, using banking services, reading text message, typing, shopping, making call, browsing internet. Close up
Blog

Struktureller Aufbau eines Angular Modules

Dieser Blogbeitrag beschäftigt sich mit dem strukturellen Aufbau eines Angular Modules und der Kommunikation der einzelnen Komponenten.

novaCapta
Kathrin HeinrothBlog
novaCapta: Ihr Partner für die digitale Transformation mit Microsoft Technologien
Blog

Spaltenformatierung in SharePoint: Column formatting vs. JS

Eine Gegenüberstellung der Spaltenformatierung von JSLink zu der neueren Methode Column formating in Office 365.

novaCapta
Kathrin HeinrothBlog
novaCapta: Ihr Partner für die digitale Transformation mit Microsoft Technologien
Blog

Testen von Angular Anwendungen mit Cypress

Cypress ist ein End-to-End Testing Framework, mit dem man einfache Tests erstellen kann, die in Echtzeit ausgeführt werden. Mit Cypress kann man auch Snapshots von den einzelnen Schritten während der Testausführung sehen. Tests können schnell erstellt werden, ohne dass bestimmte Server oder Driver benötigt werden.

novaCapta
Referenz
novaCapta: Ihr Partner für die digitale Transformation mit Microsoft Technologien
Referenz

Siemens AG: SharePoint statt Excel bei komplexen Formularen

Zur Verwaltung und Auswertung der Projekt- und Arbeitsstunden nutzte Siemens in der Vergangenheit komplexe Excel Tabellen. Diese Tabellen setzte novaCapta für Siemens in eine einfach zu bedienende, intuitive Anwendung in Microsoft SharePoint um.

novaCapta
Blog
novaCapta: Ihr Partner für die digitale Transformation mit Microsoft Technologien
Blog

Drei Tipps für mehr SharePoint-Begeisterung

Wir geben Tipps zur der Microsoft Serverplattform für Content Management, (Social)-Collaboration, Portalfunktion, Business Intelligence und Enterprise Search.

novaCapta
Blog
Zwei Frauen schauen gemeinsam auf einen Bildschirm
Blog

Change Management in IT-Projekten

Viele IT-Projekte scheitern am Zusammenspiel verschiedener Faktoren, wie unklare Ziele, ungenügende Ressourcen, schlechte Kommunikation und fehlende User-Akzeptanz.

novaCapta
Blog
Blue sky and clouds
Blog

Farben zur Optimierung des SharePoint-Kalender

Auch in SharePoint kann man Kategorien für Teamkalender-Einträge farblich abheben und damit die Lesbarkeit erhöhen. Wir zeigen Ihnen, wie das geht.

novaCapta
Blog
Zwei Frauen schauen gemeinsam auf einen Bildschirm
Blog

Corporate News – Das zentrale Medium interner Kommunikation

Um die Akzeptanz des unternehmenseigenen Intranets zu steigern, sind Corporate News ein erster Schritt, um Neuigkeiten, Strategie und Strukturen gleichmäßig zu kommunizieren.

novaCapta
Blog
Close up shot of female hands typing on laptop
Blog

SharePoint vs. TYPO3 – Sechs Gründe für SharePoint-Intranet

Hier lesen Sie die sechs wichtigsten Argumente, warum Sie Office 365 mit SharePoint für Ihre Intranetlösung gegenüber TYPO3 bevorzugen sollten.

novaCapta
Blog
Hands of man using online virtual app on mobile phone. Millennial guy chatting on smartphone, using banking services, reading text message, typing, shopping, making call, browsing internet. Close up
Blog

Was kann der neue Office 365 Planner – und was kann er nicht

„Office 365 Planner“ ist das neue Tool von Microsoft, mit dem sich Zusammenarbeit und Aufgabenverteilung in Teams organisieren lässt. Was kann der neue Office 365 Planner – und was kann er nicht

novaCapta
Blog
Close up of female hands while typing on laptop
Blog

Was ist Application Lifecycle Management (ALM)?

Application Lifecycle Management beschreibt einen ganzheitlichen Ansatz, der eine Anwendung während allen Phasen der Software begleitet.

novaCapta
Blog
novaCapta: Ihr Partner für die digitale Transformation mit Microsoft Technologien
Blog

Fünf Tipps für mehr SharePoint-Adoption in Unternehmen

SharePoint ist eine vielseitige und mächtige technologische Plattform mit vielen Funktionen. Unseren fünf Expertentipps erhöhen die Adoption.

novaCapta
Blog
Hands of man using online virtual app on mobile phone. Millennial guy chatting on smartphone, using banking services, reading text message, typing, shopping, making call, browsing internet. Close up
Blog

Produktiver lernen mit SharePoint

Bringt die aktuelle Version der SharePoint-Plattform so viele neue Features mit, es zu einem perfekten Learning Management System zu machen? Wir beleuchten es.

novaCapta
Blog
Zwei Frauen schauen gemeinsam auf einen Bildschirm
Blog

Fünf Tipps für eine verbesserte Software-Adoption

Die Generation Y stellt im Arbeitsumfeld neue Anforderungen an Unternehmens-Software und -Systeme. Unsere fünf Tipps, um die Adoption einer Software erhöhen.

novaCapta
Blog
Close up of female hands while typing on laptop
Blog

Grundlagen der Gestaltung

Die Gestaltgesetze der Wahrnehmungspsychologie

novaCapta
Blog
Drei Personen in einer Besprechung an einem Tisch besprechen den Zeitplan auf ihrem Microsoft-Laptop
Blog

Die Bedeutung einer Governance

In der Governance-Struktur legen Sie fest, wie Sie mit Ihrer SharePoint-Umgebung arbeiten. Governance beschreibt die Rollen der Nutzer und legt Verantwortlichkeiten fest.

novaCapta
Blog
Blue sky and clouds
Blog

Hat Ihr Unternehmen einen Informations-Lebenszyklus?

Jede Information hat eine Aktualitätsphase, eine Nachschlag-Phase, eine Archiv-Phase und einen Obsoleszenz-Punkt. Steuern Sie den Lebenszyklus Ihrer Informationen?

novaCapta
Blog
novaCapta: Ihr Partner für die digitale Transformation mit Microsoft Technologien
Blog

SharePoint und Informationsarchitektur – worauf kommt es an?

Wie definiert sich eine Informationsarchitektur und die Rolle eines Informationsarchitekten im SharePoint-Umfeld?

novaCapta
Michael  MatuschekMichael MatuschekBlog
Close up of female hands while typing on laptop
Blog

Qualitätsmanagement - Dokumentation verwalten mit SharePoint

Qualitätsmanagement-Dokumente zu verwalten wird schnell unübersichtlich und kompliziert. Wir haben eine Lösung entwickelt, die das Dokumentenmanagement deutlich vereinfacht.

novaCapta
Blog
Hands of man using online virtual app on mobile phone. Millennial guy chatting on smartphone, using banking services, reading text message, typing, shopping, making call, browsing internet. Close up
Blog

Multi Factor Authentication (Azure und SharePoint)

Microsoft führt mit der Multi Faktor Authentisierung (MFA) eine weitere und kostenlose Authentifizierungsebene zu in Office 365 hinzu.

novaCapta
Blog
Blue sky and clouds
Blog

Vorgesetzte in Nintex per LDAP-Abfrage ermitteln

"Meine Sekretärin erledigt das für mich." Es ist der Klassiker der Workflows: Die Genehmigung. Neu im novaCapta Blog ► Mit Nintex Vorgesetzte per LDAP-Abfrage ermitteln ✓ So funktioniert's ✓ Jetzt nachlesen!

novaCapta
Blog
novaCapta: Ihr Partner für die digitale Transformation mit Microsoft Technologien
Blog

CQRS in ASP.Net MVC mit Entity Framework

Die Entwicklung von Anwendungen in einem mehrschichtigen Aufbau hat sich etabliert. Design Patterns wie MVC schaffen Lösungen.

novaCapta
Blog
News der novaCapta
Blog

Zentralisiertes Logging – Simpler Logging-Stack mit Graylog

Logging ist ein komplexes und doch essenzielles Thema. Gute Logs vereinfachen einem Supporter die Arbeit und ermöglichen es, Probleme schneller einzugrenzen.

novaCapta
Andy KurzBlog
Blue sky and clouds
Blog

Angular Route-Guards

Was versteht man eigentlich unter Angular Route-Guards?

novaCapta
Andy KurzBlog
novaCapta: Ihr Partner für die digitale Transformation mit Microsoft Technologien
Blog

Angular 5 Custom Filter in Angular Material Data-Table

In diesem Blogbeitrag will ich euch darlegen, wie man einen Custom Filter für das Angular Material Data-Table Modul erstellt.

novaCapta
Blog
Blue sky and clouds
Blog

Grundlagen der Datenmodellierung

Fachliches Modell mit ER-Diagrammen (auch ERM – Entity Relationship Model)

novaCapta
Blog
Hands of man using online virtual app on mobile phone. Millennial guy chatting on smartphone, using banking services, reading text message, typing, shopping, making call, browsing internet. Close up
Blog

Dateizugriffsrechte verwalten mit Microsoft RMS – Teil 4

Dieser letzte Teil der Artikelserie befasst sich mit dem Schutz von Dokumenten innerhalb von SharePoint.

novaCapta
Blog
Hands of man using online virtual app on mobile phone. Millennial guy chatting on smartphone, using banking services, reading text message, typing, shopping, making call, browsing internet. Close up
Blog

Dateizugriffsrechte verwalten mit Microsoft RMS – Teil 3

Dieser Teil der Artikelserie befasst sich mit der RMS-Freigabeanwendung, welche Dateien jeglichen Dateityps verschlüsseln kann.

novaCapta
Blog
Hands of man using online virtual app on mobile phone. Millennial guy chatting on smartphone, using banking services, reading text message, typing, shopping, making call, browsing internet. Close up
Blog

Dateizugriffsrechte verwalten mit Microsoft RMS – Teil 2

Dieser Teil der Artikelserie befasst sich mit der Anwendung von den Microsoft RMS in der Praxis.

novaCapta
Blog
Hands of man using online virtual app on mobile phone. Millennial guy chatting on smartphone, using banking services, reading text message, typing, shopping, making call, browsing internet. Close up
Blog

Dateizugriffsrechte verwalten mit Microsoft RMS – Teil 1

Diese Artikelserie befasst sich mit der Einrichtung und Verwendung der Rights Management Services (RMS) von Microsoft, die eine sichere Verschlüsselung von Dateien bieten.

novaCapta
Thomas KoglerThomas KoglerBlog
News der novaCapta
Blog

Gefilterte Ansicht über Unterschiede in mehreren Spalten

Die Filtermöglichkeiten in Ansichten in SharePoint sind begrenzt. So ist z.B. der direkte Vergleich zwischen zwei Spalten nicht möglich. Möchte ich Unterschiede beim Vergleich zweier Spalten angezeigt bekommen so ist dies nur über einen einzelnen Wertevergleich möglich (Quelle1=“A“ und Kopie1<>“A“). Möchte man dann noch mehrere Spalten miteinander vergleichen wird es schwierig bis unmöglich.

novaCapta
Blog
Zwei Frauen schauen gemeinsam auf einen Bildschirm
Blog

Umfragen in Teams mit Microsoft Forms

Umfragen bieten die Möglichkeit, bei der Planung von beispielsweise Events schnell zu einem Termin/Ergebnis zu kommen oder aber auch Feedback zu vergangenen Ereignissen einzuholen. Mit Microsoft Forms lassen sich Umfragen schnell und einfach in Teams erstellen bzw. integrieren.

novaCapta
Lars EschweilerLars EschweilerBlog
Hands of man using online virtual app on mobile phone. Millennial guy chatting on smartphone, using banking services, reading text message, typing, shopping, making call, browsing internet. Close up
Blog

PDF-Konverter in Power Automate

Kann ich mittels Microsoft Power Automate und einer SPFx-Anwendung ohne größere Probleme einen PDF-Konverter erstellen? Die einfache Antwort: Ja. Und auch die Ausführliche gibt’s hier.

novaCapta
Blog
Schreibtisch
Blog

Anhänge nach Datentyp in PowerApps einschränken

Eine immer wieder auftauchende Anfrage bei digitalen Prozessen ist die Beschränkbarkeit von Anhangsdokumenten. Glücklicherweise lässt sich diese Funktionalität relativ unkompliziert mit wenigen kleinen Formeln in PowerApps nachbauen.

novaCapta
Blog
Eine Angestellte lädt auf ihrem Handy die Microsoft Teams App für digitale Zusammenarbeit herunter.
Blog

Microsoft Teams: mehr als Videotelefonie und Chat

Corona treibt viele Arbeitnehmer ins Homeoffice – und zu Microsoft Teams. Eine Umfrage der novaCapta zeigt, dass Teams mehr Potenzial bietet als viele wissen. Wie Teams den Alltag wirklich erleichtert, verrät Andy Frei, Mitglied der Geschäftsleitung novaCapta CH, im Interview.

novaCapta
Blog
Team of programmers working in office
Blog

Was Sie beim nächsten IT-Projekt beachten sollten

Unternehmen sind in ihrer digitalen Transformation erfolgreicher, wenn sie bei der Umsetzung auf ein wirksames Change Management setzen. Wie der Wandel gelingt, verrät Nora Sommer, Senior Business Consultant bei der novaCapta, im Interview.

novaCapta
Blog
Programmer Woman Coding On Computer
Blog

Ohne Programmierkenntnisse zum Entwickler werden

Bei der Digitalisierung von Unternehmen erfordern passgenaue Business-Apps und automatisierte Workflows bislang ­erheblichen Entwicklungsaufwand. Microsoft setzt dem die Power Platform entgegen, mit der sich auch ohne Programmierkenntnisse gleichwertige Geschäftsanwendungen erstellen lassen sollen.

novaCapta
Blog
Phishing, mobile phone hacker or cyber scam concept. Password and login pass code in smartphone. Online security threat and fraud. Female scammer with cellphone and laptop. Bank account security.
Blog

Die Awareness kommt mit dem ersten Cyberangriff

Aktuell gehören Cyberangriffe zu den grössten Betriebsrisiken eines Unternehmens. Wie IT-Abteilungen sensible Unternehmensdaten effektiv schützen können und warum Cloud Computing die sicherere Wahl sein kann, weiss Sandra Zimmerli, Cloud Engineer bei der novaCapta Schweiz AG.