Tutorial: Erstellen einer interaktiven Kommunikation tutorial-create-interactive-communication

09-style-your-adaptive-form-small

Dieses Tutorial ist ein Schritt in der Reihe Erstellen Sie Ihre erste interaktive Kommunikation. Es wird empfohlen, die Serie in chronologischer Reihenfolge zu durchlaufen, um den vollständigen Anwendungsfall des Tutorials zu verstehen, durchzuführen und zu demonstrieren.

Nachdem Sie alle Bausteine wie Formulardatenmodell, Dokumentfragmente und Vorlagen und Themen für die Webversion erstellt haben, können Sie mit der Erstellung einer interaktiven Kommunikation beginnen.

Eine interaktive Kommunikation kann über zwei Kanäle bereitgestellt werden: den Druckkanal und den Web-Kanal. Sie können auch eine interaktive Kommunikation mit dem Druckkanal als Primär erstellen. Die Option zum Drucken als Primär für den Web-Kanal stellt sicher, dass Inhalt, Vererbung und Datenbindung des Web-Kanals vom Druckkanal abgeleitet werden. Hierdurch wird außerdem sichergestellt, dass die im Druckkanal vorgenommenen Änderungen im Web-Kanal synchronisiert werden. Die Autorinnen und Autoren der interaktiven Kommunikation dürfen jedoch ggf. die Vererbung für bestimmte Komponenten im Web-Kanal aufheben.

Dieses Tutorial führt Sie durch die Schritte zum Erstellen interaktiver Mitteilungen für Print- und Web-Kanäle. Am Ende dieses Tutorials können Sie Folgendes:

  • Erstellen einer interaktiven Kommunikation für den Druckkanal
  • Erstellen einer interaktiven Kommunikation für den Web-Kanal
  • Erstellen einer interaktiven Kommunikation für den Druck- und Web-Kanal mit der Option zum Drucken als Primär

Erstellen einer interaktiven Kommunikation für den Druck- und Web-Kanal ohne Synchronisierung create-interactive-communications-for-print-and-web-with-no-synchronization

Erstellen einer interaktiven Kommunikation für den Druckkanal create-interactive-communication-for-print-channel

Die folgende Liste führt die Ressourcen auf, die in diesem Tutorial bereits erstellt wurden und beim Erstellen der interaktiven Kommunikation für den Druckkanal benötigt werden:

Druckvorlage: create_first_ic_print_template

Formulardatenmodell: FDM_Create_First_IC

Dokumentfragmente: bill_details_first_ic, customer_details_first_ic, bill_summary_first_ic, summary_charges_first_ic

Layout-Fragmente: table_lf

