Unser Variablen-Editor ermöglicht dir die Erstellung benutzerdefinierter Variablen. Es gibt zahlreiche Optionen, die Raum für kreative Anpassungen bieten. Wir zeigen dir, für welche Anwendungsfälle du sie verwenden kannst.

Du beginnst damit, dass du eine “Neue” Variable erstellst und den Code Editor öffnest:

Auf der linken Seite im Code Editor erstellst du deine individuellen Handlebars für deine Vorlagen.

Eine Handlebar baut sich grundsätzlich folgendermaßen auf:

{{#Bedingungsblock-Helper (Bedingung)}} Bedingte Anzeige {{/Bedingungsblock-Helper}}

Bedeutung der Handlebar-Syntax

{{ }}-Klammern

Diese doppelten geschweiften Klammern {{ }} dienen in Handlebars als Platzhalter oder Marker für Vorlagen-Variablen. Alles, was sich zwischen diesen Klammern befindet, wird als Handlebars-Ausdruck interpretiert und später durch den tatsächlichen Wert ersetzt.

#Bedingungsblock-Helper

Der #Bedingungsblock-Helper ist ein spezielles Konstrukt in Handlebars, das verwendet wird, um bedingte Anweisungen in Handlebars-Vorlagen zu erstellen. Er ermöglicht es, Teile der Vorlage basierend auf einer Bedingung anzuzeigen oder auszublenden. Mögliche Bedingungsblock-Helper sind:

(Bedingung)

Dies ist der Teil deines Handlebars-Ausdrucks, in dem du eine Bedingung oder einen Vergleich angibst. Es kann ein Vergleich sein, der wahr oder falsch ist.

Die Bedingung baut sich folgendermaßen auf: (Vergleichsoperator Attribut "Wert")

Bedingte Anzeige

Dies ist der Inhalt, der angezeigt wird, wenn die zuvor definierte Bedingung erfüllt ist. Hier kannst du HTML, Text oder andere Handlebars-Platzhalter einfügen. Wenn die Bedingung wahr ist, wird dieser Inhalt gerendert, ansonsten bleibt er ausgeblendet.

Du kannst dir z.B. einen bestimmten Text anzeigen lassen, einen Link oder auch ein Bild. In dieser Hinsicht bieten sich zahlreiche Möglichkeiten. Wir werden sie anhand konkreter Anwendungsfälle erläutern und dir beispielsweise zeigen, was du tun kannst.

{{/Bedingungsblock-Helper}

{{/Bedingungsblock-Helper}}ist das Abschluss-Tag eines Bedingungsblock-Helpers in Handlebars. Dieser Tag markiert das Ende des bedingten Abschnitts innerhalb einer Handlebars-Vorlage.

Mehrere Bedingungen verknüpfen

Wenn du mehrere Bedingungen in Handlebars prüfen möchtest, kannst du sie auf folgende Weisen verknüpfen:

UND-Verknüpfung: Wenn du sicherstellen möchtest, dass beide Bedingungen erfüllt sind, dann schreibst du sie einfach hintereinander.

{{#if(Bedingung1)}} {{#if(Bedingung2)}} Bedingte Anzeige wenn beide Bedingungen wahr sind {{/if}}{{/if}}

ODER-Verknüpfung: Wenn du möchtest, dass entweder die eine oder die andere Bedingung erfüllt wird, dann verwendest du den #else-Block.
 

{{#if (Bedingung1)}} Hier wird der Inhalt angezeigt, wenn Bedingung1 wahr ist {{else}} {{#if (Bedingung2)}} Hier wird der Inhalt angezeigt, wenn Bedingung2 wahr ist {{/if}} {{/if}}

Erstellen einer Anzeigebedingung

Das war nun der ganz allgemeine Aufbau einer Handlebar, darunter kannst du dir vielleicht noch nicht so viel vorstellen, deshalb möchten wir dir nun erkären, wie genau du vorgehst, um dir deine Variable zu erstellen:

Stelle zunächst deine Bedingung auf:

Nun musst du diese in die Handlebar-Snytax übersetzen:

{{#Bedingungsblock-Helper (Bedingung)}} Bedingte Anzeige {{/Bedingungsblock-Helper}}

Anwendungsfall 1: Anzeigen eines bestimmten Texts

Kommen wir nun zu konkreten Anwendungsällen. Wir werden diese kontinuierlich ergänzen. Sollte die Anzeigebedingung, die du erstellen willst nicht dabei sein, dann melde dich gerne bei uns und wir schauen gemeinsam, wie wir diese umsetzen können.

Bedingung: ”Wenn die Postleitzahl der Lieferadresse “50670” ist, zeige “max.mustermann@epilot.cloud” an.

Übersetzung:

Füge die einzelnen Elemente zusammen:

{{#if (eq opportunity.delivery_address.Primary.postal_code "50670")}} max.mustermann@epilot.cloud {{/if}}

Anwendungsfall 2: Anzeigen von Bildern

Damit du in deiner Anzeigebedingung ein Bild verwenden kannst, musst du dieses zunächst in epilot unter Dateien hochladen. Anschließend stellst du diese dann auf „öffentliche Datei“ und kopierst dort folgenden Link. Diesen musst du in deiner Anzeigebedingung verwenden:

Bild ohne Bedingungen anzeigen lassen

Wenn du einfach nur ein Bild als Variable verwenden möchtest, kannst du folgenden Code in deine individuelle Variable im Code Editor einfügen:

{{<img src="https://epilot-prod-user-content.s3.eu-central-1.amazonaws.com/" height=30 width=100>}}

Den Link tauschst du mit dem öffentlichen Link deiner Datei aus. Die Größe des Bildes kannst du ebenfalls beliebig verändern. Wenn du die Variable kopierst, ist es wichtig, dass du ~~ in die Variable einfügst. Deine Variable sieht dann folgendermaßen aus: {{~~Variable_Test}}.

Bild mit Bedingungen anzeigen lassen

Bedingung: “Wenn der Bearbeiter der Opportunity Max Mustermann heißt, dann soll ein Bild seiner Unterschrift angezeigt werden.”

{{#if (eq opportunity.assignee "Max Mustermann")}} <img src="https://epilot-prod-user-content.s3.eu-central-1.amazonaws.com/" height=30 width=100> {{/if}}

Die Werte für Größe und Style des Bild kannst du beliebig anpassen.

Diese Bedingung lässt sich dann natürlich auch noch erweitern, damit die Namen weiterer Mitarbeiter abgefragt werden. Dafür fügst du einfach mehrere Bedingungen hintereinander ein, dann werden diese nacheinander geprüft:

{{#if (eq opportunity.assignee.0.display_name "Max Mustermann")}} <img src="https://epilot-prod-user-content.s3.eu-central-1.amazonaws.com/Bild1" height=30 width=100> {{/if}}

{{#if (eq opportunity.assignee.0.display_name "Maria Musterfrau")}} <img src="https://epilot-prod-user-content.s3.eu-central-1.amazonaws.com/Bild2" height=30 width=100> {{/if}}