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, Vorlagen und Designs 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 "Als Master drucken"für den Webkanal stellt sicher, dass der Inhalt, die Vererbung und die Datenbindung des Webkanals vom Druckkanal abgeleitet werden. Außerdem wird sichergestellt, dass die im Druckkanal vorgenommenen Änderungen im Webkanal synchronisiert werden. Die Autoren der interaktiven Kommunikation dürfen jedoch die Vererbung für bestimmte Komponenten im Webkanal unterbrechen.

Dieses Tutorial führt Sie durch die Schritte zum Erstellen interaktiver Kommunikation für Druck- und Webkanä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 interaktiver Kommunikation für Druck und Web 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

Im Folgenden finden Sie eine Liste der Ressourcen, die bereits in diesem Tutorial 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. Auswählen Erstellen und wählen Interaktive Kommunikation. Der Assistent Erstellen einer interaktiven Kommunikation wird angezeigt.

  3. Geben Sie create_first_ic im Feld Titel und im Feld Name an. Auswählen FDM_Create_First_IC als Formulardatenmodell und wählen Sie Nächste.

  4. Im Assistenten Kanäle:

    1. Angeben create_first_ic_print_template als Druckvorlage verwenden und wählen Sie Auswählen. Stellen Sie sicher, dass das Kontrollkästchen Druck als Master für Webkanal verwenden nicht aktiviert ist.

    2. Angeben Create_First_IC_templates Ordner > Create_First_IC_Web_Template als Webvorlage zu verwenden und wählen Sie Auswählen.

    3. Wählen Sie Erstellen aus.

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

  5. Auswählen Bearbeiten , 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 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 Rechnungsdetails
    customer_details_first_ic Kundendetails
    bill_summary_first_ic Rechnungsübersicht
    summary_charges_first_interactive_communication Gebühren

    Dokumentfragmente für interaktive Kommunikation

  8. Auswählen Diagramme Zielbereich und wählen Sie + , um Diagramm -Komponente.

  9. Wählen Sie die Diagrammkomponente aus und wählen Sie configure_icon (Konfigurieren). 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 Auswählen done_icon .
    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. Auswählen done_icon .
    6. Auswählen 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 im Datum und wählen Sie configure_icon (Konfigurieren).

  12. Wählen Sie Datenmodellobjekt aus der Dropdown-Liste Bindungstyp und wählen Sie calls > calldate. Auswählen done_icon zweimal speichern, um die Eigenschaften zu speichern.

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

  13. Auswählen PayNow Zielbereich und wählen Sie + , um Bild -Komponente.

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

    1. Angeben PayNow als Name des Bildes im Name -Feld.
    2. Auswählen Hochladen, wählen Sie das im lokalen Dateisystem gespeicherte Bild aus und wählen Sie Öffnen.
    3. Auswählen done_icon , um die Bildeigenschaften zu speichern.
  15. Um das Bild ValueAddedServices dem Zielbereich ValueAddedServices hinzuzufügen, wiederholen Sie die Schritte 13 und 14.

Erstellen interaktiver Kommunikation für den Webkanal create-interactive-communication-for-web-channel

