教程：创建交互通信

使用所有构件块创建交互式通信

本教程是创建您的第一个交互式通信系列中的一个步骤。 建议按照时间顺序按照系列来了解、执行和演示完整的教程用例。

为Web版本创建了表单数据模型、文档片段、模板和主题等所有构建基块后，您就可以开始创建交互式通信。

交互式通信可通过两种渠道提供：印刷和Web。 您还可以创建交互式通信，将打印渠道作为主控。 Web渠道的打印为主控选项可确保Web渠道的内容、继承和数据绑定是从打印渠道派生的。 它还确保在打印渠道中所做的更改在Web渠道中同步。 但是，允许交互通信作者在Web渠道中中断特定组件的继承。

本教程将指导您逐步为印刷和Web渠道创建交互式通信。 在本教程的结尾，您将能够：

• 为打印渠道创建交互式通信
• 为Web渠道创建交互式通信
• 创建印刷和Web交互式通信，将印刷作为主控

创建无同步的用于打印和Web的交互式通信

为打印渠道创建交互式通信

以下是本教程中已创建的资源列表，创建打印渠道时需要这些资源：

打印模板： create_first_ic_print_template

表单数据模型： FDM_Create_First_IC

文档片 段：bill_details_first_ic、customer_details_first_ic、bill_summary_first_ic、summary_charges_first_ic

布局片段： table_lf

图像： PayNow和ValueAddedServices

1. 登录到AEM作者实例，然后导航到​Adobe Experience Manager > Forms > Forms和文档。

2. 点按​创建​并选择​交互通信。 此时将显示​创建交互通信​向导。

3. 在​标题​和​名称​字段中指定​create_first_ic。 选择​FDM_Create_First_IC​作为表单数据模型，然后点按​Next。

4. 在​渠道​向导中：

   1. 指定​create_first_ic_print_template​作为打印模板，然后点按​选择。 确保未选中​“将打印作为主控用于Web渠道”复选框。
   2. 指定​Create_First_IC_templates​文件夹> Create_First_IC_Web_Template​作为Web模板，然后点按​选择。
   3. 点按​创建。

   将显示一条确认消息，提示已成功创建交互式通信。

5. 点按​编辑​以打开右窗格中的交互式通信。

6. 转到​资产​选项卡，应用筛选器以仅在左窗格中显示文档片段。

7. 将以下文档片段拖放到交互通信中的目标区域：

   文档片段	目标区域
   bill_details_first_ic	BillDetails
   customer_details_first_ic	客户详细信息
   bill_summary_first_ic	帐单摘要
   summary_charges_first_interactive_communication	费用

   

8. 点按​图表​目标区域，然后点按​+​以添加​图表​组件。

9. 点按图表组件并选择(Configure)。 图表属性显示在左窗格中：

   1. 指定图表的名称。
   2. 从​图表类型​下拉列表中选择​饼图。
   3. 从​X轴​部分的​调用​数据模型对象类型中选择​调用类型​属性。 点按。
   4. 从​函数​下拉列表中选择​频率。
   5. 从​Y轴​部分的​调用​数据模型对象类型中选择​调用类型​属性。 点按。
   6. 点按以保存图表属性。

10. 转到​资产​选项卡并应用筛选器以仅在左侧窗格中显示布局片段。 将​table_lf​布局片段拖放到​明细调用​目标区。

11. 选择​Date​列中的文本字段，然后点按(Configure)。

12. 从​绑定类型​下拉列表中选择​数据模型对象，然后选择​调用 > 调用日期。 点按两次以保存属性。

    同样，为​Time、Number、、​调用​和​调用​中的文本字段创建与​调用的绑定持续时间​和​电荷​列。​​

13. 点按​PayNow​目标区域，然后点按​+​以添加​Image​组件。

