Show Menu
THEMEN×

Tutorial: Erstellen einer interaktiven Kommunikation

Erstellen Sie eine interaktive Kommunikation mit allen Bausteinen
This tutorial is a step in the Create your first Interactive Communication series. Es wird empfohlen, der Serie in chronologischer Reihenfolge zu folgen, um den vollständigen Anwendungsfall zu verstehen, auszufü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.
Interaktive Kommunikation kann über zwei Kanäle erfolgen: Druck und Web. Sie können auch eine interaktive Kommunikation mit dem Druckkanal als Master erstellen. Druck als Master-Option für Webkanal stellt sicher, dass Inhalt, Vererbung und 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 ggf. die Vererbung für bestimmte Komponenten im Webkanal aufheben.
In diesem Tutorial werden Sie durch die Schritte zum Erstellen interaktiver Kommunikationen für Druck- und Webkanäle geführt. Am Ende dieser Schulung können Sie Folgendes:
  • Erstellen Sie interaktive Kommunikation für den Druckkanal
  • Erstellen Sie interaktive Kommunikation für den Webkanal
  • Erstellen Sie interaktive Kommunikation für den Druck- und Webkanal mit Druck als Master

Erstellen Sie interaktive Kommunikation für Druck und Web ohne Synchronisierung

Erstellen einer interaktiven Kommunikation für Druckkanal

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:
Formulardatenmodell: FDM_Create_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. Tap Create and select Interactive Communication . The Create Interactive Communication wizard is displayed.
  3. Geben Sie create_first_ic im Feld Titel und im Feld Name an. Select FDM_Create_First_IC as the Form Data Model and tap Next .
  4. In the Channels wizard:
    1. Specify create_first_ic_print_template as the Print template and tap Select . Ensure that the Use Print as Master for Web Channel checkbox is not selected.
    2. Specify Create_First_IC_templates folder > Create_First_IC_Web_Template as the Web template and tap Select .
    3. Tippen Sie auf Erstellen .
    Eine Bestätigungsmeldung wird angezeigt, dass die interaktive Kommunikation erfolgreich erstellt wurde.
  5. Tippen Sie auf Bearbeiten , um die interaktive Kommunikation im rechten Bereich zu öffnen.
  6. Go to the Assets tab and apply the filter to display only the document fragments in the left pane.
  7. Ziehen Sie die folgenden Dokumentfragmente per Drag & Drop in ihre Zielbereiche in der interaktiven Kommunikation:
    Dokumentfragment
    Zielbereich
    bill_details_first_ic
    BillDetails
    customer_details_first_ic
    CustomerDetails
    bill_summary_first_ic
    BillSummary
    summary_charges_first_interactive_communication
    Gebühren
  8. Tippen Sie auf den Zielbereich Diagramme und anschließend auf + , um eine Komponente Diagramm hinzuzufügen.
  9. Tap the Chart component and select (Configure). 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 Tippen Sie auf .
    4. Wählen Sie Frequenz aus der Dropdown-Liste Funktion .
    5. Select the calltype property from the calls data model object type in the Y-axis section. Tippen Sie auf .
    6. Tap to save the chart properties.
  10. Go to the Assets tab and apply the filter to display only the layout fragments in the left pane. Ziehen Sie das Layout table_lf per Drag-and-Drop in den Zielbereich Einzeln aufgeführte Anrufe .
  11. Select the Text Field in the Date column and tap (Configure).
  12. Wählen Sie Datenmodellobjekt aus der Dropdown-Liste Bindungstyp und wählen Sie calls > calldate . Tap twice to save the properties.
    Erstellen Sie eine Bindung mit calltime , callnumber , callduration und callcharges für Textfelder in den Spalten Zeit , Anzahl , Dauer und Kosten .
  13. Tap PayNow target area, and tap + to add an Image component.
  14. Tap the Image component and select (Configure). Die Bildeigenschaften werden im linken Bereich angezeigt:
    1. Geben Sie PayNow als Namen des Bildes im Feld Name ein.
    2. Tippen Sie auf Hochladen , wählen Sie das im lokalen Dateisystem gespeicherte Bild aus und tippen Sie auf Öffnen .
    3. Tap to save the image properties.
  15. Repeat steps 13 and 14 to add ValueAddedServices image to the ValueAddedServices target area.

