Skip to content

Fenster-Vorlage erstellen

Mit Fenster-Vorlagen steuerst du, wie Nachrichten des Hermes-Agenten auf dem Client dargestellt werden. Du definierst Layout und Verhalten über HTML, CSS und JavaScript und passt Größe sowie Position im Tab Window an.

Überblick zu mitgelieferten Vorlagen und Variablen findest du unter Fenster-Vorlagen.

${content} und anpassbare Vorlagen

Im HTML-Block bindest du mit ${content} den Html Inhalt der Nachricht ein. Beim Versand ersetzt das System die Variable durch den tatsächlichen Inhalt.

Das ist der zentrale Baustein für Vorlagen, die anpassbar sein müssen: Die Vorlage definiert Rahmen, Layout und Interaktion; der konkrete Text und dynamische Werte kommen aus der Nachricht. So kannst du dieselbe Vorlage für viele Nachrichten nutzen und Dynamic Data-Variablen im Html Inhalt binden, ohne die Vorlage jedes Mal zu ändern.

Schau dir dazu die mitgelieferte Vorlage Default Template an. Unter Configure Window Templates öffnest du sie und siehst im HTML-Block, wie ${content} eingebunden ist.

Beispiel: Weihnachtsfeier-Einladung

Dieses Beispiel zeigt Schritt für Schritt, wie du eine interaktive Fenster-Vorlage erstellst. Empfänger können Teilnahme und Gerichtewahl angeben; die Antworten werden per respond() an das Message Center zurückgegeben.

Voraussetzungen:

  • Message Center ist installiert und konfiguriert
  • Der Verteiler Labtagon Hermes ist eingerichtet
Inhalt
Fenster-Vorlagen öffnen
Neue Vorlage anlegen
HTML, CSS und JavaScript konfigurieren
Fenster-Eigenschaften festlegen
Vorlage in einer Nachricht verwenden
Ergebnis auf dem Client

Schritt 1: Fenster-Vorlagen öffnen

Wechsle im Message Center zu Verteiler und wähle den Kanal Labtagon Hermes aus.

Klicke in der Detailansicht auf Configure Window Templates.

image

Schritt 2: Neue Vorlage anlegen

Im Dialog Configure Window Templates siehst du die vorhandenen Vorlagen, z. B. Default Template oder Genehmigungs-Fenster.

Öffne Default Template, wenn du sehen möchtest, wie ${content} im HTML eingebunden wird, bevor du eine eigene Vorlage anlegst.

Klicke auf +, um eine neue Vorlage anzulegen, oder wähle eine bestehende Vorlage zum Bearbeiten aus.

image

Schritt 3: Inhalt im Tab General konfigurieren

Gib der Vorlage einen Anzeigenamen, z. B. Weihnachtsfeier-Einladung, und aktiviere Enabled.

Im Tab General bearbeitest du drei Bereiche:

HTML

Im HTML-Block definierst du Struktur und Formularelemente der Nachricht.

Für anpassbare Vorlagen bindest du den Nachrichteninhalt mit ${content} ein. Der Platzhalter wird beim Versand durch den Html Inhalt der Nachricht ersetzt. So trennst du festes Layout von variablem Text und kannst Dynamic Data in der Nachricht nutzen, während die Vorlage unverändert bleibt.

Im Beispiel Weihnachtsfeier-Einladung ist der Inhalt direkt in der Vorlage hinterlegt. Für wiederverwendbare Vorlagen orientierst du dich am Default Template.

Das Beispielformular enthält:

  • eine Überschrift und Einleitungstext
  • Radio-Buttons für die Teilnahme (Ja / Nein)
  • ein Dropdown für die Gerichtewahl
  • einen Button Abschicken

JavaScript

Über JavaScript steuerst du Interaktionen und Antworten. Im Beispiel liest ein Klick-Handler die Formularwerte aus und sendet sie mit respond() zurück:

$("#submitBtn").on("click", function() {
    var attendance = $("input[name='attendance']:checked").val();
    var choice = $("#choice").val();
    respond("attendance:" + attendance);
    respond("choice:" + choice);
    setTimeout(closeMessage, 250);
});
Funktion Beschreibung
respond(keyValue) Sendet eine Key/Value-Antwort an das Message Center, z. B. für Umfragen oder Freitext
closeMessage() Schließt das Nachrichtenfenster auf dem Client

Tip

Mit dem Senden von Antworten über respond() und der Auswertung dieser Antworten durch Workflows lassen sich starke Prozesse bauen – z. B. direkte Abnahme und Bewertung von Bestellungen, direkt über die Nachricht. Details dazu im Guide Antworten verarbeiten.

CSS

Im CSS-Block gestaltest du das Erscheinungsbild. Im Beispiel wird das Formular als zentrierte Karte mit Flexbox dargestellt.

Speichere deine Änderungen mit Speichern & Schließen.

image

Schritt 4: Fenster-Eigenschaften im Tab Window

Wechsle zum Tab Window, um Größe, Position und Schließverhalten festzulegen.

Im Beispiel:

  • Anchor Position: Center
  • Breite: 800 px
  • Höhe: 600 px
  • Window Style: Window
  • Schließt automatisch nach: 0 (Fenster bleibt offen, bis der Nutzer es schließt oder closeMessage() aufgerufen wird)

Unten siehst du eine Vorschau des Fensters mit den konfigurierten Formularelementen.

image

Schritt 5: Vorlage in einer Nachricht verwenden

Erstelle oder bearbeite eine Nachricht und wechsle zum Tab Verteilungswege.

Wähle den Verteiler Labtagon Hermes und klicke auf EDIT. Unter Wähle Fenster-Vorlage wählst du die Vorlage Weihnachtsfeier-Einladung.

Speichere die Nachricht.

image

Schritt 6: Ergebnis auf dem Client

Nach dem Versand zeigt der Hermes-Agent das Fenster mit deiner Vorlage an. Der Empfänger sieht Titel, Formular und den Button Abschicken.

Nach dem Absenden werden die Antworten über respond() an das Message Center übermittelt und das Fenster schließt sich.

image

Antworten weiterverarbeiten

Die mit respond() gesendeten Key/Value-Paare kannst du im Message Center auswerten und für Folgeaktionen nutzen, z. B. zur Auswertung von Umfragen oder zur Steuerung von Workflows.

Wie du Antworten im Tab Response Processing verarbeitest, beschreibt der Guide Antworten verarbeiten.