教程:创建交互式通信

09-style-your-adaptive-form-small

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

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

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

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

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

为打印和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和ValueAddedService

  1. 登录到AEM创作实例并导航到 Adobe Experience Manager > Forms > Forms和文档.

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

  3. 指定 create_first_ic标题名称 字段。 选择 FDM_Create_First_IC 作为表单数据模型并点按 下一个.

  4. 渠道 向导:

    1. 指定 create_first_ic_print_template 作为打印模板,然后点按 选择. 确保 对Web Channel使用“打印为主控” 未选中复选框。

    2. 指定 Create_First_IC_templates 文件夹> Create_First_IC_Web_Template 作为Web模板并点按 选择.

    3. 点按​创建

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

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

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

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

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

    交互式通信的文档片段

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

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

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

  11. 选择中的文本字段 日期 列并点按 configure_icon (配置)。

  12. 选择 数据模型对象绑定类型 下拉列表并选择 调用 > calldate. 点按 done_icon 保存属性两次。

    同样,创建绑定 calltimecallnum标注、和 callcharges 中的文本字段 时间数字持续时间、和 费用 列进行归类。

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

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

    1. 指定 PayNow 作为图像在 名称 字段。
    2. 点按 上传,选择保存在本地文件系统中的图像,然后点按 打开.
    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 Channel使用“打印为主控” 未选中复选框。

    2. 指定 Create_First_IC_templates 文件夹> Create_First_IC_Web_Template 作为Web模板并点按 选择.

    3. 点按​创建

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

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

  6. 点按 渠道 选项卡,然后点按 Web.

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

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

    文档片段 目标区域
    bill_details_first_ic 账单详细信息
    customer_details_first_ic 客户详细信息
    bill_summary_first_ic 账单摘要
    summary_charges_first_interactive_communication 费用
  9. 点按 费用汇总 目标区域,然后点按 + 添加 图表 组件。

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

    1. 指定图表的名称。

    2. 选择 饼图图表类型 下拉列表。

    3. 选择 calltype 属性来自 调用 中的数据模型对象类型 X轴 部分。 点按 done_icon.

    4. 选择 频率函数 下拉列表。

    5. 选择 calltype 属性来自 调用 中的数据模型对象类型 Y轴 部分。 点按 done_icon.

    6. 点按 done_icon 以保存图表属性。

  11. 选择 数据源 选项卡,然后拖放 调用 数据模型对象 分项调用 目标区域。 中的全部属性 调用 数据模型对象显示为表中的表列 分项调用 右窗格中的目标区域。

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

    交互式通信表

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

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

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

    1. 点按 立即付款 目标区域,然后点按 + 添加 文本 组件。

    2. 点按文本组件并点按 编辑 (编辑)。

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

    4. 选择文本并点按超链接图标。

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

    6. 选择 新建选项卡 起始日期 Target 下拉列表。

    7. 点按 done_icon 以保存超链接属性。

  15. 选择 样式 下拉列表中 预览 选项。

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

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

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

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

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

    4. 边距 字段 Dimension和位置 部分,点按 同时编辑 图标,然后设置 边距为 450像素. “顶部”、“底部”和“左侧”字段设置为空白。

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

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

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

    1. 指定 PayNow 作为图像在 名称 字段。

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

    3. 点按 done_icon 以保存图像属性。

  19. 根据用例,插入 订阅 交互式通信中的按钮,通过单击此按钮,用户可以选择订阅增值服务。

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

通过自动同步为打印和Web创建交互式通信

您还可以通过启用打印和Web渠道之间的自动同步来创建交互式通信。 要启用自动同步,请在创建交互式通信时选择“打印为主控”选项。 选择打印为主控选项可确保从Print channel派生出Web channel的内容、继承和数据绑定。 它还可确保在打印渠道中所做的更改反映在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 Channel使用“打印为主控” 复选框。

    3. 指定 Create_First_IC_templates 文件夹> Create_First_IC_Web_Template 作为Web模板并点按 选择.

    4. 点按​创建

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

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

  6. 执行第6 - 15步,共 为打印渠道创建交互式通信 部分。

  7. 点按 渠道 选项卡,然后点按 Web 从Print channel自动生成Web渠道的内容。

  8. 作为 对Web Channel使用“打印为主控” 如果在步骤4中选中了复选框,则会从打印渠道为Web渠道自动生成内容和绑定。

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

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

    取消继承

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

  9. 选择 内容 选项卡。

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

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

    Web内容树

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

在此页面上