教程:创建交互通信

09-style-your-adaptive-form-small

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

创建所有构建基块(如表单数据模型、文档片段、模板和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​作为“打印”模板,然后点按​选择。 确保未选中​“使用Print as 主控于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_icon(配置)。 图表属性显示在左窗格中:

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

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

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

    同样,为​TimeNumber​中的文本字段创建与​调用时间调用号​调用2/>持续时间​​费用​列。

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

  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​作为“打印”模板,然后点按​选择。 确保未选中​“使用Print as 主控于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_icon(配置)。 图表属性显示在左窗格中:

    1. 指定图表的名称。

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

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

    4. 从​Function​下拉列表中选择​Frequency

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

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

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

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

    交互通信表

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

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

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

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

    2. 点按文本组件,然后点按edit(编辑)。

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

    4. 选择文本,然后点按超链接图标。

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

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

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

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

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

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

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

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

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

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

    在交互通信中插入超链接

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

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

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

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

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

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

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

使用自动同步创建用于打印和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渠道中的相关目标区域上,选择canceliheritance(取消继承),然后在​取消继承​对话框中,点按​

    取消继承

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

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

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

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

    Web内容树

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

On this page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now