Bilder: PayNow und ValueAddedServices

  1. Melden Sie sich bei Ihrer AEM-Autoreninstanz an und navigieren Sie zu Adobe Experience Manager  >  Formulare  >  Formulare und Dokumente.

  2. Tippen Sie auf  Erstellen  und wählen Sie Interaktive Kommunikation aus. Der Assistent Erstellen einer interaktiven Kommunikation wird angezeigt.

  3. Geben Sie create_first_ic im Feld Titel und im Feld Name an. Wählen Sie FDM_Create_First_IC als Formulardatenmodell aus und dann Weiter.

  4. Im Assistenten Kanäle:

    1. Geben Sie als Druckvorlage create_first_ic_print_template an und wählen Sie Auswählen aus. Stellen Sie sicher, dass das Kontrollkästchen Druck als Primärkanal für Web-Kanal verwenden nicht aktiviert ist.

    2. Geben Sie den Ordner Create_First_IC_templates > Create_First_IC_Web_Template als Web-Vorlage ein und wählen Sie Auswählen aus.

    3. Wählen Sie Erstellen aus.

    Es wird eine Bestätigungsmeldung darüber angezeigt, dass die interaktive Kommunikation erfolgreich erstellt wurde.

  5. Wählen Sie  Bearbeiten aus, um die interaktive Kommunikation im rechten Bereich zu öffnen.

  6. Wechseln Sie zur Registerkarte Assets und wenden Sie den Filter an, um nur die Dokumentfragmente im linken Bereich anzuzeigen.

  7. Ziehen Sie die folgenden Dokumentfragmente per Drag-and-Drop in die entsprechenden Zielbereiche der Interaktiven Kommunikation:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2
    Dokumentfragment Zielbereich
    bill_details_first_ic BillDetails
    customer_details_first_ic CustomerDetails
    bill_summary_first_ic BillSummary
    summary_charges_first_interactive_communication Gebühren

    Dokumentfragmente für interaktive Kommunikation

  8. Wählen Sie den Zielbereich Diagramme und anschließend +  aus, um eine Komponente Diagramm hinzuzufügen.

  9. Wählen Sie die Diagrammkomponente und configure_icon (Konfigurieren) aus. Die Diagrammeigenschaften werden im linken Bereich angezeigt:

    1. Geben Sie einen Namen für das Diagramm an.
    2. Wählen Sie Kreis aus der Dropdownliste Diagrammtyp.
    3. Wählen Sie die Eigenschaft calltype aus dem Datenmodellobjekt calls im Abschnitt X-Achse Wählen Sie done_icon aus.
    4. Wählen Sie Frequenz aus der Dropdown-Liste Funktion.
    5. Wählen Sie die Eigenschaft calltype aus dem Datenmodellobjekt calls im Abschnitt Y-Achse aus. Wählen Sie done_icon aus.
    6. Wählen Sie done_icon , um die Diagrammeigenschaften zu speichern.
  10. Wechseln Sie zur Registerkarte Elemente und wenden Sie den Filter an, um nur die Layout-Fragmente im linken Bereich anzuzeigen. Ziehen Sie das Layout table_lf per Drag-and-Drop in den Zielbereich Einzeln aufgeführte Anrufe.

  11. Wählen Sie das Textfeld in der Spalte Datum und configure_icon (Konfigurieren) aus.

  12. Wählen Sie Datenmodellobjekt aus der Dropdown-Liste Bindungstyp und wählen Sie calls > calldate. Zum Speichern der Eigenschaften wählen Sie zweimal done_icon aus.

    Erstellen Sie eine Bindung mit calltime, callnumber, callduration und callcharges für Textfelder in den Spalten Zeit, Anzahl, Dauer und Kosten.

  13. Um eine Bildkomponente hinzuzufügen, wählen Sie den Zielbereich PayNow und anschließend +  aus.

  14. Wählen Sie die Bildkomponente und configure_icon (Konfigurieren) aus. Die Bildeigenschaften werden im linken Bereich angezeigt:

    1. Geben Sie PayNow als Namen des Bilds im Feld Name ein.
    2. Wählen Sie Hochladen, dann das im lokalen Dateisystem gespeicherte Bild und schließlich Öffnen aus.
    3. Wählen Sie done_icon aus, um die Bildeigenschaften zu speichern.
  15. Um das Bild ValueAddedServices dem Zielbereich ValueAddedServices hinzuzufügen, wiederholen Sie die Schritte 13 und 14.

Erstellen einer interaktiven Kommunikation für den Web-Kanal create-interactive-communication-for-web-channel

Die folgende Liste führt die Ressourcen auf, die in diesem Tutorial bereits erstellt wurden und beim Erstellen der interaktiven Kommunikation für den Web-Kanal benötigt werden:

Webvorlage: Create_First_IC_Web_Template

Formulardatenmodell: FDM_Create_First_IC

Dokumentfragmente: bill_details_first_ic, customer_details_first_ic, bill_summary_first_ic, summary_charges_first_ic

