Tutorial: Erstellen Sie Vorlagen

Erstellen Sie Druck- und Webvorlagen für die interaktive Kommunikation

07-apply-rules-to-adaptive-form_small

Dieses Lernprogramm ist ein Schritt in der Reihe Erstellen Sie Ihre erste interaktive Kommunikation. Es wird empfohlen, der Serie in chronologischer Reihenfolge zu folgen, um den vollständigen Anwendungsfall zu verstehen, auszuführen und zu demonstrieren.

Um eine interaktive Kommunikation zu erstellen, müssen auf dem AEM-Server Vorlagen für Druck- und Webkanäle verfügbar sein.

Die Vorlagen für den Druckkanal werden in Adobe Forms Designer erstellt und auf den AEM-Server hochgeladen. Diese Vorlagen stehen dann zur Verfügung, während Sie eine interaktive Kommunikation erstellen.

Die Vorlagen für den Webkanal werden in AEM erstellt. Vorlagenautoren und Administratoren können Webvorlagen erstellen, bearbeiten und aktivieren. Nachdem sie erstellt und aktiviert wurden, stehen diese Vorlagen zur Verfügung, während Sie eine interaktive Kommunikation erstellen.

In diesem Tutorial werden Sie durch die Schritte zum Erstellen von Vorlagen für Druck- und Webkanäle geführt, sodass sie beim Erstellen von interaktiver Kommunikation verfügbar sind. Am Ende dieser Schulung können Sie Folgendes:

  • Erstellen Sie XDP-Vorlagen für den Druckkanal mit Adobe Forms Designer
  • Laden Sie die XDP-Vorlagen auf den AEM Forms Server hoch
  • Erstellen und aktivieren Sie Vorlagen für den Webkanal

Erstellen Sie eine Vorlage für den Druckkanal

Erstellen und verwalten Sie eine Vorlage für den Druckkanal von interaktiver Kommunikation mit folgenden Aufgaben:

Erstellen Sie eine XDP-Vorlage mit dem Forms Designer

Erstellen Sie auf der Grundlage der Argumente und Anatomie die folgenden Teilformulare in der XDP-Vorlage:

  • Rechnungsdetails: Enthält ein Dokumentfragment
  • Kundendetails: Umfasst ein Dokument-Fragment
  • Bill Summary: Umfasst ein Dokument-Fragment
  • Zusammenfassung: Umfasst ein Dokument-Fragment (Teilformular "Gebühren") und ein Diagramm (Teilformular "Diagramme")
  • Angepasste Aufrufe: Umfasst eine Tabelle (Layout-Fragment)
  • Jetzt bezahlen: Umfasst ein Bild
  • Value Added Services: Umfasst ein Bild

create_print_template

Diese Unterformulare werden nach dem Hochladen der XDP-Datei auf den Forms-Server als Zielbereiche in der Druckvorlage angezeigt. Alle Entitäten wie Dokumentfragmente, Diagramme, Layoutfragmente und Bilder werden bei der Erstellung der interaktiven Kommunikation Zielbereichen hinzugefügt.

