教程:创建交互式通信 tutorial-create-interactive-communication
本教程是创建您的第一个交互式通信系列中的步骤。 建议按时间顺序跟踪系列,以了解、执行和演示完整的教程用例。
为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
-
登录到AEM创作实例并导航到 Adobe Experience Manager > Forms > Forms & Documents。
-
选择 创建 并选择 交互式通信。 将显示 创建交互式通信 向导。
-
在 标题 和 名称 字段中指定 create_first_ic。 选择 FDM_Create_First_IC 作为表单数据模型,然后选择 下一步。
-
在 渠道 向导中:
-
将 create_first_ic_print_template 指定为打印模板,并选择 选择。 确保未选中 Use Print as Master for Web Channel 复选框。
-
将 Create_First_IC_templates 文件夹> Create_First_IC_Web_Template 指定为Web模板,并选择 选择。
-
选择 创建。
此时将显示一条确认消息,表明已成功创建交互式通信。
-
-
选择 编辑 以在右窗格中打开交互式通信。
-
转到 Assets 选项卡并应用筛选器以在左窗格中仅显示文档片段。
-
将以下文档片段拖放到交互式通信中的目标区域:
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 费用 -
选择 图表 目标区域,然后选择 + 以添加 图表 组件。
-
选择图表组件并选择
- 指定图表的名称。
- 从 图表类型 下拉列表中选择 饼图。
- 从 X轴 节中的 调用 数据模型对象类型中选择 calltype 属性。 选择
- 从 函数 下拉列表中选择 频率。
- 从 Y轴 节中的 调用 数据模型对象类型中选择 calltype 属性。 选择
- 选择
-
转到 Assets 选项卡并应用筛选器以仅在左窗格中显示布局片段。 将 table_lf 布局片段拖放到 分项调用 目标区域。
-
选择 Date 列中的文本字段并选择
-
从 绑定类型 下拉列表中选择 数据模型对象,然后选择 调用 > 调用日期。 选择
同样,为 Time、Number、Duration 和 Charges 列中的文本字段创建具有 calltime、callnumber、callduration 和 callcharges 的绑定。
-
选择 PayNow 目标区域,然后选择 + 以添加 Image 组件。
-
选择图像组件,然后选择
- 在 Name 字段中指定 PayNow 作为图像的名称。
- 选择 上传,选择保存在本地文件系统中的图像,然后选择 打开。
- 选择
-
重复步骤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
-
登录到AEM创作实例并导航到 Adobe Experience Manager > Forms > Forms & Documents。
-
选择 创建 并选择 交互式通信。 将显示 创建交互式通信 向导。
-
在 标题 和 名称 字段中指定 create_first_ic。 选择 FDM_Create_First_IC 作为表单数据模型,然后选择 下一步。
-
在 渠道 向导中:
-
将 create_first_ic_print_template 指定为打印模板,并选择 选择。 确保未选中 Use Print as Master for Web Channel 复选框。
-
将 Create_First_IC_templates 文件夹> Create_First_IC_Web_Template 指定为Web模板,并选择 选择。
-
选择 创建。
此时将显示一条确认消息,表明已成功创建交互式通信。
-
-
选择 编辑 以在右窗格中打开交互式通信。
-
从左窗格中选择 渠道 选项卡,然后选择 Web。
-
转到 Assets 选项卡并应用筛选器以在左窗格中仅显示文档片段。
-
将以下文档片段拖放到交互式通信中的目标区域:
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 费用 -
选择 费用摘要 目标区域,然后选择 + 以添加 图表 组件。
-
选择图表组件并选择
-
指定图表的名称。
-
从 图表类型 下拉列表中选择 饼图。
-
从 X轴 节中的 调用 数据模型对象类型中选择 calltype 属性。 选择
-
从 函数 下拉列表中选择 频率。
-
从 Y轴 节中的 调用 数据模型对象类型中选择 calltype 属性。 选择
-
选择
-
-
从左窗格中选择 数据源 选项卡,并将 调用 数据模型对象拖放到 分项调用 目标区域。 调用 数据模型对象中的所有属性在右窗格的 分项调用 目标区域中显示为表列。
根据用例,您需要表中的呼叫日期、呼叫时间、呼叫编号、呼叫持续时间和呼叫费用列。
用于交互式通信的
-
选择 Mobilenum 表列标题并选择 更多选项 > 删除列。 同样,删除 Calltype 列。
-
选择 Calldate 表列标题并选择
-
根据用例,在交互式通信中插入一个 立即付款 按钮,该按钮为用户提供了通过单击该按钮进行付款的选项。 执行以下步骤以插入按钮:
-
选择 立即付款 目标区域,然后选择 + 以添加 文本 组件。
-
选择文本组件并选择
-
将文本重命名为 立即付款。
-
选择文本并选择“超链接”图标。
-
在 路径 字段中指定付款URL。
-
从 目标 下拉列表中选择 新选项卡。
-
选择
-
-
从 预览 选项旁边的下拉列表中选择 样式。
-
使用以下步骤,将超链接文本设置为在交互式通信中作为按钮显示:
-
选择文本组件并选择
-
在 边框 部分中,指定 1.5px 作为 边框宽度,选择 实线 作为 边框样式,并指定 46px 作为 边框半径。
-
从 背景 部分中选择红色作为按钮的背景颜色。
-
在 Dimension和位置 节的 边距 字段中,选择 同时编辑 图标,并将 右侧 边距设置为 450px。 “顶部”、“底部”和“左侧”字段设置为空白。
-
-
选择 立即支付 目标区域,然后选择 + 以添加 Image 组件。
-
选择图像组件,然后选择
-
在 Name 字段中指定 PayNow 作为图像的名称。
-
选择 上传,选择保存在本地文件系统上的 PayNowWeb 图像,然后选择 打开。
-
选择
-
-
根据用例,在交互式通信中插入一个 Subscribe 按钮,该按钮为用户提供了一个通过单击该按钮来订阅增值服务的选项。
重复步骤13 - 17,将 Subscribe 按钮添加到 增值服务 目标区域并添加 ValueAddedServicesWeb 图像。
使用自动同步为打印和Web创建交互式通信 create-interactive-communications-for-print-and-web-with-auto-synchronization
您还可以通过启用打印和Web渠道之间的自动同步来创建交互式通信。 要启用自动同步,请在创建交互式通信时选择打印为主选项。 选择“打印为主文件”选项可以确保Web渠道的内容、继承和数据绑定派生自“打印”渠道。 它还可确保在打印渠道中所做的更改反映在Web渠道中。
执行以下步骤以使用打印渠道获取Web渠道内容:
-
登录到AEM创作实例并导航到 Adobe Experience Manager > Forms > Forms & Documents。
-
选择 创建 并选择 交互式通信。 将显示 创建交互式通信 向导。
-
在 标题 和 名称 字段中指定 create_first_ic。 选择 FDM_Create_First_IC 作为表单数据模型,然后选择 下一步。
-
在 渠道 向导中:
-
将 create_first_ic_print_template 指定为打印模板,并选择 选择。
-
选中 为Web Channel使用打印为主页 复选框。
-
将 Create_First_IC_templates 文件夹> Create_First_IC_Web_Template 指定为Web模板,并选择 选择。
-
选择 创建。
此时将显示一条确认消息,表明已成功创建交互式通信。
-
-
选择 编辑 以在右窗格中打开交互式通信。
-
执行为打印渠道节创建交互式通信中的步骤6 - 15。
-
从左窗格中选择 渠道 选项卡,然后选择 Web 以从打印渠道自动生成Web渠道的内容。
-
由于已在步骤4中选中 将打印作为Web渠道的主版 复选框,因此内容和绑定将从Print渠道自动为Web渠道生成。
打印渠道内容插入Web渠道模板内容下方。 要修改已从打印渠道自动生成的Web渠道内容,您可以取消任何目标区域的继承。
将鼠标悬停在Web渠道中的相关目标区域上并选择
如果已取消组件的继承,则可以重新启用它。 要重新启用继承,请将鼠标悬停在相关目标区域(包括组件)的边界上,然后选择
-
在左窗格中选择 Content 选项卡。
-
使用内容树将自动生成的Web渠道内容拖放到Web模板中的现有面板。 以下是需要重新排列的组件列表:
- “清单详细信息”面板中的清单详细信息组件
- “客户详细信息”组件到“客户详细信息”面板
- “清单汇总”面板中的清单汇总组件
- “费用汇总”组件到“费用汇总”面板
- “分项调用”面板的布局片段(表)
-
重复步骤13 - 18(共步)为Web渠道创建交互式通信,以便在交互式通信的Web渠道中插入 立即付款 和 订阅 超链接。