Bilder: PayNowWeb und ValueAddedServicesWeb

  1. Melden Sie sich bei Ihrer AEM-Autoreninstanz an und navigieren Sie zu Adobe Experience Manager  >  Formulare  >  Formulare und Dokumente.

  2. Tippen Sie auf  Erstellen  und wählen Sie Interaktive Kommunikation aus. Der Assistent Erstellen einer interaktiven Kommunikation wird angezeigt.

  3. Geben Sie create_first_ic im Feld Titel und im Feld Name an. Wählen Sie FDM_Create_First_IC als Formulardatenmodell aus und dann Weiter.

  4. Im Assistenten Kanäle:

    1. Geben Sie als Druckvorlage create_first_ic_print_template an und wählen Sie Auswählen aus. Stellen Sie sicher, dass das Kontrollkästchen Druck als Primärkanal für Web-Kanal verwenden nicht aktiviert ist.

    2. Geben Sie den Ordner Create_First_IC_templates > Create_First_IC_Web_Template als Web-Vorlage ein und wählen Sie Auswählen aus.

    3. Wählen Sie Erstellen aus.

    Es wird eine Bestätigungsmeldung darüber angezeigt, dass die interaktive Kommunikation erfolgreich erstellt wurde.

  5. Wählen Sie  Bearbeiten  aus, um die interaktive Kommunikation im rechten Bereich zu öffnen.

  6. Wählen Sie die Registerkarte Kanäle im linken Bereich und dann Web aus.

  7. Wechseln Sie zur Registerkarte Assets und wenden Sie den Filter an, um nur die Dokumentfragmente im linken Bereich anzuzeigen.

  8. Ziehen Sie die folgenden Dokumentfragmente per Drag-and-Drop in die entsprechenden Zielbereiche der Interaktiven Kommunikation:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2
    Dokumentfragment Zielbereich
    bill_details_first_ic BillDetails
    customer_details_first_ic CustomerDetails
    bill_summary_first_ic BillSummary
    summary_charges_first_interactive_communication Gebühren
  9. Wählen Sie den Zielbereich Zusammenfassung der Gebühren und anschließend + aus, um eine Diagrammkomponente hinzuzufügen.

  10. Wählen Sie die Diagrammkomponente und dann configure_icon (Konfigurieren) aus. Die Diagrammeigenschaften werden im linken Bereich angezeigt:

    1. Geben Sie einen Namen für das Diagramm an.

    2. Wählen Sie Kreis aus der Dropdownliste Diagrammtyp.

    3. Wählen Sie die Eigenschaft calltype aus dem Datenmodellobjekt calls im Abschnitt X-Achse Wählen Sie done_icon aus.

    4. Wählen Sie Frequenz aus der Dropdown-Liste Funktion.

    5. Wählen Sie die Eigenschaft calltype aus dem Datenmodellobjekt calls im Abschnitt Y-Achse aus. Wählen Sie done_icon aus.

    6. Wählen Sie done_icon , um die Diagrammeigenschaften zu speichern.

  11. Wählen Sie die Registerkarte Datenquellen aus dem linken Bereich und ziehen Sie das Datenmodellobjekt calls in den Zielbereich Einzeln aufgeführte Anrufe. Alle Eigenschaften im Datenmodellobjekt calls werden als Tabellenspalten im Zielbereich Einzeln aufgeführte Anrufe im rechten Bereich angezeigt.

    Basierend auf dem Anwendungsfall benötigen Sie die Spalten „Anrufdatum“, „Anrufzeit“, „Rufnummer“, „Anrufdauer“ und „Anrufkosten“ in der Tabelle.

    Tabelle für interaktive Kommunikation

  12. Wählen Sie die Tabellenspaltenüberschrift Mobilenum und dann Weitere Optionen > Spalte löschen aus. Löschen Sie auf ähnliche Weise die Spalte Anruftyp.

  13. Wählen Sie die Tabellenspaltenüberschrift Calldate und dann edit (Bearbeiten) aus, um den Text in Anrufdatum zu ändern. Benennen Sie auf diese Weise auch die anderen Spaltenüberschriften in der Tabelle um.

  14. Fügen Sie je nach Anwendungsfall die Schaltfläche Jetzt bezahlen in die interaktive Kommunikation ein, die Benutzenden die Option bietet, die Zahlung durch Klicken auf die Schaltfläche vorzunehmen. Führen Sie die folgenden Schritte aus, um die Schaltfläche einzufügen:

    1. Wählen Sie den Zielbereich Jetzt bezahlen und anschließend + aus, um eine Textkomponente hinzuzufügen.

    2. Wählen Sie die Textkomponente und dann edit (Bearbeiten) aus.

    3. Ändern Sie den Text in Jetzt bezahlen.

    4. Wählen Sie den Text und dann das Hyperlink-Symbol aus.

    5. Geben Sie die Zahlungs-URL in das Feld Pfad ein.

    6. Wählen Sie aus der Dropdown-Liste Ziel die Option Neue Registerkarte aus.

    7. Wählen Sie done_icon aus, um die Hyperlink-Eigenschaften zu speichern.

  15. Wählen Sie Style aus der Dropdown-Liste neben der Option Vorschau.

    Auswählen des Stilmodus für interaktive Kommunikation

  16. Gestalten Sie den Hyperlink-Text so, dass er als Schaltfläche in der interaktiven Kommunikation angezeigt wird. Gehen Sie dazu wie folgt vor:

    1. Wählen Sie die Textkomponente und dann edit (Bearbeiten) aus.

    2. Geben Sie im Abschnitt Rahmen 1.5px als Rahmenbreite ein, wählen Sie Durchgehend als Rahmenstil ein und geben Sie 46px als Rahmenradius ein.

    3. Wählen Sie im Abschnitt Hintergrund die Farbe Rot als Hintergrundfarbe für die Schaltfläche aus.

    4. Wählen Sie im Feld Rand für Abmessungen und Position das Symbol Gleichzeitig bearbeiten aus und legen Sie für den rechten Rand 450 Pixel fest. Die Felder Oben, Unten und Links werden leer gelassen.

    Einfügen eines Hyperlinks in interaktive Kommunikation

  17. Wählen Sie den Zielbereich Jetzt bezahlen und anschließend + aus, um eine Bildkomponente hinzuzufügen.

  18. Wählen Sie die Bildkomponente und dann configure_icon (Konfigurieren) aus. Die Bildeigenschaften werden im linken Bereich angezeigt:

    1. Geben Sie PayNow als Namen des Bildes im Feld Name an.

    2. Wählen Sie Hochladen, dann das im lokalen Dateisystem gespeicherte Bild PayNowWeb und schließlich Öffnen aus.

    3. Wählen Sie done_icon aus, um die Bildeigenschaften zu speichern.

  19. Fügen Sie je nach Anwendungsfall die Schaltfläche Abonnieren in die interaktive Kommunikation ein, die dem Benutzer die Option bietet, den Mehrwert-Service durch Klicken auf die Schaltfläche zu abonnieren.

    Wiederholen Sie die Schritte 13 bis 17, um eine Schaltfläche Abonnieren zum Zielbereich Mehrwert - Service hinzuzufügen und das Bild ValueAddedServicesWeb hinzufügen.

