教程：创建交互式通信

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

设置交互式通信

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

在为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​作为表单数据模型，然后点按​下一个。

  4. 在​通道​向导中：

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

    将显示确认消息，表明已成功创建交互式通信。

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

  6. 转到​Assets​选项卡，然后应用过滤器以在左侧窗格中仅显示文档片段。

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

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

    create_first_ic_doc_fragments

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

  9. 点按图表组件，然后选择configure_icon（配置）。 图表属性显示在左窗格中：

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

  10. 转到​Assets​选项卡，然后应用过滤器以在左侧窗格中仅显示布局片段。 将​table_lf​布局片段拖放到​明细调用​目标区域。

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

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

    同样，为​Time、Number、Duration、Callduration​和​Callcarges​中的文本字段分别创建与​calltime、Duration​和​Carges​列中的文本字段的绑定。

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

  14. 点按图像组件，然后选择configure_icon（配置）。 图像属性显示在左窗格中：

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

  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​作为表单数据模型，然后点按​下一个。

  4. 在​通道​向导中：

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

    将显示确认消息，表明已成功创建交互式通信。

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

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

  7. 转到​Assets​选项卡，然后应用过滤器以在左侧窗格中仅显示文档片段。

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

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

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

  10. 点按图表组件，然后选择configure_icon（配置）。 图表属性显示在左窗格中：

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

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

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

    table_ic_web

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

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

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

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

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

    select_style_ic_web

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

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

    ic_web_hyperlink

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

  18. 点按图像组件，然后选择configure_icon（配置）。 图像属性显示在左窗格中：

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

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

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

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

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

执行以下步骤以使用打印渠道获取Web渠道内容：

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

  2. 点按​创建，然后选择​交互式通信。 将显示​创建交互式通信​向导。

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

  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渠道中的相关目标区域上，选择cancelerientation（取消继承），然后在​取消继承​对话框中，点按​是。

    cancel_inheritance_web_channel

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

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

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

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

    ic_web_content_tree

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

在此页面上