Create an Interactive Communication

Create an Interactive Communication using the Interactive Communication editor. Use drag-and-drop functionality to build the Interactive Communication, and preview both print and web outputs on different device types.

Overview

Interactive Communications centralize and manages the creation, assembly, and delivery personalized, and interactive correspondences. Utilize print as master channel for web, you can minimize effort duplication in creating the web output of the Interactive Communication.

Prerequisites

The following are the prerequisites for creating an Interactive Communication:

• Set up a Form Data Model containing test data or with an actual data source, such as an instance of Microsoft® Dynamics.
• Ensure that you have the Document fragments.
• Ensure that you have Templates for print and web channel.
• Ensure that you have the required theme for the web channel.

Create Interactive Communication

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

2. Tap Create and select Interactive Communication. Create Interactive Communication page appears.

   

3. Enter the following information. :

   • Title: Enter the title of the Interactive Communication.
   • Name*: The name of the Interactive Communication is derived from the title you enter. Edit it, if necessary.
   • Description: Enter a description about the Interactive Communication.
   • Form Data Model*: Browse and select the form data model. For more information on Form Data Model, see AEM Forms Data Integration.
   • Prefill Service: Select the prefill service to retrieve the data and prefill the Interactive Communication.
   • Post Process Type: You can select AEM or Forms workflow to be triggered when the Interactive Communication is submitted. Select the type of the workflow to be triggered.
   • Post Process: Select the name of the workflow to be triggered. When you select AEM workflow, provide Attachment Path, Layout Path, PDF Path, Print Data Path, and Web Data Path.
   • Tags: Select the tags to apply to the Interactive Communication. You can also type in a new/custom tag name and press Enter to create it.
   • Author:The author name is automatically taken from the logged in user’s username.
   • Publish Date: Enter the date to publish the Interactive Communication.
   • Unpublish Date: Enter the date to unpublish the Interactive Communication.

4. Tap Next. The screen to specify print and web channel details appears.

5. Enter the following:

   • Print: Select this option to generate the print channel of the Interactive Communication.
   • Print Template:* Browse and select an XDP as the print template.
   • Use Print As Master For Web Channel: Select this option to create the web channel in sync with the print channel. Using print channel as master for web channel ensures the content and data binding of the web channel is derived from the print channel and the changes made in the print channel are reflected in the web channel when you tap Synchronize. The authors are, however, allowed to break the inheritance for specific components in the web channel, as required. For more information, see Synchronize Web channel with Print channel.
   • Web: Select this option to generate the web channel or the responsive output of Interactive Communication.
   • Interactive Communication Web Template:* Browse and select the web template.
   • Theme and Select Theme*: Browse and select the theme to style the web channel of the Interactive Communication. For more information, see Themes in AEM Forms.

   For more information on print channel and web channel, see Print channel and web channel.

6. Tap Create. The Interactive Communication is created and an alert box appears. Tap Edit to start building the contents of the Interactive Communication as explained in Add contents using Interactive Communication authoring user interface. Alternatively, you can tap Done and choose to edit the Interactive Communication later.

Add content to the Interactive Communication

After you have created an Interactive Communication, you can use the Interactive Communication authoring interface to construct its contents.

For more information on the Interactive Communication authoring interface, see Introduction to Interactive Communication authoring.

1. The Interactive Communication authoring interface is launched when you Tap Edit as mentioned in Create Interactive Communication. Alternatively, you can navigate to an existing Interactive Communication asset on AEM, select it, and tap Edit to launch the Interactive Communication authoring interface.

   By default, the print channel of the Interactive Communication appears, unless the Interactive Communication is web-channel-only. The Print channel of the Interactive Communication displays target areas, as available in the selected XDP/print channel template. In these target areas and fields, you can add components or assets.

2. With the Print channel selected, select the Components tab. The following components are available in the print channel:

   Component	Functionality
   Chart	Adds a chart that you can use in Interactive Communication for visual representation of two-dimensional data retrieved from an form data model collection. For more information, see Using charts in Interactive Communications.
   Document Fragment	Allows you to add a reusable component, such as text, list, or condition, to an Interactive Communication. The added component could be either form data model-based or without a form data model.
   Image	Allows you to insert an image.

   Drag-and-drop the components into your Interactive Communication and configure them as required.

3. With the print channel selected, go to the Assets tab and apply the filter to display only the assets you want to see.

   Using the Assets browser, you can also directly drag and drop assets into Interactive Communication target areas.

   

4. Drag-and-drop the document fragments into the Interactive Communication. Following are the types of document fragments that you can use in the print channel of the Interactive Communication.

Document Fragment Type	Example purpose
Text	Text for adding address, recipient's email, and body text of the letter
Condition	Condition to add the appropriate header image to the communication based on the type of the policy: Standard or Premium.
List	Group of document fragments, including text, conditions, other lists, and images.

For more information on document fragments, see Document Fragments.