Erstellen interaktiver Kommunikation für Druck- und Web-Kanäle mit automatischer Synchronisierung create-interactive-communications-for-print-and-web-with-auto-synchronization

Sie können eine interaktive Kommunikation auch erstellen, indem Sie die automatische Synchronisierung zwischen Druck- und Web-Kanälen aktivieren. Um die automatische Synchronisierung zu aktivieren, wählen Sie beim Erstellen der interaktiven Kommunikation die Option „Print als Master“ aus. Die Option „Print als Master“ stellt sicher, dass Inhalt, Vererbung und Datenbindung des Web-Kanals vom Druckkanal abgeleitet werden. Darüber hinaus wird sichergestellt, dass die im Druckkanal vorgenommenen Änderungen im Web-Kanal widergespiegelt werden.

Führen Sie die folgenden Schritte aus, um den Inhalt des Web-Kanals mithilfe des Druckkanals abzuleiten:

  1. Melden Sie sich bei Ihrer AEM-Autoreninstanz an und navigieren Sie zu Adobe Experience Manager  >  Formulare  >  Formulare und Dokumente.

  2. Tippen Sie auf  Erstellen  und wählen Sie Interaktive Kommunikation aus. Der Assistent Erstellen einer interaktiven Kommunikation wird angezeigt.

  3. Geben Sie create_first_ic im Feld Titel und im Feld Name an. Wählen Sie FDM_Create_First_IC als Formulardatenmodell aus und dann Weiter.

  4. Im Assistenten Kanäle:

    1. Geben Sie create_first_ic_print_template als Druckvorlage an und wählen Sie Auswählen aus.

    2. Aktivieren Sie das Kontrollkästchen Druck als Primärkanal für Web-Kanal verwenden.

    3. Geben Sie den Ordner Create_First_IC_templates > Create_First_IC_Web_Template als Web-Vorlage an und wählen Sie Auswählen aus.

    4. Wählen Sie Erstellen aus.

    Es wird eine Bestätigungsmeldung darüber angezeigt, dass die interaktive Kommunikation erfolgreich erstellt wurde.

  5. Wählen Sie Bearbeiten aus, um die interaktive Kommunikation im rechten Bereich zu öffnen.

  6. Führen Sie die Schritte 6–15 des Abschnitts Erstellen einer interaktiven Kommunikation für den Druckkanal aus.

  7. Wählen Sie im linken Bereich die Registerkarte Kanäle und dann Web aus, um anhand des Druckkanals automatisch Inhalte für den Web-Kanal zu generieren.

  8. Da Sie in Schritt 4 das Kontrollkästchen Druck als Master für Webkanal verwenden aktiviert haben, werden Inhalt und Bindungen für den Webkanal automatisch aus dem Druckkanal generiert.

    Der Inhalt des Druckkanals wird unterhalb des Inhalts der Web-Kanalvorlage eingefügt. Um den anhand des Druckkanals automatisch generierten Web-Kanalinhalt zu ändern, können Sie die Vererbung für jeden beliebigen Zielbereich abbrechen.

    Bewegen Sie den Mauszeiger über den entsprechenden Zielbereich im Web-Kanal, wählen Sie cancelinheritance (Vererbung abbrechen) und dann im Dialogfeld Vererbung abbrechen die Option Ja aus.

    Vererbung abbrechen

    Wenn Sie die Vererbung einer Komponente abgebrochen haben, können Sie sie erneut aktivieren. Um die Vererbung erneut zu aktivieren, bewegen Sie den Mauszeiger über die Grenze des entsprechenden Zielbereichs, der die Komponente enthält, und wählen Sie reenableinheritance aus.

  9. Wählen Sie im linken Bereich die Registerkarte Inhalt aus.

  10. Ziehen Sie den automatisch generierten Web-Kanalinhalt mithilfe der Inhaltsstruktur in die vorhandenen Bedienfelder der Web-Vorlage. Nachfolgend sehen Sie die Liste der Komponenten, die neu angeordnet werden müssen:

    • Komponente „Rechnungsdetails“ zum Bedienfeld „Rechnungsdetails“
    • Komponente „Kundendetails“ zum Bedienfeld „Kundendetails“
    • Komponente „Rechnungsübersicht“ zum Bedienfeld „Rechnungsübersicht“
    • Komponente „Zusammenfassung der Gebühren“ zum Bedienfeld „Zusammenfassung der Gebühren“
    • Layout-Fragment (Tabelle) zum Bedienfeld „Einzeln aufgeführte Anrufe“

    Webinhaltsstruktur

  11. Wiederholen Sie die Schritte 13 - 18 von Interaktive Kommunikation für Webkanal erstellen, um die Hyperlinks Jetzt bezahlen und Abonnieren in den Webkanal der interaktiven Kommunikation einzufügen.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2