教程:创建交互式通信 tutorial-create-interactive-communication

09-style-your-adaptive-form-small

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

为Web版本创建了所有构建块(如表单数据模型、文档片段、模板和主题)后,即可开始创建交互式通信。

交互式通信可通过两种渠道提供:打印和Web。 您还可以创建以Print channel作为母版的交互式通信。 Web渠道的“打印为主文件”选项确保Web渠道的内容、继承和数据绑定派生自“打印”渠道。 它还可确保在Print channel中所做的更改在Web channel中同步。 但是,允许交互式通信作者中断Web渠道中特定组件的继承。

本教程将指导您完成为打印和Web渠道创建交互式通信的步骤。 在本教程结束时,您将能够:

  • 为打印渠道创建交互式通信
  • 为Web渠道创建交互式通信
  • 创建Print和Web交互通信并将Print作为母版

为打印和Web创建无同步的交互式通信 create-interactive-communications-for-print-and-web-with-no-synchronization

为打印渠道创建交互式通信 create-interactive-communication-for-print-channel

以下是本教程中已创建、且在为打印渠道创建交互式通信时所需的资源列表:

打印模板: 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 & Documents

  2. 选择​ 创建 ​并选择​ 交互式通信。 将显示​ 创建交互式通信 ​向导。

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

  4. 在​ 渠道 ​向导中:

    1. 将​ create_first_ic_print_template ​指定为打印模板,并选择​ 选择。 确保未选中​ Use Print as Master for Web Channel ​复选框。

    2. 将​ Create_First_IC_templates ​文件夹> Create_First_IC_Web_Template ​指定为Web模板,并选择​ 选择

    3. 选择​ 创建

    此时将显示一条确认消息,表明已成功创建交互式通信。

  5. 选择​ 编辑 ​以在右窗格中打开交互式通信。

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

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

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2
    文档片段 目标区域
    bill_details_first_ic 账单详细信息
    customer_details_first_ic 客户详细信息
    bill_summary_first_ic 账单摘要
    summary_charges_first_interactive_communication 费用

    交互式通信的文档片段

  8. 选择​ 图表 ​目标区域,然后选择​ + ​以添加​ 图表 ​组件。

  9. 选择图表组件并选择 configure_icon (配置)。 图表属性显示在左窗格中:

    1. 指定图表的名称。
    2. 从​ 图表类型 ​下拉列表中选择​ 饼图
    3. 从​ X轴 ​节中的​ 调用 ​数据模型对象类型中选择​ calltype ​属性。 选择 完成图标
    4. 从​ 函数 ​下拉列表中选择​ 频率
    5. 从​ Y轴 ​节中的​ 调用 ​数据模型对象类型中选择​ calltype ​属性。 选择 完成图标
    6. 选择 done_icon 以保存图表属性。
  10. 转到​ Assets ​选项卡并应用筛选器以仅在左窗格中显示布局片段。 将​ table_lf ​布局片段拖放到​ 分项调用 ​目标区域。

  11. 选择​ Date ​列中的文本字段并选择 configure_icon (配置)。

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

    同样,为​ TimeNumberDuration ​和​ Charges ​列中的文本字段创建具有​ calltimecallnumbercallduration ​和​ callcharges ​的绑定。

  13. 选择​ PayNow ​目标区域,然后选择​ + ​以添加​ Image ​组件。

  14. 选择图像组件,然后选择 configure_icon (配置)。 图像属性显示在左窗格中:

    1. 在​ Name ​字段中指定​ PayNow ​作为图像的名称。
    2. 选择​ 上传,选择保存在本地文件系统中的图像,然后选择​ 打开
    3. 选择 done_icon 以保存图像属性。
  15. 重复步骤13和14,将​ ValueAddedServices ​图像添加到​ ValueAddedServices ​目标区域。

为Web渠道创建交互式通信 create-interactive-communication-for-web-channel