Im Folgenden finden Sie eine Liste der Ressourcen, die bereits in diesem Tutorial erstellt wurden und beim Erstellen der interaktiven Kommunikation für den Webkanal 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. Auswählen Erstellen und wählen Interaktive Kommunikation. Der Assistent Erstellen einer interaktiven Kommunikation wird angezeigt.

  3. Geben Sie create_first_ic im Feld Titel und im Feld Name an. Auswählen FDM_Create_First_IC als Formulardatenmodell und wählen Sie Nächste.

  4. Im Assistenten Kanäle:

    1. Angeben create_first_ic_print_template als Druckvorlage verwenden und wählen Sie Auswählen. Stellen Sie sicher, dass das Kontrollkästchen Druck als Master für Webkanal verwenden nicht aktiviert ist.

    2. Angeben Create_First_IC_templates Ordner > Create_First_IC_Web_Template als Webvorlage zu verwenden und wählen Sie Auswählen.

    3. Wählen Sie Erstellen aus.

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

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

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

  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 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 Rechnungsdetails
    customer_details_first_ic Kundendetails
    bill_summary_first_ic Rechnungsübersicht
    summary_charges_first_interactive_communication Gebühren
  9. Auswählen Zusammenfassung der Gebühren Zielbereich und wählen Sie + , um Diagramm -Komponente.

  10. Wählen Sie die Diagrammkomponente aus und wählen Sie configure_icon (Konfigurieren). 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 Auswählen done_icon .

    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. Auswählen done_icon .

    6. Auswählen 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 Calldate Tabellenspaltenüberschrift und Auswahl edit (Bearbeiten), um den Text in Anrufdatum. Benennen Sie auf ähnliche Weise andere Spaltenüberschriften in der Tabelle um.

  14. Fügen Sie je nach Anwendungsfall eine Jetzt bezahlen in der interaktiven Kommunikation, die dem Benutzer die Möglichkeit bietet, die Zahlung durch Klicken auf die Schaltfläche vorzunehmen. Führen Sie die folgenden Schritte aus, um die Schaltfläche einzufügen:

    1. Auswählen Jetzt bezahlen Zielbereich und wählen Sie + , um Text -Komponente.

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

    3. Benennen Sie den Text in Jetzt bezahlen.

    4. Wählen Sie den Text aus und klicken Sie auf das Symbol Hyperlink .

    5. Geben Sie die Zahlungs-URL im Pfad -Feld.

    6. Auswählen Neue Registerkarte von Target Dropdown-Liste.

    7. Auswählen done_icon , um die Eigenschaften des Hyperlinks 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 aus und wählen Sie edit (Bearbeiten).

    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 Rot als Hintergrundfarbe für die Schaltfläche aus dem Hintergrund Abschnitt.

    4. Im Marge -Feld für Dimensionen und Position auswählen, wählen Sie die Gleichzeitig bearbeiten und legen Sie die Right margin as 450 px. Die Felder Oben, Unten und Links werden leer gelassen.

    Einfügen eines Hyperlinks in interaktive Kommunikation

  17. Auswählen Jetzt bezahlen Zielbereich und wählen Sie + , um Bild -Komponente.

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

    1. Angeben PayNow als Name des Bildes im Name -Feld.

    2. Auswählen Hochladen, wählen Sie die PayNowWeb Bild, das im lokalen Dateisystem gespeichert ist, und wählen Sie Öffnen.

    3. Auswählen done_icon , 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 mit automatischer Synchronisierung create-interactive-communications-for-print-and-web-with-auto-synchronization

Sie können auch eine interaktive Kommunikation erstellen, indem Sie die automatische Synchronisierung zwischen Druck- und Webkanälen aktivieren. Um die automatische Synchronisierung zu aktivieren, wählen Sie beim Erstellen der interaktiven Kommunikation die Option Als Master drucken aus. Durch Auswahl der Option Als Master drucken wird sichergestellt, dass der Inhalt, die Vererbung und die Datenbindung des Webkanals vom Druckkanal abgeleitet werden. Außerdem wird sichergestellt, dass die im Druckkanal vorgenommenen Änderungen im Webkanal übernommen werden.

Führen Sie die folgenden Schritte aus, um den Webkanalinhalt 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. Auswählen Erstellen und wählen Interaktive Kommunikation. Der Assistent Erstellen einer interaktiven Kommunikation wird angezeigt.

  3. Geben Sie create_first_ic im Feld Titel und im Feld Name an. Auswählen FDM_Create_First_IC als Formulardatenmodell und wählen Sie Nächste.

  4. Im Assistenten Kanäle:

    1. Angeben create_first_ic_print_template als Druckvorlage verwenden und wählen Sie Auswählen.

    2. Aktivieren Sie das Kontrollkästchen Druck als Master für Webkanal verwenden.

    3. Angeben Create_First_IC_templates Ordner > Create_First_IC_Web_Template als Webvorlage zu verwenden und wählen Sie Auswählen.

    4. Wählen Sie Erstellen aus.

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

  5. Auswählen Bearbeiten , 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 die Kanäle Registerkarte im linken Bereich aus und wählen Sie Web , um automatisch Inhalte für den Webkanal über den Druckkanal 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 unter dem Inhalt der Webkanal-Vorlage eingefügt. Um den Webkanalinhalt zu ändern, der automatisch vom Druckkanal generiert wurde, können Sie die Vererbung für einen beliebigen Zielbereich abbrechen.

    Bewegen Sie den Mauszeiger über den relevanten Zielbereich im Webkanal und wählen Sie abgebrochene Vererbung (Vererbung abbrechen) und dann im Vererbung abbrechen Dialogfeld auswählen Ja.

    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 relevanten Zielbereichs, der die Komponente enthält, und wählen Sie reaktivierte Vererbung .

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

  10. Ziehen Sie den automatisch generierten Webkanalinhalt per Drag-and-Drop in die vorhandenen Bedienfelder in der Webvorlage unter Verwendung der Inhaltsstruktur. Im Folgenden finden Sie eine Liste der Komponenten, die neu angeordnet werden müssen:

    • Komponente "Rechnungsdetails"im Bedienfeld "Rechnungsdetails"
    • Komponente "Kundendetails"im Bereich "Kundendetails"
    • Komponente "Rechnungszusammenfassung"im Bedienfeld "Rechnungszusammenfassung"
    • Komponente "Zusammenfassung der Gebühren"im Bedienfeld "Zusammenfassung der Gebühren"
    • Layout-Fragment (Tabelle) in das Bedienfeld "Auflistungen"

    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