Zum Inhalt springen

Verwandeln Sie Ihre Kontakte in Urlaubsgeld mit unserem neuen Kundenempfehlungsprogramm! Erfahren Sie mehr

✕

Diese Dokumentation gilt für Version 4 und höher von App Builder, dem neuen Namen für Vinyl. Hier gelangen Sie zur Vinyl-Dokumentation.

✕

Erstellen und verwenden Sie HTML-Vorlagen im Jitterbit App Builder

HTML-Vorlagen lassen sich vielfältig einsetzen, um einer App ein einzigartiges und spezifisches Design oder spezifische Funktionen zu verleihen. Es gibt viele Gründe für die Verwendung von HTML-Vorlagen, doch das wichtigste Ziel ist die kreative Nutzung. Mit HTML-Vorlagen können Sie HTML, CSS und JavaScript nutzen, um Ihre Vorlage zu funktionalisieren und zu gestalten.

Hinweis

Wenn Sie einen Überblick über HTML, CSS oder JavaScript erhalten möchten, empfehlen wir https://www.w3schools.com/html/html_intro.asp.

Erstellen einer HTML-Vorlage

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

  1. Navigieren Sie zu Erscheinungsbild.
  2. Klicken Sie auf die Navigationsleiste 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. Geben Sie der Vorlage einen Namen ein. Beispiel: Startseite/Anmeldung.
  6. Wenn der Inhalt der HTML-Vorlage übersetzt werden soll, 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-System (What You See Is What You Get), das die HTML-Tags im Inhalt aktualisiert, der in Ihrer Vorlage angezeigt werden soll.

editor.png

Wenn Sie im Editorbereich mit der Eingabe beginnen, werden die zugrunde liegenden HTML- und CSS-Codes, die in der Vorlage angezeigt werden, unten im Quellbereich generiert. Hier ein Beispiel:

sourceview.png

Fügen Sie der HTML-Vorlage weiterhin den gewünschten Inhalt hinzu, je nach Bedarf im Editor oder in der Quelltextansicht. In der Editoransicht können Sie die Vorteile des WYSIWG-Stylings nutzen. Wenn Sie komplexere Inhalte hinzufügen möchten (z. B. HTML, CSS, JavaScript), arbeiten Sie am besten in der Quelltextansicht.

sourceexample.png

Dynamic App Builder Ersatz

In diesem Abschnitt betrachten wir die dynamische Ersetzung in HTML-Vorlagen. Beispielsweise möchten Sie auf einer Seite mit einem Kachel-Panel die Namen der Mitarbeiter besser darstellen. Erstellen Sie eine HTML-Vorlage, die die Spalten verknüpft. TitleOfCourtesy, FirstName, Und LastName zusammen und formatieren den Text sowie setzt die Title unter dem Mitarbeiternamen in kleinerer Schrift.

employeeboard.png

Als Nächstes erstellen wir eine HTML-Vorlage mit dynamischer 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 erstellt, die die richtige Größe, Stärke (fett) und Ausrichtung (zentriert) hat. Wir können den Text von "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.

    employeetemplatesource.png

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

  4. Anschließend können wir einen Break-Tag einfügen. <br>Um anzuzeigen, dass wir zur nächsten Zeile gehen möchten,

  5. Nun können wir einen neuen Span mit der Schriftgröße 15px erstellen und Folgendes eingeben: {{Title}}Spalte, schließen Sie den Bereich und schließen Sie die Fettschrift.

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

    employeepreview.png

  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. Um die Vorlage tatsächlich an das Panel zu binden, klicken Sie auf der Panel-Seite (Datenoptionen) für das HTML-Steuerelement auf das Symbol für die Vorlagenbindung und fügen Sie dieselben Spalten ein, die Sie in die Vorlagenparameter eingegeben haben.

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

employeetemplatedone.png

Beispiel einer HTML-Vorlage

Hier sehen Sie ein Board-Panel mit zwei HTML-Vorlagen. Eine zeigt die Anzahl der Personen in der Warteschlange an, die andere enthält unten die Krankenhausinformationen.

HTML-Vorlage 1

Referenz

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