以下是本教程中已创建、且在为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 & Documents

  2. 选择​ 创建 ​并选择​ 交互式通信。 将显示​ 创建交互式通信 ​向导。

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

  4. 在​ 渠道 ​向导中:

    1. 将​ create_first_ic_print_template ​指定为打印模板,并选择​ 选择。 确保未选中​ Use Print as Master for Web Channel ​复选框。

    2. 将​ Create_First_IC_templates ​文件夹> Create_First_IC_Web_Template ​指定为Web模板,并选择​ 选择

    3. 选择​ 创建

    此时将显示一条确认消息,表明已成功创建交互式通信。

  5. 选择​ 编辑 ​以在右窗格中打开交互式通信。

  6. 从左窗格中选择​ 渠道 ​选项卡,然后选择​ Web

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

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

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2
    文档片段 目标区域
    bill_details_first_ic 账单详细信息
    customer_details_first_ic 客户详细信息
    bill_summary_first_ic 账单摘要
    summary_charges_first_interactive_communication 费用
  9. 选择​ 费用摘要 ​目标区域,然后选择​ + ​以添加​ 图表 ​组件。

  10. 选择图表组件并选择 configure_icon (配置)。 图表属性显示在左窗格中:

    1. 指定图表的名称。

    2. 从​ 图表类型 ​下拉列表中选择​ 饼图

    3. 从​ X轴 ​节中的​ 调用 ​数据模型对象类型中选择​ calltype ​属性。 选择 完成图标

    4. 从​ 函数 ​下拉列表中选择​ 频率

    5. 从​ Y轴 ​节中的​ 调用 ​数据模型对象类型中选择​ calltype ​属性。 选择 完成图标

    6. 选择 done_icon 以保存图表属性。

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

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

    用于交互式通信的 表

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

  13. 选择​ Calldate ​表列标题并选择 编辑 (编辑)以将文本重命名为​ 调用日期。 同样,重命名表中的其他列标题。

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

    1. 选择​ 立即付款 ​目标区域,然后选择​ + ​以添加​ 文本 ​组件。

    2. 选择文本组件并选择 编辑 (编辑)。

    3. 将文本重命名为​ 立即付款

    4. 选择文本并选择“超链接”图标。

    5. 在​ 路径 ​字段中指定付款URL。

    6. 从​ 目标 ​下拉列表中选择​ 新选项卡

    7. 选择 done_icon 以保存超链接属性。

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

    为交互式通信选择样式模式

  16. 使用以下步骤,将超链接文本设置为在交互式通信中作为按钮显示:

    1. 选择文本组件并选择 编辑 (编辑)。

    2. 在​ 边框 ​部分中,指定​ 1.5px ​作为​ 边框宽度,选择​ 实线 ​作为​ 边框样式,并指定​ 46px ​作为​ 边框半径

    3. 从​ 背景 ​部分中选择红色作为按钮的背景颜色。

    4. 在​ Dimension和位置 ​节的​ 边距 ​字段中,选择​ 同时编辑 ​图标,并将​ 右侧 ​边距设置为​ 450px。 “顶部”、“底部”和“左侧”字段设置为空白。

    在交互式通信中插入超链接

  17. 选择​ 立即支付 ​目标区域,然后选择​ + ​以添加​ Image ​组件。

  18. 选择图像组件,然后选择 configure_icon (配置)。 图像属性显示在左窗格中:

    1. 在​ Name ​字段中指定​ PayNow ​作为图像的名称。

    2. 选择​ 上传,选择保存在本地文件系统上的​ PayNowWeb ​图像,然后选择​ 打开

    3. 选择 done_icon 以保存图像属性。

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

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

使用自动同步为打印和Web创建交互式通信 create-interactive-communications-for-print-and-web-with-auto-synchronization

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

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

  1. 登录到AEM创作实例并导航到​ Adobe Experience Manager > Forms > Forms & Documents

  2. 选择​ 创建 ​并选择​ 交互式通信。 将显示​ 创建交互式通信 ​向导。

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

  4. 在​ 渠道 ​向导中:

    1. 将​ create_first_ic_print_template ​指定为打印模板,并选择​ 选择

    2. 选中​ 为Web Channel使用打印为主页 ​复选框。

    3. 将​ Create_First_IC_templates ​文件夹> Create_First_IC_Web_Template ​指定为Web模板,并选择​ 选择

    4. 选择​ 创建

    此时将显示一条确认消息,表明已成功创建交互式通信。

  5. 选择​ 编辑 ​以在右窗格中打开交互式通信。

  6. 执行为打印渠道节创建交互式通信中的步骤6 - 15。

  7. 从左窗格中选择​ 渠道 ​选项卡,然后选择​ Web ​以从打印渠道自动生成Web渠道的内容。

  8. 由于已在步骤4中选中​ 将打印作为Web渠道的主版 ​复选框,因此内容和绑定将从Print渠道自动为Web渠道生成。

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

    将鼠标悬停在Web渠道中的相关目标区域上并选择 取消继承 (取消继承),然后在​ 取消继承 ​对话框中,选择​

    取消继承

    如果已取消组件的继承,则可以重新启用它。 要重新启用继承,请将鼠标悬停在相关目标区域(包括组件)的边界上,然后选择 reenableinheritance

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

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

    • “清单详细信息”面板中的清单详细信息组件
    • “客户详细信息”组件到“客户详细信息”面板
    • “清单汇总”面板中的清单汇总组件
    • “费用汇总”组件到“费用汇总”面板
    • “分项调用”面板的布局片段(表)

    Web内容树

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

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