1. To set up binding of variables, tap a variable and select (Configure) and then set up the binding properties in the Properties panel in the sidebar.

   • None: Agent will fill in the value for the variable.
   • Text Fragment: If selected, you can browse and select a text document fragment whose content is rendered in the field. Only those text document fragments can be bound to variables that have no variables within.
   • Data Model Object: Select a form data model property whose value is populated in the field.

   You can also choose to configure the relevant text document fragment. The Properties panel displays the list of variables in the text document fragment. You can tap (Edit) next to a variable name to display that variable’s settings for editing.

2. To add a table, with the print channel selected, in the Assets tab apply the filter to display only the Layout Fragments. Drag-and-drop the required layout fragment to the Interactive Communication. A layout fragment is based on an XDP and can be used to create graphical layouts or static and dynamic tables in Interactive Communication that get populated with dynamic data.

   Example: A layout table to display gross premium, loyalty discount %, and emergency roadside assistance availability for old and the new policies.

   For more information on layout fragments, see Document Fragments.

3. With the print channel selected, in the Assets tab apply the filter to display images. Drag-and-drop the required images to the Interactive Communication, such as for company logo.

   Further, manage the following in the Interactive Communication:

   • Adding and configuring charts

   • Sychronizing web channel with the print channel

     • Auto sync
     • Cancel inheritance
     • Re-enable inheritance
     • Synchronize

   • Attachments and library access

   • XDP/Layout field properties

   • Add rules to components

4. Switch to Web Channel. The web channel appears in the Interactive Communication editor. When you switch from the Print channel to the Web channel for the first time, the automatic synchornization takes place. For more information, see Synchronizing web channel from the print channel.

   Since we are using Print as master for the web in this example, the Print channel placeholders, content, and data binding get synced to the web channel. However, you can change and customize the specific content in the web channel as required.

   

5. To add additional components in the Web channel, with the Web channel selected, tap Components. Drag-and-drop components in the web channel of your Interactive Communication as required and proceed to configure them.

   Components	Functionality
   Chart	Adds a chart that you can use in Interactive Communication for visual representation of two-dimensional data retrieved from a form data model collection. For more information, see Using chart component.
   Document Fragment	Allows you to add a reusable component, text, list, or condition, to an Interactive Communication. The reusable component you add to an Interactive Communication could be either form data model-based or without a form data model.
   Image	Allows you to insert an image.
   Panel	The Panel component is a placeholder for grouping other components together and controls how a group of components, such as accordion and tabs, are laid out in the Interactive Communication. A panel component also allows you to make a group of components repeatable for the end user, such as in multiple entries required for filling in educational credentials.
   Table	Adds a table that lets you organize data in rows and columns.
   Target Area	Inserts a target area in a web channel to organize the web-channel-specific components. Target area is a plain container that allows you to group web-channel specific components.
   Text	Adds rich text to the web channel of an Interactive Communication. Text can also make use of form data model objects to make the content dynamic.

6. As required, insert assets in your web channel.

   You can preview your Interactive Communication to see what the print and web outputs of the Interactive Communication look like and continue making changes, as required.

Preview the Interactive Communication

You can use the Preview option to evaluate appearance of the Interactive Communication. The web channel of Interactive Communication also provides an option to Emulate experience of an Interactive Communication for various devices. For example, iPhone, iPad, and Desktop. You can use both Preview and Emulator options in conjunction with each other to preview the web outputs for devices of different screen sizes. The sample data in the preview is populated from the specified forms data model.

1. Select the (print or web) channel to preview and tap preview. The Interactive Communication appears.

   NOTE

   The preview is populated with the specified form data model’s sample data. For more information on previewing the Interactive Communication with some other data or using the prefill service, see Use form data model and Work with form data model.

2. For the web channel, use to view how the Interactive Communication looks on various devices.

   

Further, you can Prepare and send Interactive Communication using the Agent UI.

Configuring properties in Interactive Communication

Attachments and library access

In the Print channel, you can configure the attachments and library access to allow the Agent manage attachments in the Agent UI for the Interactive Communication:

1. In the Print channel, highlight the Document Container and tap Properties.

   

   The Properties panel appears in the Sidebar.

   

2. Expand Attachments and specify the following properties:

   • Allow Library Access: Select to enable library access for the agent in the Agent UI. If enabled, the Agent can add files from the library while preparing the Interactive Communication.

   • Allow Re-Ordering Of Attachments: Select to enable the Agent to re-order the attachments with the Interactive Communication.

   • Max Number Of Attachments Allowed: Specify the maximum number of attachments allowed with the Interactive Communication.

   • Files To Be Attached: Tap Add and browse to select files to be attached and specify the following:

     • Attach This File To Document By Default: You can change this option if only the attachment is not Mandatory.
     • Mandatory: Agent will not be able to remove the attachment in the Agent UI.

   

3. Tap Done.

XDP/Layout field properties