Führen Sie die folgenden Schritte aus, um eine XDP-Vorlage für den Druckkanal zu erstellen:

  1. Öffnen Sie den Forms Designer, wählen Sie Datei > Neu > Leeres Formular verwenden, tippen Sie auf Weiter und dann auf Fertig stellen, um das Formular zur Vorlagenerstellung zu öffnen.

    Stellen Sie sicher, dass die Objektbibliothek und die Option Objekt im Menü Fenster ausgewählt werden.

  2. Ziehen Sie die Komponente Teilformular aus der Objektbibliothek in das Formular.

  3. Wählen Sie das Teilformular aus, um die Optionen für das Teilformular im Fenster Objekt im rechten Bereich anzuzeigen.

  4. Wählen Sie die Registerkarte Teilformular und wählen Sie Textfluss aus der Dropdown-Liste Inhalt. Ziehen Sie den linken Endpunkt des Teilformulars, um die Länge anzupassen.

  5. Führen Sie auf der Registerkarte Bindungen folgende Schritte aus:

    1. Geben Sie BillDetails im Feld Name an.
    2. Wählen Sie Keine Datenbindung aus der Dropdown-Liste Datenbindung.

    forms_designer_subform

  6. Wählen Sie auf ähnliche Weise das Stammteilformular aus, wählen Sie die Registerkarte Teilformular und wählen Sie Textfluss aus der Dropdown-Liste Inhalt. Führen Sie auf der Registerkarte Bindungen folgende Schritte aus:

    1. Geben Sie TelecaBill im Feld Name ein.
    2. Wählen Sie Keine Datenbindung aus der Dropdown-Liste Datenbindung.

    root_subform_print_template

  7. Wiederholen Sie die Schritte 2 bis 5, um die folgenden Teilformulare zu erstellen:

    • BillDetails

    • CustomerDetails

    • BillSummary

    • Zusammenfassung - Wählen Sie die Registerkarte Teilformular und wählen Sie Positioniert aus der Dropdown-Liste Inhalt für dieses Teilformular. Fügen Sie die folgenden Teilformulare in das Teilformular Zusammenfassung ein.

      • Gebühren
      • Diagramme
    • ItemisedCalls

    • PayNow

    • Mehrwert - Service

    Um Zeit zu sparen, können Sie auch vorhandene Teilformulare kopieren und einfügen, um neue Teilformulare zu erstellen.

    Um das Teilformular Diagramme rechts neben dem Teilformular "Gebühren"zu verschieben, wählen Sie im linken Bereich das Teilformular Diagramme aus, wählen Sie die Registerkarte Layout und geben Sie einen Wert für AnchorX ein. Der Wert muss größer als der Wert für das Feld Breite für das Teilformular Gebühren sein. Wählen Sie das Teilformular Gebühren und wählen Sie die Registerkarte Layout, um den Wert des Felds Breite anzuzeigen.

  8. Ziehen Sie das Objekt Text aus der Objektbibliothek in das Formular, und geben Sie den Text XXXX zum Abonnieren wählen in das Feld ein.

  9. Klicken Sie mit der rechten Maustaste auf das Textobjekt im linken Bereich, wählen Sie Objekt umbenennen und geben Sie den Namen des Textobjekts als Abonnieren ein.

    print_xdp_template_subform

  10. Wählen Sie Datei > Speichern unter, um die Datei im lokalen Dateisystem zu speichern:

    1. Navigieren Sie zum Speicherort der Datei und geben Sie den Namen create_first_ic_print_template ein.
    2. Wählen Sie .xdp aus der Dropdown-Liste Dateityp.
    3. Tippen Sie auf Speichern.

Laden Sie die XDP-Vorlagen auf den AEM Forms Server hoch

Nachdem Sie eine XDP-Vorlage mit dem Forms-Designer erstellt haben, müssen Sie sie auf den AEM Forms-Server hochladen, damit die Vorlage beim Erstellen der interaktiven Kommunikation verwendet werden kann.

  1. Wählen Sie Formulare > Formulare & Dokumente.

  2. Tippen Sie auf Erstellen > Datei hochladen.

    Navigieren Sie zur Vorlage create_first_ic_print_template (XDP) und tippen Sie auf Open, um die XDP-Vorlage auf den AEM Forms-Server zu importieren.

XDP-Vorlage für Layoutfragmente erstellen

