Erstellen und Verwenden von HTML-Vorlagen im Jitterbit App Builder

HTML-Vorlagen können auf viele verschiedene Arten verwendet werden, um einer App einzigartiges und spezifisches Styling oder Funktionalität zu verleihen. Es gibt mehrere Gründe, HTML-Vorlagen zu verwenden, aber das Hauptziel bei der Verwendung einer HTML-Vorlage besteht darin, kreativ damit umzugehen. Mit HTML-Vorlagen können Sie HTML, CSS und JavaScript verwenden, um Ihre Vorlage zu funktionalisieren und zu stylen.

Erstellen einer HTML-Vorlage

Folgen Sie diesen Schritten, um eine HTML-Vorlage zu erstellen.

1. Navigieren Sie zunächst zu Look & Feel
2. Klicken Sie auf die Navigation Vorlagen
3. Wählen Sie die Sammlung aus, zu der Sie die Vorlage hinzufügen möchten
4. Klicken Sie auf die Schaltfläche +Vorlage
5. Weisen Sie der Vorlage einen Namen zu. Beispiel: Home Signup
6. Wenn Sie möchten, dass der Inhalt der HTML-Vorlage übersetzt wird, aktivieren Sie Übersetzungen
7. Klicken Sie auf Speichern

Sie sehen nun zwei Felder, in die Sie den entsprechenden Inhalt der HTML-Vorlage eingeben können: Editor und Quelle. Der Editor verwendet ein WYSIWYG (What You See Is What You Get), das HTML-Tags im Inhalt aktualisiert, der in Ihrer Vorlage angezeigt werden soll.

Wenn Sie im Editorbereich mit der Eingabe beginnen, werden das zugrunde liegende HTML und CSS, das in der Vorlage angezeigt wird, unten im Quellbereich generiert. Hier ist ein Beispiel:

Fügen Sie der HTML-Vorlage weiterhin alle erforderlichen Inhalte hinzu, entweder in der Editor- oder in der Quellansicht, je nachdem, was angebracht ist. In der Editoransicht können Sie die Vorteile des WYSIWG-Stylings nutzen. Wenn Sie etwas Komplexeres hinzufügen möchten, als die Editoransicht zulässt (z. B. HTML, CSS, JavaScript), sollten Sie in der Quellansicht arbeiten.

Dynamisch App Builder Substitution

In diesem Abschnitt werden wir uns die Verwendung dynamischer Substitutionen in HTML-Vorlagen ansehen. Sie haben beispielsweise eine Seite mit einem Kachel-Panel und möchten, dass die Mitarbeiternamen besser aussehen. Sie könnten eine HTML-Vorlage erstellen, die die Spalten verkettet TitleOfCourtesy, FirstName, Und LastName zusammen und formatieren Sie den Text und setzen Sie die Title unter dem Mitarbeiternamen in einem kleineren Text.

Als nächstes erstellen wir eine HTML-Vorlage mit dynamischen App Builder Spaltenersetzung.

1. Navigieren Sie zu der Anwendung, in der Sie Ihre Vorlage implementieren möchten, oder erstellen Sie eine Vorlage.

2. Wir haben bereits eine Vorlage mit der richtigen Größe, Stärke (fett) und Ausrichtung (zentriert) erstellt. Wir können den Text von ändern "Hello World!" Zu {{TitleOfCourtesy}} {{Vorname}} {{Nachname}}im Inhalt (Text), um die richtigen Informationen anzuzeigen

   Wichtig

   Achten Sie darauf, Spalten auszuwählen, die im Geschäftsobjekt auf der Seite vorhanden sind, auf der Sie die Vorlage platzieren.

   

3. Als nächstes müssen wir platzieren {{Title}} unter dem vollständigen Namen, zentriert und in einem kleineren Text. Dazu geben wir einen neuen </span> Tag nach dem vorhandenen Inhalt, da der vorhandene Inhalt eine Schriftgröße von 25px hat und wir einen neuen Bereich mit einer kleineren Textgröße erstellen werden.

4. Dann können wir einen Break-Tag eingeben <br> um anzuzeigen, dass wir zur nächsten Zeile gehen möchten

5. Jetzt können wir einen neuen Span mit der Schriftgröße 15px erstellen und den {{Title}} Spalte, Spanne schließen und Fettschrift schließen

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

   

6. Nachdem wir die Vorlage erstellt haben, müssen wir der Seite mitteilen, welche Spalten verwendet werden sollen. Daher müssen wir diese der Vorlage wie in Vorlagenparameter definiert hinzufügen.

7. Jetzt können wir die Vorlage der gewünschten Seite und dem gewünschten Panel als HTML-Steuerelement hinzufügen, wobei die Sichtbarkeit der Spaltenbeschriftung auf Versteckt eingestellt ist.
8. Ein weiterer Schritt zum tatsächlichen Binden der Vorlage an das Panel besteht darin, auf das Vorlagenbindungssymbol auf der Panel-Seite (Datenoptionen) für das HTML-Steuerelement zu klicken und dieselben Spalten einzufügen, die Sie in die Vorlagenparameter eingegeben haben.

Jetzt sieht das Employee Board-Panel besser aus und Sie sind mit der Verwendung von HTML-Vorlagen vertrauter. App Builder.

Beispiel einer HTML-Vorlage

Hier ist ein Board-Panel mit zwei HTML-Vorlagen. Eine zeigt die Anzahl der Personen in der Warteschlange und die andere gibt unten die Krankenhausinformationen an.

Referenz

Siehe die W3Schools HTML-Elementreferenz-Handbuch für weitere Informationen zur richtigen HTML-Syntax.