1. While editing the Print channel of an Interactive Communication, hover over a field, which is built in the Print channel template, and select (Configure).

   The Properties dialog appears in the sidebar.

   

2. Specify the following:

   • Name: JCR node name.

   • Title: Enter a title that will be visible to the Agent in the Agent UI and in the Document Container tree.

   • Binding Type: Select one of the following binding types for the field.

     • None: Agent will fill in the value for the property.
     • Text Fragment: If selected, you can browse and select a text document fragment whoses content is rendered in the field.
     • Data model object: Select a form data model property whose value is populated in the field.

   • Default Values: Default value ensures that the field is not empty when there is no value provided by the specified data model object or text fragment. If the data binding type is none, the default value is prepopulated in the field.

   • Editable By Agent: Select to allow the agent to edit the value in the field in the Agent UI. This setting is not applicable if Binding Type is Text Fragment.

   • Label: Specify a text string displayed with the field to the Agent in Agent UI. This setting is not applicable if Binding Type is Text Fragment.

   • Tooltip: Enter a text string that will be visible on mouse over to the Agent in Agent UI. This setting is not applicable if Binding Type is Text Fragment.

   • Required: Select to make the field mandatory for the Agent. This setting is not applicable if Binding Type is Text Fragment.

   • Allow multiple lines: Select this field to allow multiple lines of text as entry in the field. This setting is not applicable if Binding Type is Text Fragment.

3. Tap .

Apply rules to Interactive Communication components

To conditionalize components or content in the interactive communcation, tap the component/piece of content and select (Create Rule) to launch Rule Editor.

For more information, see:

• Rule Editor
• Introduction to Interactive Communication authoring

Using tables

Dynamic tables in Interactive Communication

You can add dynamic tables in Interactive Communication using layout fragments. The following steps use an example of a credit card statement to illustrate the use of a layout fragment for creating a dynamic table in an Interactive Communication.

1. Ensure that the required layout fragment for creating the table is available in AEM.

2. In the print channel of your Interactive Communication, drag and drop a layout fragment (with a multi-column table) in a Target Area from the Asset browser.

   

   A table appears in the Interactive Communication layout area.

   

3. Specify data binding for each of the cells of the table. To create a repeatable row, insert form data model properties in the row belonging to a common collection property.

   1. Tap a cell in the table and select (Configure).

      The Properties dialog appears in the sidebar.

      

   2. Configure the properties:

      • Name: JCR node name.

      • Title: Enter a title that will be visible in the Interactive Communication editor.

      • Binding Type*: Select one of the following binding types for the field.

        • None
        • Data model object: A form data model propert’s value is populated in the field.

      • Data Model Object: The form data model property whose value is populated in the field.

      • Default Value: Default value ensures that the field is not empty when there is no value provided by the specified data model object. The default value is pre-populated in the field.

      • Editable By Agent: Select to allow the agent to edit the value in the field in the Agent UI.

   3. Tap .

4. Preview the Interactive Communication to see the table rendered with the data.

   

Web-channel only tables

You can create a web-channel only dynamic table in an Interactive Communication using a data model property of type collection. Such a table is a representation of a collection property’s child properties. You can edit only the formatting properties of the various cells in the table.

1. Switch to the Web channel and then choose to display the Data Sources browser.

2. Drag and drop a collection property into a subform.

   A table gets created in the subform.

3. Preview the table in the web preview of the Interactive Communication.

Synchronizing web channel with print channel

When you select Print as Master for Web Channel while creating an Interactive Communication, the Web channel is created in sync with the Print channel and the content and data binding of the Web channel is derived from the print channel and the changes made in the print channel are reflected in the web channel when you tap Synchronize.

The authors are, however, allowed to break the inheritance for components in the web channel, as required.

Click to enlarge

Auto sync

If you are using Print channel as the master for the Web channel and you switch to the Web channel from the Print channel, automatic synchronization takes place. The automatic synchronization brings the placeholders, content, and data binding into the Web channel from the Print channel. Depending on the complexity and content of your Interactive Communication, automatic synchronization may take a little time.

Cancel inheritance

In the web channel, the components are embedded in the target areas.

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

The inheritance of the components within the target area gets canceled and now you can edit them as required.

Re-enable Inheritance

In the Web channel, if you have cancelled 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 tap .

The Revert Inheritance dialog appears.

If required, select Synchronize The Page After Reverting Inheritance. Select this option to synchronize the entire interactive communication. If you do not select this option only the relevant target area gets synchronized on reinstating the inheritance.

Tap Yes.

Synchronize

If you are using Print as Master for Web Channel and make changes to the print channel, you can tap Synchronize to bring the newly made changes to the web channel.

1. To synchronize the Web channel with the Print channel, tap Synchronize.

   Synchronize Content From Master Channel dialog appears.

   

2. Tap one of the following:

   • Discard Changes: Discards all the changes made to the Web channel regardless of the changes made in the web channel.
   • Keep Changes: Syncs content only for the target areas in which inheritance is not cancelled.