Um ein Layoutfragment für den Druckkanal der interaktiven Kommunikation zu erstellen, erstellen Sie ein XDP mit Forms Designer und laden Sie es auf den AEM Forms-Server hoch.

  1. Öffnen Sie den Forms Designer, wählen Sie Datei > Neu > Leeres Formular verwenden, tippen Sie auf Weiter und dann auf Fertig stellen, um das Formular zur Vorlagenerstellung zu öffnen.

    Stellen Sie sicher, dass die Objektbibliothek und die Option Objekt im Menü Fenster ausgewählt werden.

  2. Ziehen Sie die Komponente Tabelle aus der Objektbibliothek in das Formular.

  3. Gehen Sie im Dialogfeld „Tabelle“ folgendermaßen vor:

    1. Geben Sie die Anzahl der Spalten als 5 an.
    2. Spezifizieren Sie die Anzahl von Zeilen im Hauptteil als 1.
    3. Aktivieren -sie das Kontrollkästchen Kopfzeile in Tabelle einschließen.
    4. Registerkarte OK.
  4. Tippen Sie im linken Bereich neben Tabelle 1 auf + und klicken Sie mit der rechten Maustaste auf Zelle1 und wählen Sie Objekt umbenennen in Datum.

    Benennen Sie Zelle2, Zelle3, Zelle4 und Zelle5 in Zeit, Anzahl, Dauer und Kosten um.

  5. Klicken Sie auf die Textfelder für die Kopfzeile in der Designer-Ansicht und benennen Sie sie in Time, Number, Duration und Charges um.

    layout_fragment_print

  6. Wählen Sie Zeile 1 aus dem linken Bereich und wählen Sie Objekt > Bindung > Zeile für jedes Datenelement wiederholen.

    layout_fragment_print_repeat

  7. Ziehen Sie die Komponente Textfeld aus der Objektbibliothek in die Designer-Ansicht.

    layout_fragment_print_text_field

    Ziehen Sie die Komponente Textfeld in die Zeilen Zeit, Anzahl, Dauer und Kosten.

  8. Wählen Sie Datei > Speichern unter, um die Datei im lokalen Dateisystem zu speichern:

    1. Navigieren Sie zum Speicherort der Datei und geben Sie den Namen table_lf an.
    2. Wählen Sie .xdp aus der Dropdown-Liste Dateityp.
    3. Tippen Sie auf Speichern.

    Nachdem Sie eine XDP-Vorlage mit dem Forms-Designer erstellt haben, müssen Sie sie auf den AEM Forms-Server hochladen , damit die Vorlage beim Erstellen der von Layout-Fragmenten verwendet werden kann.

Erstellen Sie eine Vorlage für den Webkanal

Erstellen und verwalten Sie eine Vorlage für den Webkanal von interaktiver Kommunikation mit folgenden Aufgaben:

Ordner für Vorlagen erstellen

Um eine Webkanal-Vorlage zu erstellen, definieren Sie einen Ordner, in dem Sie die erstellten Vorlagen speichern können. Sobald Sie eine Vorlage in einem Ordner erstellt haben, müssen Sie die Vorlage aktivieren, damit die Formularbenutzer den Webkanal einer interaktiven Kommunikation basierend auf der Vorlage erstellen können.

