Tutorial: Create Interactive Communication tutorial-create-interactive-communication

09-style-your-adaptive-form-small

This tutorial is a step in the Create your first Interactive Communication series. It is recommended to follow the series in chronological sequence to understand, perform, and demonstrate the complete tutorial use case.

Once you have created all the building blocks such as form data model, document fragments, templates, and themes for the web version, you can start creating an Interactive Communication.

Interactive Communications can be delivered through two channels: Print and Web. You can also create an Interactive Communication with Print channel as the master. Print as master option for Web channel ensures the content, inheritance, and data binding of the Web channel is derived from the Print channel. It also ensures that the changes made in the Print channel are synchronized in the Web channel. The Interactive Communication authors are, however, allowed to break the inheritance for specific components in the Web channel.

This tutorial walks you through the steps to create interactive communications for Print and Web channels. At the end of this tutorial, you will be able to:

  • Create Interactive Communication for the Print channel
  • Create Interactive Communication for the Web channel
  • Create Print and Web Interactive Communications with Print as Master

Create Interactive Communications for Print and Web with no synchronization create-interactive-communications-for-print-and-web-with-no-synchronization

Create Interactive Communication for Print channel create-interactive-communication-for-print-channel

The following is the list of resources that have already been created in this tutorial and are needed while creating the Interactive Communication for the Print channel:

Print template: create_first_ic_print_template

Form Data Model: FDM_Create_First_IC

Document Fragments: bill_details_first_ic, customer_details_first_ic, bill_summary_first_ic, summary_charges_first_ic

Layout Fragments: table_lf

Images: PayNow and ValueAddedServices

  1. Log in to the AEM author instance and navigate to Adobe Experience Manager > Forms > Forms & Documents.

  2. Select Create and select Interactive Communication. The Create Interactive Communication wizard is displayed.

  3. Specify create_first_ic in the Title and the Name field. Select FDM_Create_First_IC as the Form Data Model and select Next.

  4. In the Channels wizard:

    1. Specify create_first_ic_print_template as the Print template and select 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 select Select.

    3. Select Create.

    A confirmation message is displayed that the Interactive Communication has been created successfully.

  5. Select Edit to open the Interactive Communication in the right pane.

  6. Go to the Assets tab and apply the filter to display only the document fragments in the left pane.

  7. Drag-and drop the following document fragments to their target areas in the Interactive Communication:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2
    Document Fragment Target Area
    bill_details_first_ic BillDetails
    customer_details_first_ic CustomerDetails
    bill_summary_first_ic BillSummary
    summary_charges_first_interactive_communication Charges

    Document fragments for Interactive Communications

  8. Select Charts target area, and select + to add a Chart component.

  9. Select the Chart component and select configure_icon (Configure). The chart properties display in the left pane:

    1. Specify a name for the chart.
    2. Select Pie from the Chart Type drop-down list.
    3. Select the calltype property from the calls data model object type in the X-axis section. Select done_icon .
    4. Select Frequency from the Function drop-down list.
    5. Select the calltype property from the calls data model object type in the Y-axis section. Select done_icon .
    6. Select done_icon 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. Drag-and-drop the table_lf layout fragment to the Itemised Calls target area.

  11. Select the Text Field in the Date column and select configure_icon (Configure).

  12. Select Data Model Object from the Binding Type drop-down list and select calls > calldate. Select done_icon twice to save the properties.

    Similarly, create binding with calltime, callnumber, callduration, and callcharges for text fields in the Time, Number, Duration, and Charges columns respectively.

  13. Select PayNow target area, and select + to add an Image component.

  14. Select the Image component and select configure_icon (Configure). The image properties display in the left pane:

    1. Specify PayNow as the name of the image in the Name field.
    2. Select Upload, select the image saved on the local file system, and select Open.
    3. Select done_icon to save the image properties.
  15. Repeat steps 13 and 14 to add ValueAddedServices image to the ValueAddedServices target area.

Create Interactive Communication for Web channel create-interactive-communication-for-web-channel

The following is the list of resources that have already been created in this tutorial and are needed while creating the Interactive Communication for the Web channel:

Web template: Create_First_IC_Web_Template

Form Data Model: FDM_Create_First_IC

Document Fragments: bill_details_first_ic, customer_details_first_ic, bill_summary_first_ic, summary_charges_first_ic