Erstellen Sie interaktive Kommunikation für den Webkanal

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:
Formulardatenmodell: FDM_Create_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. Tap Create and select Interactive Communication . The Create Interactive Communication wizard is displayed.
  3. Geben Sie create_first_ic im Feld Titel und im Feld Name an. Select FDM_Create_First_IC as the Form Data Model and tap Next .
  4. In the Channels wizard:
    1. Specify create_first_ic_print_template as the Print template and tap Select . Ensure that the Use Print as Master for Web Channel checkbox is not selected.
    2. Specify Create_First_IC_templates folder > Create_First_IC_Web_Template as the Web template and tap Select .
    3. Tippen Sie auf Erstellen .
    Eine Bestätigungsmeldung wird angezeigt, dass die interaktive Kommunikation erfolgreich erstellt wurde.
  5. Tippen Sie auf Bearbeiten , um die interaktive Kommunikation im rechten Bereich zu öffnen.
  6. Tap the Channels tab from the left pane and tap Web .
  7. Go to the Assets tab and apply the filter to display only the document fragments in the left pane.
  8. Ziehen Sie die folgenden Dokumentfragmente per Drag & Drop in ihre Zielbereiche in der interaktiven Kommunikation:
    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. Tap Summary of Charges target area, and tap + to add a Chart component.
  10. Tap the Chart component and select (Configure). 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 Tippen Sie auf .
    4. Wählen Sie Frequenz aus der Dropdown-Liste Funktion .
    5. Select the calltype property from the calls data model object type in the Y-axis section. Tippen Sie auf .
    6. Tap to save the chart properties.
  11. Wählen Sie die Registerkarte Datenquellen aus dem linken Bereich und ziehen Sie das Datenmodellobjekt calls in den Zielbereich Einzeln aufgeführte Anrufe . All properties in the calls data model object are displayed as table columns in the Itemised Calls target area in the right pane.
    Basierend auf dem Anwendungsfall benötigen Sie die Spalten „Anrufdatum“, „Anrufzeit“, „Rufnummer“, „Anrufdauer“ und „Anrufkosten“ in der Tabelle.
  12. Select Mobilenum table column heading and select More options > Delete column . Löschen Sie auf ähnliche Weise die Spalte Anruftyp .
  13. Select the Calldate table column heading and tap (Edit) to rename the text to Call Date . Benennen Sie andere Spaltenüberschriften in der Tabelle um.
  14. Fügen Sie je nach Anwendungsfall die Schaltfläche Jetzt bezahlen in die interaktive Kommunikation ein, die dem Benutzer 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. Tap Pay Now target area, and tap + to add a Text component.
    2. Tap the text component and tap (Edit).
    3. Benennen Sie den Text in Jetzt bezahlen um.
    4. Wählen Sie den Text aus und tippen Sie auf das Hyperlink-Symbol.
    5. Geben Sie die Zahlungs-URL in das Feld Pfad ein.
    6. Wählen Sie Neue Registerkarte aus der Dropdown-Liste Ziel .
    7. Tap to save the hyperlink properties.
  15. Wählen Sie Style aus der Dropdown-Liste neben der Option Vorschau .
  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. Tap the text component and select (Edit).
    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 im Abschnitt Hintergrund .
    4. Im Feld Rand für Abmessungen und Position , tippen Sie auf das Symbol Gleichzeitig bearbeiten , und setzen Sie den rechten Rand auf 450px . Die Felder Oben, Unten und Links werden leer gelassen.
  17. Tap Pay Now target area, and tap + to add an Image component.
  18. Tap the Image component and select (Configure). Die Bildeigenschaften werden im linken Bereich angezeigt:
    1. Geben Sie PayNow als Namen des Bildes im Feld Name ein.
    2. Tap Upload , select the PayNowWeb image saved on the local file system, and tap Open .
    3. Tap to save the image properties.
  19. Based on the use case, insert a Subscribe button in the Interactive Communication that provides the user an option to subscribe to the value added services by clicking the button.
    Repeat steps 13 - 17 to add a Subscribe button to the Value Added Services target area and add the ValueAddedServicesWeb image.

Erstellen Sie interaktive Kommunikation für Druck und Web mit automatischer Synchronisierung

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“. Die Option „Druck als Master“ stellt sicher, dass Inhalt, Vererbung und Datenbindung des Webkanals vom Druckkanal abgeleitet werden. Außerdem wird sichergestellt, dass die im Druckkanal vorgenommenen Änderungen im Webkanal vorhanden sind.
Führen Sie die folgenden Schritte aus, um den Webkanal-Inhalt 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. Tap Create and select Interactive Communication . The Create Interactive Communication wizard is displayed.
  3. Geben Sie create_first_ic im Feld Titel und im Feld Name an. Select FDM_Create_First_IC as the Form Data Model and tap Next .
  4. In the Channels wizard:
    1. Specify create_first_ic_print_template as the Print template and tap Select .
    2. Select the Use Print as Master for Web Channel checkbox.
    3. Specify Create_First_IC_templates folder > Create_First_IC_Web_Template as the Web template and tap Select .
    4. Tippen Sie auf Erstellen .
    Eine Bestätigungsmeldung wird angezeigt, dass die interaktive Kommunikation erfolgreich erstellt wurde.
  5. Tippen Sie auf Bearbeiten , um die interaktive Kommunikation im rechten Bereich zu öffnen.
  6. Tippen Sie auf die Registerkarte Kanäle im linken Bereich und tippen Sie auf Web , um automatisch generieren Inhalte für den Webkanal aus dem Druckkanal zu generieren.
  7. As the Use Print as Master for Web Channel checkbox is selected in step 4, the content and bindings are auto-generated for Web channel from the Print channel.
    Der Druckkanalinhalt wird unter dem Inhalt der Webkanalvorlage eingefügt. Um den automatisch aus dem Druckkanal generierten Webkanalinhalt zu ändern, können Sie die Vererbung für einen beliebigen Zielbereich abbrechen.
    Hover over the relevant target area in the web channel and select (Cancel Inheritance) and then in the Cancel Inheritance dialog, tap Yes .
    Wenn Sie die Vererbung einer Komponente abgebrochen haben, können Sie sie erneut aktivieren. To re-enable inheritance, hover over the boundary of the relevant target area, which includes the component, and tap .
  8. Wählen Sie die Registerkarte Inhalt im linken Bereich.
  9. Ziehen Sie den automatisch generierten Webkanal-Inhalt mithilfe der Inhaltsstruktur in die vorhandenen Bereiche der Webvorlage. Im folgenden finden Sie die Liste der Komponenten, die neu angeordnet werden müssen:
    • Komponente „Rechnungsdetails“ im Bereich „Rechnungsdetails“
    • Komponente „Kundendetails“ im Bereich „Kundendetails“
    • Komponente „Rechnungszusammenfassung“ im Bereich „Rechnungszusammenfassung“
    • Komponente „Zusammenfassung der Gebühren“ im Bereich „Zusammenfassung der Gebühren“
    • Layoutfragment (Tabelle) für den Bereich „Einzeln aufgeführte Anrufe“
  10. 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.