Führen Sie die folgenden Schritte aus, um einen Ordner für die bearbeitbaren Vorlagen zu erstellen:

  1. Tippen Sie auf Tools Tools > Konfigurationsbrowser.

    • Weitere Informationen finden Sie in der Dokumentation zum Konfigurationsbrowser](/docs/experience-manager-64/sites-administering/configurations.html?lang=de).[
  2. Tippen Sie auf der Seite "Configuration Browser"auf Create.

  3. Geben Sie im Dialogfeld Konfiguration erstellen Create_First_IC_templates als Titel für den Ordner an, markieren Sie Bearbeitbare Vorlagen und tippen Sie auf Erstellen.

    create_first_ic_web_template

    Der Ordner Create_First_IC_templates wird erstellt und auf der Seite Configuration Browser aufgelistet.

Vorlage erstellen

Erstellen Sie auf der Grundlage von Verwendungsfall und Anatomie die folgenden Bereiche in der Webvorlage:

  • Rechnungsdetails: Enthält ein Dokumentfragment
  • Kundendetails: Umfasst ein Dokument-Fragment
  • Bill Summary: Umfasst ein Dokument-Fragment
  • Zusammenfassung der Gebühren: Umfasst ein Dokument- und ein Diagramm (zweispaltiges Layout)
  • Angepasste Aufrufe: Umfasst eine Tabelle
  • Jetzt bezahlen: Enthält eine Schaltfläche Jetzt bezahlen und ein Bild
  • Value Added Services: Umfasst ein Bild und eine Schaltfläche Abonnieren.

create_web_template

Beim Erstellen der interaktiven Kommunikation werden alle Elemente wie Dokumentfragmente, Diagramme, Tabellen, Bilder und Schaltflächen hinzugefügt.

Führen Sie die folgenden Schritte aus, um eine Vorlage für den Webkanal im Ordner Create_First_IC_templates zu erstellen:

  1. Navigieren Sie zum entsprechenden Vorlagenordner, indem Sie Tools > Vorlagen > Erstellen_Erste_IC_Vorlagen auswählen.

  2. Tippen Sie auf Erstellen.

  3. Wählen Sie im Konfigurationsassistenten Wählen Sie einen Vorlagentyp aus und klicken Sie auf Interaktive Kommunikation - Web-Kanal und dann auf Weiter.

  4. Geben Sie im Konfigurationsassistenten Vorlagendetails Create_First_IC_Web_Template als Vorlagentitel an. Geben Sie eine optionale Beschreibung ein und tippen Sie auf Erstellen.

    Eine Bestätigungsmeldung, dass Create_First_IC_Web_Template angezeigt wird.

  5. Tippen Sie auf Öffnen, um die Vorlage im Vorlageneditor zu öffnen.

  6. Wählen Sie Anfänglicher Inhalt aus der Dropdown-Liste neben der Option Vorschau.

    template_editor_initial_content

  7. Tippen Sie auf Stammfeld und dann auf +, um die Liste der Komponenten Ansicht, die Sie der Vorlage hinzufügen können.

  8. Wählen Sie Bereich aus der Liste, um einen Bereich über dem Stammbereich hinzuzufügen.

  9. Wählen Sie die Registerkarte Inhalt im linken Bereich. Der neue Bereich, der in Schritt 8 hinzugefügt wurde, wird im Stammbereich in der Inhaltsstruktur angezeigt.

    content_tree_root_panel

  10. Wählen Sie das Bedienfeld aus und tippen Sie auf configure_icon (Konfigurieren).

  11. Im Bereich „Eigenschaften“:

    1. Geben Sie in das Feld „Name“ BillDetails ein.
    2. Geben Sie in das Feld „Titel“ Rechnungsdetails ein.
    3. Wählen Sie 1 aus der Dropdown-Liste Anzahl der Spalten.
    4. Tippen Sie auf done_icon, um die Eigenschaften zu speichern.

    Der Name des Bereichs wird in der Inhaltsstruktur auf Rechnungsdetails aktualisiert.

  12. Wiederholen Sie die Schritte 7 bis 11, um der Vorlage Bereiche mit den folgenden Eigenschaften hinzuzufügen:

    Name Titel Spaltenanzahl
    customerdetails Kundendetails 1
    billsummary Rechnungszusammenfassung 3
    summarycharges Zusammenfassung der Gebühren 2
    itemisedcalls Einzeln aufgeführte Anrufe 1
    paynow Jetzt zahlen 2
    vas Mehrwert - Service 1

    Das folgende Bild zeigt die Inhaltsstruktur, nachdem alle Bereiche zur Vorlage hinzugefügt wurden:

    content_tee_all_panels

Vorlage aktivieren

Nachdem Sie die Webvorlage erstellt haben, müssen Sie sie zur Erstellung der interaktiven Kommunikation aktivieren.

Führen Sie die folgenden Schritte aus, um die Webvorlage zu aktivieren:

  1. Tippen Sie auf Tools Tools > Vorlagen.

  2. Navigieren Sie zur Vorlage Create_First_IC_Web_Template, wählen Sie sie aus und tippen Sie auf Enable.

  3. Registerkarte Aktivieren erneut zur Bestätigung.

    Die Vorlage ist aktiviert und ihr Status wird als „Aktiviert“ angezeigt. Sie können diese Vorlage beim Erstellen von interaktiver Kommunikation für den Webkanal verwenden.

Aktivieren von Schaltflächen in interaktiven Kommunikationen

Basierend auf den Anwendungsfall müssen Sie die Schaltflächen Jetzt bezahlen und Abonnieren einbeziehen (adaptive Formularkomponenten) in der interaktiven Kommunikation. Führen Sie die folgenden Schritte aus, um die Verwendung dieser Schaltflächen in der interaktiven Kommunikation zu aktivieren:

  1. Wählen Sie Struktur aus der Dropdown-Liste neben der Option Vorschau.

  2. Wählen Sie im Stammbereich Dokument-Container mit der Inhaltsstruktur und tippen Sie auf Richtlinie, um die Komponenten auszuwählen, die für die Verwendung in der interaktiven Kommunikation erlaubt sind.

    structure_configure_policy

  3. Wählen Sie auf der Registerkarte Zugelassene Komponenten im Abschnitt Eigenschaften die Option Schaltfläche aus den Komponenten Adaptives Formular.

    allowed_components_af

  4. Tippen Sie auf done_icon, um die Eigenschaften zu speichern.

Auf dieser Seite

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now