HTML-Vorlagen in Jitterbit App Builder erstellen und verwenden

Eine HTML-Vorlage ist ein wiederverwendbarer Block aus HTML, CSS und JavaScript, den Sie einmalig im Bereich Look & Feel von App Builder entwerfen und dann an ein Custom HTML-Panel binden, um dynamisches Markup aus den Daten Ihrer Anwendung zu generieren. Vorlagen bieten mehr Styling- und Funktionsmöglichkeiten als ein einzelnes Standardsteuerelement, z. B. die Zusammenfassung mehrerer Spalten in einem formatierten Textblock oder das Einbetten eines benutzerdefinierten Layouts, einer Karte oder eines Diagramms.

Dies ist ein anderes Feature als das HTML-Steuerelement, das HTML anzeigt, die direkt in einer einzelnen gebundenen Spalte über einen WYSIWYG-Editor eingegeben wird. Verwenden Sie eine Vorlage, wenn Sie mehrere Spalten kombinieren oder benutzerdefiniertes Markup um Ihre Daten hinzufügen müssen. Verwenden Sie das HTML-Steuerelement, wenn eine einzelne Spalte bereits das HTML enthält, das Sie anzeigen möchten.

HTML-Vorlage erstellen

In diesem Abschnitt wird das Erstellen einer neuen, leeren HTML-Vorlage und das Ausfüllen mit statischem Inhalt durchlaufen.

1. Wählen Sie App Workbench > Look & Feel > Templates.
2. Wählen Sie die Collection aus, zu der die Vorlage gehört.
3. Klicken Sie auf + Template.
4. Weisen Sie der Vorlage einen Name zu. Beispiel: Home Signup.
5. Wenn der Inhalt der Vorlage übersetzt werden soll, aktivieren Sie die Option Translations. Informationen zur nachträglichen Übersetzung finden Sie unter Übersetzungsvorlagen.
6. Klicken Sie auf Save.

Durch Speichern der Vorlage werden zwei Felder geöffnet, in die Sie ihren Inhalt eingeben können: Editor und Source. Editor ist ein WYSIWYG-Feld (What You See Is What You Get), das die zugrunde liegenden HTML-Tags beim Eingeben aktualisiert.

Während Sie im Feld Editor eingeben, wird das darunter generierte HTML und CSS in Source angezeigt:

Fügen Sie weiterhin Inhalte mit beiden Ansichten hinzu, je nach Bedarf. Editor ermöglicht die Nutzung von WYSIWYG-Styling, während Source der Ort ist, an dem Sie direkt mit komplexeren Inhalten arbeiten, die Editor nicht verarbeitet, wie benutzerdefiniertes HTML, CSS oder JavaScript.

Dynamische Ersetzung zu einer Vorlage hinzufügen

Eine Vorlage kann ihren Inhalt auch aus App Builder-Spalten abrufen und Live-Daten jedes Mal in das HTML einfügen, wenn es gerendert wird. Beispielsweise könnte eine Seite mit einem Custom HTML-Panel eine Liste von Mitarbeitern anzeigen, wobei die Spalten TitleOfCourtesy, FirstName und LastName in einen einzelnen formatierten Namen zusammengefasst werden, wobei die Spalte Title darunter in kleinerer Schrift angezeigt wird:

Um eine solche Vorlage zu erstellen:

1. Navigieren Sie zu einer Vorlage unter der Anwendung, in der Sie sie verwenden möchten, oder erstellen Sie diese.

2. Dieses Beispiel beginnt mit einer Vorlage, die bereits in der benötigten Größe, Gewichtung (fett) und Ausrichtung (zentriert) formatiert ist und den Platzhaltertext "Hello World!" enthält. Ersetzen Sie diesen Text durch die Spalten, die Sie ersetzen möchten, z. B. {{TitleOfCourtesy}} {{FirstName}} {{LastName}}.

   Wichtig

   Achten Sie darauf, dass Sie Spalten wählen, die im Geschäftsobjekt auf der Seite vorhanden sind, auf die Sie die Vorlage einfügen.

   

3. Platzieren Sie {{Title}} unter dem vollständigen Namen, zentriert und in kleinerer Schrift, indem Sie nach dem vorhandenen Inhalt ein neues </span>-Tag einfügen: dieser Inhalt hat bereits eine Schriftgröße von 25px, daher benötigt das neue span eine eigene, kleinere Größe.

4. Fügen Sie ein break-Tag (<br>) hinzu, um zur nächsten Zeile zu wechseln.
5. Erstellen Sie einen neuen span mit einer Schriftgröße von 15px, der die Spalte {{Title}} enthält, schließen Sie dann den span und die Fettformatierung:

<div style="text-align: center;"><strong style="font-size: 25px;">{{TitleOfCourtesy}}{{FirstName}}{{LastName}}<br>
<span style="font-size: 15px;">{{Title}}</span></span></strong></div>

1. Fügen Sie die Spalten, die die Vorlage nun verwendet, als Vorlagenparameter hinzu, damit die Seite weiß, welche Spalten sie übergeben soll.
2. Fügen Sie ein Panel zur gewünschten Seite hinzu und setzen Sie seinen Panel-Typ auf Benutzerdefiniertes HTML.
3. Legen Sie auf der Registerkarte Panel die Vorlageneigenschaften auf die Vorlage fest, die Sie erstellt haben.
4. Klicken Sie auf das Kettensymbol neben Vorlageneigenschaften, um das Dialogfeld Vorlagenparamater-Bindungen zu öffnen, und klicken Sie dann auf Erstellen.
5. Wählen Sie im Dialogfeld Param-Bindung den Vorlagenparameter aus, den Sie binden möchten, setzen Sie Parametertyp auf Spalte, wählen Sie die entsprechende Zielspalte aus, und klicken Sie auf Speichern. Wiederholen Sie diesen Schritt für jeden Vorlagenparameter.

Mit dem gebundenen Panel zeigt das Employee Board nun Name und Titel jedes Mitarbeiters aus den zugrunde liegenden Daten:

Beispiel: Vorlagen in einem Custom HTML-Panel

Ein einzelnes Custom HTML-Panel kann mehr als eine Vorlage enthalten. Das folgende Panel kombiniert zwei Vorlagen: eine zeigt die Anzahl der Personen, die sich derzeit in der Warteschlange befinden, und eine andere zeigt Informationen zum Krankenhaus unten.