教程:创建交互通信

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

使您的交互式通信

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

为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 费用

    create_first_ic_doc_fragments

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

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

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

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

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

    同样,为​TimeNumber​调用​​调用​中的文本字段创建与​调用的绑定持续时间​​电荷​列。

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

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

    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​作为表单数据模型,然后点按​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_icon(Configure)。 图表属性显示在左窗格中:

    1. 指定图表的名称。
    2. 从​图表类型​下拉列表中选择​饼图
    3. 从​X轴​部分的​调用​数据模型对象类型中选择​调用类型​属性。 点按done_icon
    4. 从​函数​下拉列表中选择​频率
    5. 从​Y轴​部分的​调用​数据模型对象类型中选择​调用类型​属性。 点按done_icon
    6. 点按done_icon以保存图表属性。
  11. 从左窗格中选择​数据源​选项卡,将​调用​数据模型对象拖放到​明细调用​目标区。 调用​数据模型对象中的所有属性均显示为右侧窗格的​明细调用​目标区域中的表列。

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

    table_ic_web

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

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

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

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

    select_style_ic_web

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

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

    ic_web_hyperlink

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

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

    1. 在​名称​字段中指定​PayNow​作为图像的名称。
    2. 点按​上传,选择保存在本地文件系统上的​PayNowWeb​图像,然后点按​打开
    3. 点按done_icon以保存图像属性。
  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渠道中的相关目标区域上,选择取消继承(取消继承),然后在​取消继承​对话框中,点按​

    cancel_inheritance_web_渠道

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

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

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

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

    ic_web_content_tree

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

在此页面上

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