Images: PayNowWeb and ValueAddedServicesWeb

  1. Log in to the AEM author instance and navigate to Adobe Experience Manager > Forms > Forms & Documents.

  2. Select Create and select Interactive Communication. The Create Interactive Communication wizard is displayed.

  3. Specify create_first_ic in the Title and the Name field. Select FDM_Create_First_IC as the Form Data Model and select Next.

  4. In the Channels wizard:

    1. Specify create_first_ic_print_template as the Print template and select 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 select Select.

    3. Select Create.

    A confirmation message is displayed that the Interactive Communication has been created successfully.

  5. Select Edit to open the Interactive Communication in the right pane.

  6. Select the Channels tab from the left pane and select Web.

  7. Go to the Assets tab and apply the filter to display only the document fragments in the left pane.

  8. Drag-and drop the following document fragments to their target areas in the Interactive Communication:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2
    Document Fragment Target Area
    bill_details_first_ic BillDetails
    customer_details_first_ic CustomerDetails
    bill_summary_first_ic BillSummary
    summary_charges_first_interactive_communication Charges
  9. Select Summary of Charges target area, and select + to add a Chart component.

  10. Select the Chart component and select configure_icon (Configure). The chart properties display in the left pane:

    1. Specify a name for the chart.

    2. Select Pie from the Chart Type drop-down list.

    3. Select the calltype property from the calls data model object type in the X-axis section. Select done_icon .

    4. Select Frequency from the Function drop-down list.

    5. Select the calltype property from the calls data model object type in the Y-axis section. Select done_icon .

    6. Select done_icon to save the chart properties.

  11. Select the Data Sources tab from the left pane and drag-and-drop the calls data model object to the Itemised Calls target area. All properties in the calls data model object are displayed as table columns in the Itemised Calls target area in the right pane.

    Based on the use case, you require Call Date, Call Time, Call Number, Call Duration, and Call Charges columns in the table.

    Table for Interactive Communication

  12. Select Mobilenum table column heading and select More options > Delete column. Similarly, delete the Calltype column.

  13. Select the Calldate table column heading and select edit (Edit) to rename the text to Call Date. Similarly, rename other column headings in the table.

  14. Based on the use case, insert a Pay Now button in the Interactive Communication that provides the user an option to make the payment by clicking the button. Execute the following steps to insert the button:

    1. Select Pay Now target area, and select + to add a Text component.

    2. Select the text component and select edit (Edit).

    3. Rename the text to Pay Now.

    4. Select the text and select the Hyperlink icon.

    5. Specify the payment URL in the Path field.

    6. Select New Tab from Target drop-down list.

    7. Select done_icon to save the hyperlink properties.

  15. Select Style from the drop-down list next to the Preview option.

    Select Style mode for Interactive Communication

  16. Style the hyperlink text to display it as a button in the Interactive Communication using the following steps:

    1. Select the text component and select edit (Edit).

    2. In the Border section, specify 1.5px as Border Width, select Solid as Border Style, and specify 46px as Border Radius.

    3. Select Red as the background color for the button from the Background section.

    4. In the Margin field for Dimensions & Position section, select the Edit simultaneously icon, and set the Right margin as 450px. The Top, Bottom, and Left fields are set as blank.

    Insert hyperlink in Interactive Communication

  17. Select Pay Now target area, and select + to add an Image component.

  18. Select the Image component and select configure_icon (Configure). The image properties display in the left pane:

    1. Specify PayNow as the name of the image in the Name field.

    2. Select Upload, select the PayNowWeb image saved on the local file system, and select Open.

    3. Select done_icon 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.

Create Interactive Communications for Print and Web with auto synchronization create-interactive-communications-for-print-and-web-with-auto-synchronization

You can also create an Interactive Communication by enabling auto synchronization between Print and Web channels. To enable auto synchronization, select the Print as master option while creating the Interactive Communication. Selecting the Print as master option ensures the content, inheritance, and data binding of the Web channel is derived from the Print channel. It also ensures that the changes made in the Print channel are reflected in the Web channel.

Execute the following steps to derive the Web channel content using Print channel:

  1. Log in to the AEM author instance and navigate to Adobe Experience Manager > Forms > Forms & Documents.

  2. Select Create and select Interactive Communication. The Create Interactive Communication wizard is displayed.

  3. Specify create_first_ic in the Title and the Name field. Select FDM_Create_First_IC as the Form Data Model and select Next.

  4. In the Channels wizard:

    1. Specify create_first_ic_print_template as the Print template and select 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 select Select.

    4. Select Create.

    A confirmation message is displayed that the Interactive Communication has been created successfully.

  5. Select Edit to open the Interactive Communication in the right pane.

  6. Execute steps 6 - 15 of Create Interactive Communication for Print channel section.

  7. Select the Channels tab from the left pane and select Web to auto-generate content for the Web channel from the Print channel.

  8. 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.

    The print channel content is inserted below the Web channel template content. To modify the Web channel content that has been auto-generated from the Print channel, you can cancel the inheritance for any target area.

    Hover over the relevant target area in the web channel and select cancelinheritance (Cancel Inheritance) and then in the Cancel Inheritance dialog, select Yes.

    Cancel inheritance

    If you have canceled inheritance of a component, you can re-enable it. To re-enable inheritance, hover over the boundary of the relevant target area, which includes the component, and select reenableinheritance .

  9. Select the Content tab in the left pane.

  10. Drag-and-drop the auto-generated Web channel content to the existing panels in the Web template using the content tree. The following is the list of components that need to be rearranged:

    • Bill Details component to Bill Details panel
    • Customer Details component to Customer Details panel
    • Bill Summary component to Bill Summary panel
    • Summary of Charges component to Summary of Charges panel
    • Layout fragment (table) to the Itemised Calls panel

    Web content tree

  11. Repeat steps 13 - 18 of Create Interactive Communication for Web channel to insert the Pay Now and Subscribe hyperlinks in the Web channel of the Interactive Communication.

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