本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。
# Amazon Connect 流数据块：显示视图
本主题定义了流程块，用于创建 step-by-step工作流程指南以帮助客服人员提供一致的客户体验，以及实现交互式客户体验的指南。
## 说明
+ 使用此流数据块可以：
+ 为使用 Amazon Connect 代理工作区的代理创建[step-by-step 指南](step-by-step-guided-experiences.md)。这些指南是为您的座席提供说明的工作流程，帮助他们与客户进行一致的互动。
+ 创建表单以便在聊天体验中从客户那里收集信息。
+ 当联系被路由到包含**显示视图**数据块的流时，会在座席工作区或客户的聊天用户界面中呈现一个称为[视图](view-resources-sg.md)的用户界面页面。
## 此数据块的使用场景
此流数据块旨在指导座席完成以下步骤：
+ 为客户执行常见任务，例如进行预订、管理付款和提交新订单。
+ 根据通知客户已提交退款申请的模板发送电子邮件。电子邮件结构始终相同，但具体值可能会有所不同，例如订单号、退款金额和付款账户。您可以为座席配置“显示视图”数据块，以提供这些类型的信息。
+ 在现有座席工作区中创建新的 CRM 条目。使用联系人属性在表单中预先填充相关信息，例如客户姓名和电话号码。
以及为引导客户完成聊天对话中的步骤来执行以下操作：
+ 通过提供信用卡信息进行付款。
+ 提供 PII 信息，例如家庭住址，以更新其配置文件。
+ 通过提供客户账户 ID 来接收账户信息。
## 联系人类型
可以在指南流中使用**显示视图**数据块，该指南流由[设置事件流](set-event-flow.md)数据块从任何联系类型启动，包括语音、聊天、电子邮件或任务。如果您打算向客户展示指南，则可以直接使用主聊天流中的**显示视图**数据块。
| Contact type（联系人类型） | 是否支持？ |
| --- | --- |
| 语音 | 是 |
| Chat | 是 |
| 任务 | 是 |
| 电子邮件 | 是 |
## 流类型
您可以在以下[流类型](create-contact-flow.md#contact-flow-types)中使用此数据块：
| 流类型 | 是否支持？ |
| --- | --- |
| 入站流 | 是 |
| 客户等候流 | 否 |
| 客户私密消息流 | 否 |
| 出站私密消息流 | 否 |
| 座席等候流 | 否 |
| 座席私密消息流 | 否 |
| 转接座席流 | 否 |
| 转接到队列流 | 否 |
## 如何配置此数据块
您可以使用 Amazon Connect 管理网站或使用 Amazon Connect Flow 语言中的[ShowView](https://docs.aws.amazon.com/connect/latest/APIReference/participant-actions-showview.html)操作来配置 “**显示视**图” 区块。
**Topics**
+ [选择视图资源](#choose-viewresource)
+ [如何使用“设手动置”选项](#view-setmanually)
+ [如何使用“动态设置”选项](#view-setdynamically)
+ [如何使用“设置 JSON”选项](#show-view-block-example-json)
+ [此视图具有敏感数据](#showview-sensitive-data)
+ [流数据块分支](#showview-branches)
+ [其他配置提示](#showview-tips)
+ [此数据块生成的数据](#showview-data)
### 选择视图资源
Amazon Connect 包括一组您可以用于添加座席工作区的视图。您可以在**视图**框中指定视图，如下图所示：
![\[“显示视图”数据块的属性页面。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/show-view-block-form.png)
以下是对这些 AWS 托管视图的简要描述。有关每个视图的详细信息，请参阅 [在 Amazon Connect 中为代理的工作空间设置 AWS 托管视图](view-resources-managed-view.md)。还支持客户托管的视图。有关更多信息，请参阅[客户托管的视图](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/customer-managed-views-customer-managed-views--page)文档。
+ **详细视图**：向座席显示信息，并提供他们可以采取的操作的列表。详细信息视图的一个常见用例是在呼叫开始时向座席显示屏幕弹出窗口。
+ **列表视图**：将信息显示为带有标题和描述的项目列表。项目可以充当附有操作的链接。它还可以选择支持标准返回导航和持久上下文标题。
+ **表单视图**：为客户和座席提供输入字段，以收集所需的数据并将数据提交到后端系统。此视图由多个 Sections 组成，包含预定义 Section 样式，并带有标题。正文由按列或网格布局格式排列的各种输入字段组成。
+ **确认视图**：一个在提交表单或完成操作后向客户和座席显示的页面。在此预先构建的模板中，您可以提供所发生事件的摘要、任何后续步骤和提示。确认视图支持永久属性栏、图标或图像、标题和副标题以及返回主页导航按钮。
+ **卡片视图**：可让您在将联系提供给座席后，立即向客户和座席提供主题列表以供他们选择，从而为他们提供指导。
**显示视图**数据块的属性会根据您选择的**视图**资源动态填充。例如，如果选择**表单**，则会配置显示的**下一步**和**上一步**操作。这些只是视图中的几个操作。
![\[“视图”设置为“表单”，“版本”设置为 1。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/show-view-block-version2.png)
以下各章节说明如何手动、动态或使用 JSON 选项配置**表单**操作。
### 如何使用“设手动置”选项
1. 在**属性**页面的**视图**部分，从下拉菜单中选择**表单**，然后将**使用版本**设置为 1（默认）。下图显示了配置了这些选项的**属性**页面。
![\[“视图”设置为“表单”，“版本”设置为 1。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/show-view-block-version1.png)
1. **属性**页面根据表单视图显示一组字段。选择**手动设置**，然后输入要在“视图用户界面”组件上呈现的文本。下图显示了**下一个**和**上一个**用户界面组件。组件的显示名称已手动设置为**下一个**和**上一个**。这就是渲染 step-by-step指南时代理工作区中将显示的内容。
![\[手动设置下一个和上一个用户界面组件。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/show-view-block-version2.png)
### 如何使用“动态设置”选项
1. 在**属性**页面的**视图**部分，从下拉菜单中选择**表单**，然后将**使用版本**设置为 1（默认）。下图显示了配置了这些选项的**属性**页面。
![\[“视图”设置为“表单”，“版本”设置为 1。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/show-view-block-version1.png)
1. **属性**页面根据表单视图显示一组字段。选择**动态设置**。在**命名空间**下拉菜单中，选择联系人属性，然后选择密钥。下图显示了将在 step-by-step指南中动态呈现的**标题**，以显示客户的姓氏。
![\[“视图用户界面”模板中的标题。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/show-view-block-dynamic.png)
### 如何使用“设置 JSON”选项
本节将通过一个示例介绍如何使用**设置 JSON**选项。
1. 在“显示视图”数据块的**属性**页面的**视图**部分，从下拉菜单中选择**表单**，并将**版本**设置为 **1**（默认）。这些选项如下图所示。
![\[“视图”设置为“表单”，“版本”设置为 1。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/show-view-block-version1.png)
1. 当您选择**表单**视图时，此视图的输入架构将显示在**属性**页面上。该架构包含以下部分，您可以在其中添加信息：“**部分**”、**AttributeBar**“**返回**”、“**取消****” **ErrorText**、“编辑”** 等。
1. 下图显示了**AttributeBar**参数和 “**使用 JSON 设置**” 选项。要查看您粘贴的所有 JSON，请单击框的角落并向下拉。
![\[输入参数。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/show-view-block-json.png)
**提示**
如果 JSON 无效，请修复错误。下图显示了一条错误消息示例，其中有一个多余的逗号。
![\[一条错误消息，显示 JSON 无效。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/show-view-block-json-invalid.png)
1. 选择自定义视图时，您可能需要通过**设置 JSON** 选项来设置动态输入的值。执行此操作时，您可以选择**应用示例数据**，以使用包含示例数据的 JSON 架构预填充输入。
确保在 UI 生成器中为动态数据（例如 \$1.Channel）[配置动态引用](no-code-ui-builder-properties-dynamic-fields.md)，以便在运行时填充。
下图显示了**应用示例数据**选项。
![\[“显示视图”数据块上的“应用示例数据”选项。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/apply-sample-data.png)
1. 准备就绪后，选择**保存**并发布。
以下代码示例显示了 Flow 语言中的[ShowView](https://docs.aws.amazon.com/connect/latest/APIReference/participant-actions-showview.html)操作将如何表示相同的配置：
```
{
"Parameters": {
"ViewResource": {
"Id": "arn:aws:connect:us-west-2:aws:view/form:1"
},
"InvocationTimeLimitSeconds": "2",
"ViewData": {
"Sections": "Sections",
"AttributeBar": [
{
"Label": "Example",
"Value": "Attribute"
},
{
"Label": "Example 2",
"Value": "Attribute 2"
},
{
"Label": "Example 3",
"Value": "Case 123456",
"LinkType": "case",
"ResourceId": "123456",
"Copyable":true
},
{
"Label": "Example 3",
"Value": "Case 123456",
"LinkType": "case",
"ResourceId": "https:example.com"
}
],
"Back": {
"Label": "Back"
},
"Cancel": {
"Label": "Cancel"
},
"Edit": "Edit",
"ErrorText": "ErrotText",
"Heading": "$.Customer.LastName",
"Next": "Next",
"Previous": "Previous",
"SubHeading": "$.Customer.FirstName",
"Wizard": {
"Heading": "Progress tracker",
"Selected": "Step Selected"
}
}
},
"Identifier": "53c6be8a-d01f-4dd4-97a5-a001174f7f66",
"Type": "ShowView",
"Transitions": {
"NextAction": "7c5ef809-544e-4b5f-894f-52f214d8d412",
"Conditions": [
{
"NextAction": "7c5ef809-544e-4b5f-894f-52f214d8d412",
"Condition": {
"Operator": "Equals",
"Operands": [
"Back"
]
}
},
{
"NextAction": "7c5ef809-544e-4b5f-894f-52f214d8d412",
"Condition": {
"Operator": "Equals",
"Operands": [
"Next"
]
}
},
{
"NextAction": "7c5ef809-544e-4b5f-894f-52f214d8d412",
"Condition": {
"Operator": "Equals",
"Operands": [
"Step"
]
}
}
],
"Errors": [
{
"NextAction": "b88349e3-3c54-4915-8ea0-818601cd2d03",
"ErrorType": "NoMatchingCondition"
},
{
"NextAction": "7c5ef809-544e-4b5f-894f-52f214d8d412",
"ErrorType": "NoMatchingError"
},
{
"NextAction": "b88349e3-3c54-4915-8ea0-818601cd2d03",
"ErrorType": "TimeLimitExceeded"
}
]
}
}
```
### 此视图具有敏感数据
建议您在从客户那里收集信用卡数据、家庭住址或任何其它类型的敏感数据时，启用**此视图具有敏感数据**。启用此选项后，客户提交的数据将不会记录在转录或联系记录中，也不会对座席可见（默认情况下对座席可见）。如果在联系流中开启了**设置日志行为**，请记得关闭日志记录，以确保流日志中不包含敏感的客户数据。
![\[敏感数据视图复选框。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/show-view-block-form-sensitive-data.png)
**提示**
构建[流模块](contact-flow-modules.md)，其中包含启用了**此视图具有敏感数据**的“显示视图”数据块、Lambda 函数以及提示，可让您创建一个可重复使用的支付体验模块，该模块可以放置在现有入站联系流中。
### 流数据块分支
下图显示了已配置的**显示视图**数据块示例。此数据支持条件分支，即分支取决于所选择的视图。它还支持**错误**和**超时**分支。
![\[已配置的“显示视图”数据块。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/show-view-block-sq-config.png)
+ 条件分支：这些分支基于在**显示视图**数据块上选择的视图。上图显示此数据块已配置为**表单**视图，以及以下操作：**返回**、**下一步**和**不匹配**。
+ 对于此特定配置，在运行时，根据座席在视图上单击的内容，聊天联系人将沿着**返回**或**下一步**分支进行路由。只有当用户拥有具有自定义“操作”值的操作组件时，才有可能出现**不匹配**的情况。
+ **错误**：运行失败（即无法在座席工作区呈现视图或捕获视图输出操作）会导致使用**错误**分支。
+ **超时**：指定代理需要多长时间才能完成 step-by-step指南中的此步骤。如果座席完成此步骤所需的时间超过超时时间（例如，座席没有在指定时间内提供所需信息），则此步骤将采用超时分支。
当步骤超时时， step-by-step指南可以按照流程中定义的逻辑来确定下一步行动。例如，下一步可以是重新询问信息，或停止引导体验。
此时，客户已连接到座席，因此客户的体验不会因为超时而改变。
### 其他配置提示
使用此日志记录设置、此数据块和 Lambda 构建流模块，以创建一个可重复使用的支付体验模块，该模块可以将日志记录保持为关闭状态，并且可以放置在任何现有的入站流中。
向代理分配以下安全配置文件权限，以便他们可以使用 step-by-step指南：
+ **代理应用程序-自定义视图-全部**：此权限使代理能够在其代理工作区中查看 step-by-step指南。
向经理和业务分析师分配以下安全配置文件权限，以便他们可以创建 step-by-step指南：
+ **渠道和流程-视图**：此权限允许管理员创建 step-by-step指南。
有关如何为现有安全配置文件添加更多权限的信息，请参阅[在 Amazon Connect 中更新安全配置文件](update-security-profiles.md)。
### 此数据块生成的数据
在运行时，**显示视图**数据块生成的数据是视图资源运行时的输出。视图会生成两个主要数据：
+ `Action` 取自呈现的 View-UI（在座席工作区）和 `ViewResultData`（即 `Output` 数据）。
使用**显示视图**数据块时，**操作**代表一个分支，并设置为“视图”命名空间下的 `$.Views.Action` 联系人属性。
+ `Output` 数据设置为“视图”命名空间下的 `$.Views.ViewResultData` 联系人属性。
座席在使用视图资源期间与哪位座席交互，就会决定此组件的 `Action` 值和 `Output` 数据。
#### 如何在流的不同部分使用这些数据
+ 当模块收到来自客户端应用程序的响应时，在流中使用 ` `$.Views.Action` 和 `$.Views.ViewResultData` 引用输出数据。
+ 在使用带有**显示视图**数据块的视图时，`Action` 表示在“视图命名空间”下的联系人属性中被捕获为 `$.Views.Action` 且“视图输出”数据设置为 `$.Views.ViewResultData` 联系人属性的分支。
+ 您可以通过使用联系人属性中的 JSON 路径（您可以在“手动设置”或“设置 JSON”选项中指定联系人属性）或在选择**动态设置**时使用属性选择器下拉菜单来引用**显示视图**数据块生成的数据。
## 错误情形
**注意**
当 `ShowView` 数据块出现错误分支（不匹配、超时或错误）时，您可能希望将流路由回流中的前一个点。如果您在流中创建这样的循环，则联系流就可以无休止地执行，直到聊天联系超时。我们建议使用 `Loop` 联系流数据块来限制特定 `ShowView` 数据块的重试次数。
在以下情况中，联系人会被路由到**错误**分支：
+ Amazon Connect 无法捕获代理工作区中 View UI 组件上的用户操作。这可能是由于间歇性网络问题或媒体服务方面的问题。
## 流日志条目
在与客户互动时，Amazon Connect 流日志为您提供客户流中事件的实时详细信息。有关更多信息，请参阅 [使用流日志跟踪 Amazon Connect 流中的事件](about-contact-flow-logs.md)。
以下是示例 ShowView 输入（入口日志）
```
{
"ContactId": "string",
"ContactFlowId": "string",
"ContactFlowName": "string",
"ContactFlowModuleType": "ShowView",
"Timestamp": "2023-06-06T16:08:26.945Z",
"Parameters": {
"Parameters": {
"Cards": [
{
"Summary": {
"Id": "See",
"Heading": "See cancel options"
}
},
{
"Summary": {
"Id": "Change",
"Heading": "Change Booking"
}
},
{
"Summary": {
"Id": "Get",
"Heading": "Get Refund Status"
}
},
{
"Summary": {
"Id": "Manage",
"Heading": "Manage rewards"
}
}
],
"NoMatchFound": {
"Label": "Do Something Else",
"type": "bubble"
}
},
"TimeLimit": "300",
"ViewResourceId": "cards"
}
}
```
以下 ShowView 输出示例（出口日志）
```
{
"Results": "string",
"ContactId": "string",
"ContactFlowId": "string",
"ContactFlowName": "string",
"ContactFlowModuleType": "ShowView",
"Timestamp": "2023-06-06T16:08:35.201Z"
}
```
## 流示例
你可以在以下博客中下载步骤 2 中的示例流程：[ step-by-step指南入门](https://aws.amazon.com/blogs/contact-center/getting-started-with-step-by-step-guides-for-the-amazon-connect-agent-workspace/)。我们建议执行博客中的步骤，了解如何创建配置了 AWS托管的视图的流，以及如何为入站媒体联系人运行这些流。
## 更多资源
要了解有关 step-by-step指南和视图的更多信息，请参阅以下主题。
+ [Step-by-step 设置 Amazon Connect 代理工作空间的指南](step-by-step-guided-experiences.md)
+ 探索[如何在 Amazon Connect 聊天中收集敏感数据](https://aws.amazon.com/blogs/contact-center/collecting-sensitive-information-with-amazon-connect-chat/)。
+ 有关如何设置客户管理视图的 step-by-step说明，请参阅[客户管理](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/customer-managed-views-customer-managed-views--page)的视图。
+ 要在您的实例中设置 plug-and-play step-by-step指南体验，请参阅[ step-by-step指南入门](https://aws.amazon.com/blogs/contact-center/getting-started-with-step-by-step-guides-for-the-amazon-connect-agent-workspace/)。
+ [AWS 托管的视图：通用配置](https://d3irlmavjxd3d8.cloudfront.net/?path=/story/aws-managed-views-common-configuration--page)
+ [视图：用户界面组件](https://d3irlmavjxd3d8.cloudfront.net/?path=/story/ui-component-ui-components--page)
+ [查看*《Amazon Connect API 参考》*中的操作](https://docs.aws.amazon.com/connect/latest/APIReference/view-api.html)。