Create an Interactive Communication create-an-interactive-communication

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

Select Create and select Interactive Communication. Create Interactive Communication page appears.

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.

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

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.

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

• 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 select 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.
  If you select the Use Print As Master for Web Channel option, you can select any of the following modes to generate Web channel:

  • Auto layout: Select this mode to automatically generate placeholders, content, and data binding for Web channel from Print channel.
  • Manually organize: Select this mode to manually select and add Print channel elements to the Web channel using the master content available in the Data Sources tab. For more information, see Select Print channel elements to create Web channel content.

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

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

The Interactive Communication authoring interface is launched when you Select Edit as mentioned in Create Interactive Communication. Alternatively, you can navigate to an existing Interactive Communication asset on AEM, select it, and select 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.

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

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

You can also use the undo and redo operations while authoring an Interactive Communication for both Print and Web channels.

Use the undo operation to discard the last performed action and the redo operation to incorporate the discarded action again. For example, if you have inserted an image or created a data binding in an Interactive Communication and need to discard it, use the undo operation.

The undo and redo options are displayed on the authoring UI page toolbar. The undo option is displayed only after performing an action. The redo option is displayed on the page toolbar only after performing an undo operation. These actions are reset on refreshing the page.

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.

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.

To set up binding of variables, select 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.
• Default Value: You can define a default value for the variable using this field. The value is displayed when you preview the Interactive Communication or in the Agent UI.
• Display Pattern: You can also define a display format for a variable. Select any of the pre-defined options from the Type drop-down list to apply a display format to a variable. Select Custom to define a display pattern that is not available in the list. For more information, see Data display patterns.

Navigate to Variables and Data Model Objects to set up binding of hidden variables in the document fragment.

You can also drag-and-drop data source elements or text document fragments to set up binding of variables. To create a binding with any of the data source elements, select the Data Sources tab and drag-and-drop the element to the variable name. The data source element and variable must be of the same type to set up the binding successfully. If you drag-and drop a data source element to an already bound variable, the new element replaces the previous one to create a binding with the variable. Similarly, select the Assets tab and drag-and-drop the text document fragment to variable name to set up the binding between them. The text document fragment must not contain any variables.

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.

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

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. Cancel inheritance for the target areas and variables that have been generated using the print channel to be able to customize content.

Select the document fragment, select (Configure), and then select Properties from the sidekick of the Interactive Communication. The Variables and Data Model Objects section lists the variables, including the hidden variables, and data model objects used in the document fragments. Use the (Edit) icon next to each data model object or variable to edit the properties. In addition, for document fragments that have been auto-generated in Web channel using Print channel, use the (Cancel Inheritance) icon next to each data model object and variable to cancel inheritance and to be able to edit them.

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

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.

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

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

In the Print channel, highlight the Document Container and select Properties.

The Properties panel appears in the Sidebar.

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: Select 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.

Select Done.

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.

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 whose content is rendered in the field. Alternatively, drag-and-drop the text document fragment to field name to set up the binding between them. The text document fragment must not contain any variables.
  • Data model object: Select a form data model property whose value is populated in the field. Alternatively, select the Data Sources tab and drag-and-drop the property to 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.

• Display Pattern: You can also define a display format for a field. Select any of the pre-defined options from the Type drop-down list to apply a display format to a field. Select Custom to define a display pattern that is not available in the list. For more information, see Data display patterns

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

Select .

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

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.

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. Select 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 property’s value is populated in the field. Alternatively, select the Data Sources tab and drag-and-drop the property to 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 prepopulated in the field.

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

3. Select .

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

Select the table and select (Configure). You can also select the table using the Content browser in the sidekick of the Interactive Communication.

Select Enable Sorting.

Select to save the table properties. The sorting icons, up and down arrows, in columns headers represent that the sorting has been enabled.

Switch to the Preview mode to view the output. The table is automatically sorted based on the first column of the table.

Click the column header to sort the values based on the column.

A column header with an up arrow represents that the:

• table is sorted based on that column.
• values in the column are displayed in the ascending order.

Similarly, a column header with a down arrow represents that the values in the column are displayed in the descending order.

On the Properties page, select the Channels tab.

Select the Web checkbox and select a template for the Web channel.

Select Use Print as Master for Web Channel to enable synchronization between the Web channel and the Print channel.

Select Save & Close to save the changes.

Similarly, you can select the Web checkbox on the Channels tab to delete the Web channel from the Interactive Communication.

Select the root panel in the Web template and select + to add the Button component to the Interactive Communication.

Select the button component and select to define rules on the select of the button.

In the When section, select clicked from the state of the button drop-down list.

In the Then section:

1. Select an action from the drop-down list. For example, select Navigate to as the action type.

2. Specify the URL of the Interactive Communication, adaptive form, an asset, or a web page. For example, specify the URL in the following format to navigate to another Interactive Communication: https://<server-name>:<port>/editor.html/content/forms/af/<Interactive Communication name>/channels/<channel name - print or web>.html

3. Specify the option to open the asset in same tab, new tab, or new window.

4. Select Done and then select Close to save the rule.

Similarly, you can select other available options from the action type drop-down list, such as Invoke Service and Submit Form. For more information, see rule editor.

Preview the Interactive Communication and select the button to view the Interactive Communication, adaptive form, an asset, or a web page specified in step 4(b).

Insert the Panel component in the web channel using any of the following options:

• Select a component, select + and select the Panel component.

• From the Component browser panel, drag-drop the Panel component on the Interactive Communication.

• Select the Panel in the Content browser panel and select Add Child Panel. Selecting the Add Child Panel option displays the Add Child Panel dialog box. Enter the title and an optional description and name for the Panel component.

Select the panel from the Content browser to perform additional actions on the Panel such as configure, edit rules, copy, delete, and insert component.

You can also drag-and-drop a panel within the Content browser to reflect the change in the structure of the Interactive Communication in the right pane.

To synchronize the Web channel with the Print channel, switch to the Web channel and select the More options icon.

Select one of the following:

• Sync with Print: Syncs content only for the target areas in which inheritance is not cancelled.
• Reset: Syncs the Web channel content with the Print channel and discards all the changes made to the Web channel.

Select a component and select the Group ( ) operation.

Select multiple components and select Group objects in Panel.

In the Group Objects in Panel dialog box, enter a name for the Panel.

Enter an optional title and description for the Panel.

Click .

The grouped components display as child elements of the Panel in the content tree.