14. 点按图像组件，然后选择(Configure)。 图像属性显示在左窗格中：

    1. 在​名称​字段中指定​PayNow​作为图像的名称。
    2. 点按​上传，选择保存在本地文件系统上的图像，然后点按​打开。
    3. 点按以保存图像属性。

15. 重复步骤13和14，将​ValueAddedServices​图像添加到​ValueAddedServices​目标区域。

为Web渠道创建交互式通信

以下是本教程中已创建的资源列表，创建Web渠道时需要这些资源：

Web模板： Create_First_IC_Web_Template

表单数据模型： FDM_Create_First_IC

文档片 段：bill_details_first_ic、customer_details_first_ic、bill_summary_first_ic、summary_charges_first_ic

图像： PayNowWeb和ValueAddedServicesWeb

1. 登录到AEM作者实例，然后导航到​Adobe Experience Manager > Forms > Forms和文档。

2. 点按​创建​并选择​交互通信。 此时将显示​创建交互通信​向导。

3. 在​标题​和​名称​字段中指定​create_first_ic。 选择​FDM_Create_First_IC​作为表单数据模型，然后点按​Next。

4. 在​渠道​向导中：

   1. 指定​create_first_ic_print_template​作为打印模板，然后点按​选择。 确保未选中​“将打印作为主控用于Web渠道”复选框。
   2. 指定​Create_First_IC_templates​文件夹> Create_First_IC_Web_Template​作为Web模板，然后点按​选择。
   3. 点按​创建。

   将显示一条确认消息，提示已成功创建交互式通信。

5. 点按​编辑​以打开右窗格中的交互式通信。

6. 点按左窗格中的​渠道​选项卡，然后点按​Web。

7. 转到​资产​选项卡，应用筛选器以仅在左窗格中显示文档片段。

8. 将以下文档片段拖放到交互通信中的目标区域：

   文档片段	目标区域
   bill_details_first_ic	BillDetails
   customer_details_first_ic	客户详细信息
   bill_summary_first_ic	帐单摘要
   summary_charges_first_interactive_communication	费用

9. 点按​“费用摘要”​目标区域，然后点按​+​以添加​图表​组件。

10. 点按图表组件并选择(Configure)。 图表属性显示在左窗格中：

    1. 指定图表的名称。
    2. 从​图表类型​下拉列表中选择​饼图。
    3. 从​X轴​部分的​调用​数据模型对象类型中选择​调用类型​属性。 点按。
    4. 从​函数​下拉列表中选择​频率。
    5. 从​Y轴​部分的​调用​数据模型对象类型中选择​调用类型​属性。 点按。
    6. 点按以保存图表属性。

11. 从左窗格中选择​数据源​选项卡，将​调用​数据模型对象拖放到​明细调用​目标区。 调用​数据模型对象中的所有属性均显示为右侧窗格的​明细调用​目标区域中的表列。

    根据用例，您需要表中的“呼叫日期”、“呼叫时间”、“呼叫号码”、“呼叫持续时间”和“呼叫费用”列。

    

12. 选择​Mobilenum​表列标题，然后选择​更多选项 > 删除列。 同样，删除​Calltype​列。

13. 选择​调用日期​表列标题并点按（编辑），将文本重命名为​调用日期。 同样，重命名表中的其他列标题。

14. 根据用例，在交互通信中插入​立即付费​按钮，该按钮为用户提供通过单击该按钮进行付款的选项。 执行以下步骤以插入按钮：

    1. 点按​立即支付​目标区域，然后点按​+​以添加​文本​组件。
    2. 点按文本组件，然后点按（编辑）。
    3. 将文本重命名为​立即支付。
    4. 选择文本并点按超链接图标。
    5. 在​路径​字段中指定付款URL。
    6. 从​目标​下拉列表中选择​新建选项卡。
    7. 点按以保存超链接属性。

15. 从​预览​选项旁边的下拉列表中选择​样式。

    

16. 设置超链接文本的样式，以在交互通信中将其显示为按钮，步骤如下：

    1. 点按文本组件并选择（编辑）。
    2. 在​边框​部分，将​1.5px​指定为​边框宽度，选择​实底​为​边框样式，将​46px​指定为​边框半径。
    3. 从​Background​部分选择红色作为按钮的背景颜色。
    4. 在​Dimension和位置​部分的​边距​字段中，点按同时编辑​​​图标，将​Right​边距设置为​450px。 “顶部”、“底部”和“左侧”字段设置为空。

    

17. 点按​立即付费​目标区域，然后点按​+​以添加​图像​组件。

18. 点按图像组件，然后选择(Configure)。 图像属性显示在左窗格中：

    1. 在​名称​字段中指定​PayNow​作为图像的名称。
    2. 点按​上传，选择保存在本地文件系统上的​PayNowWeb​图像，然后点按​打开。
    3. 点按以保存图像属性。

19. 根据用例，在交互通信中插入​订阅​按钮，该按钮通过单击该按钮为用户提供订阅增值服务的选项。

    重复步骤13 - 17，将​订阅​按钮添加到​增值服务​目标区域，并添加​ValueAddedServicesWeb​图像。

使用自动同步创建用于打印和Web的交互式通信

您还可以通过启用打印和Web渠道之间的自动同步来创建交互式通信。 要启用自动同步，请在创建交互式通信时选择“打印为主控”选项。 选择“打印为主控”选项可确保Web渠道的内容、继承和数据绑定是从“打印”渠道派生的。 它还确保在打印渠道中所做的更改反映在Web渠道中。

执行以下步骤，使用“打印渠道”衍生Web渠道内容：

1. 登录到AEM作者实例，然后导航到​Adobe Experience Manager > Forms > Forms和文档。

2. 点按​创建​并选择​交互通信。 此时将显示​创建交互通信​向导。

3. 在​标题​和​名称​字段中指定​create_first_ic。 选择​FDM_Create_First_IC​作为表单数据模型，然后点按​Next。

4. 在​渠道​向导中：

   1. 指定​create_first_ic_print_template​作为打印模板，然后点按​选择。
   2. 选中​使用Web渠道的主控打印​复选框。
   3. 指定​Create_First_IC_templates​文件夹> Create_First_IC_Web_Template​作为Web模板，然后点按​选择。
   4. 点按​创建。

   将显示一条确认消息，提示已成功创建交互式通信。

5. 点按​编辑​以打开右窗格中的交互式通信。

6. 执行“为打印渠道创建交互式通信”部分的步骤6 - 15。

7. 点按左窗格中的​渠道​选项卡，然后点按​Web​以从“打印”渠道自动生成Web渠道的内容。

8. 在步骤4中选中​将“打印为Web渠道的主控”复选框​时，将从“打印”渠道自动为Web渠道生成内容和绑定。

   打印渠道内容会插入到Web渠道模板内容的下方。 要修改已从“打印”渠道自动生成的Web渠道内容，可取消任何目标区域的继承。

   将指针悬停在Web渠道中的相关目标区域上，选择（取消继承），然后在​取消继承​对话框中，点按​是。

   

   如果已取消某个组件的继承，则可以重新启用该继承。 要重新启用继承，请将指针悬停在包含该组件的相关目标区域的边界上，然后点按。

9. 选择左窗格中的​Content​选项卡。

10. 使用内容树将自动生成的Web渠道内容拖放到Web模板中的现有面板。 以下是需要重新排列的组件的列表:

    • “清单详细信息”组件到“清单详细信息”面板
    • 客户详细信息组件到“客户详细信息”面板
    • “开单汇总”组件至“开单汇总”面板
    • “费用”组件汇总至“费用”面板汇总
    • 布局片段（表）到“明细的调用”面板

    

11. 重复创建交互式Web渠道通信的步骤13 - 18，将​立即付费​和​订阅​超链接插入交互式通信的Web渠道。