"Actions": ["CardSelected", "Skip"]
}
```
**範本 JSON (未字符串化)**
```
{
"Head": {
"Title": "CustomerManagedFormView",
"Configuration": {
"Layout": {
"Columns": ["10", "2"] // Default column width for each component is 12, which is also the width of the entire view.
}
}
},
"Body": [
{
"_id": "card-container",
"Type": "Container",
"Props": {},
"Content": [
{
"_id": "cafe_card",
"Type": "Card",
"Props": {
"Id": "cafe-card",
"Heading": "Cafe Card",
"Icon": "Cafe",
"Status": "Status Field",
"Description": "This is the cafe card.",
"Action": "CardSelected" // Note that these actions also appear in the view-content.json file.
},
"Content": []
},
{
"_id": "no_icon_card",
"Type": "Card",
"Props": {
"Id": "NoIconCard",
"Heading": "$.NoIconCardHeading",
"Status": "Status Field",
"Description": "This is the icon card.",
"Action": "CardSelected" // Note that these actions also appear in the view-content.json file.
},
"Content": []
}
]
},
{
"_id": "button",
"Type": "Button",
"Props": { "Action": "Skip" }, // Note that these actions also appear in the view-content.json file.
"Content": ["Skip"]
}
]
}
```
## 檢視
**輸入**
`$.NoIconCardHeading` 代表變更檢視時 `NoIconCardHeading` 欄位為必須輸入項目。
假設 `NoIconCardHeading` 設為 `No Icon Card`。
**外觀**
![\[客服人員工作區檢視卡片的影像。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/view-resources-custom-the-view.png)
## 檢視輸出範例
檢視輸出資料的兩個主要部分：獲取的 `Action` 和 `Output` 資料。
將檢視與[顯示檢視](https://docs.aws.amazon.com/connect/latest/adminguide/show-view-block.html)區塊一起使用時，`Action` 代表分支，並將 `Output` 資料設定為 `$.Views.ViewResultData` 流程屬性，如顯示檢視區塊文件中所述。
**情境 1：選擇**咖啡館卡片****
```
"Action": "CardSelected"
"Output": {
"Heading": "CafeCard",
"Id": "CafeCard"
}
```
**情境 2：選擇**略過**按鈕**
```
"Action": "Skip"
"Output": {
"action": "Button"
}
```
## 表單檢視輸出範例
使用 **AWS 管理的檢視 (表單檢視)** 時，表單資料結果會位於 *FormData* 下。
```
{
FormData: {
email: "a@amazon.com"
}
}
```
您可以存取顯示檢視區塊中的資料，例如 `$.Views.ViewResultData.FormData.email`。
使用**自訂檢視 (使用表單元件)** 時，表單資料結果會直接位於輸出下方。
```
{
email: "a@amazon.com"
}
```
您可以存取顯示檢視區塊中的資料，例如 `$.Views.ViewResultData.email`。
# 在 Amazon Connect 中設定客服人員工作區的 AWS 受管檢視
Amazon Connect 包含一組檢視，您可以新增客服人員的工作區。如需如何設定不同 AWS 受管檢視的詳細資訊，請參閱下列內容。
------
#### [ Detail view ]
**詳細資訊檢視**向客服人員顯示資訊，並提供他們可以採取的動作清單。**詳細資料檢視**的常見使用案例是在通話開始時向客服人員顯示螢幕彈出視窗。
+ 此檢視中的動作可以讓客服人員繼續逐步指南中的下一個步驟，或者可以使用這些動作來調用全新的工作流程。
+ **區段** 是唯一的必要元件。您可以在區段中配置要顯示給客服人員的頁面的主體。
+ 此檢視支援選用元件，例如**屬性列**。
**詳細檢視**的互動式[文件](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-detail--with-all)
下圖顯示**詳細檢視**的範例。擁有一個頁面標題、描述和四個範例。
![\[詳細檢視，包含頁面標題，描述和四個具有屬性的範例。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/details-view-page-heading-sq.png)
**章節**
+ 內容可以是靜態字串、範本字串或鍵值配對。可以是單一資料點或清單。如需更多詳細資訊，請參閱[範本字串](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#templatestring)或[屬性列](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute-section)區段。
**屬性列 (選用)**
+ 選用，如果有提供，將在檢視上方顯示屬性列。
+ 具有必要屬性、**標籤**、**值** 和選用屬性 **連結類型**、**資源 ID**、**可複製** 和 **URL** 的物件清單。如需更多詳細資訊，請參閱[屬性](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute)。
+ **連結類型** 可以是外部或連結的應用程式，例如案例。
+ 當是*外部*時，使用者可以導覽至一個新的瀏覽器頁面，該頁面使用 **URL** 設定。
+ 當是*案例*時，使用者可以在客服人員工作區上導覽至新案例詳細資訊，該案例使用資源 ID 設定。
+ **可複製**允許使用者透過您的輸入裝置進行選擇，以複製資源 ID。
**返回 (選用)**
+ 選用，但如果沒有包含任何動作，則為必填。如果提供，將顯示返回導覽連結。
+ 是具有*標籤*的物件，將控制連結文字中顯示的內容。
**標題 (選用)**
+ 選用，如果提供將顯示文字作為標題。
**描述 (選用)**
+ 選用，如果提供，將在標題下方顯示描述文字。
**動作 (選用)**
+ 選用。如果提供，將在頁面底部顯示動作清單。
**輸入範例**
```
{
"AttributeBar": [
{"Label": "Example", "Value": "Attribute"},
{ "Label": "Example 2", "Value": "Attribute 3", "LinkType": "case", "ResourceId": "123456", "Copyable": true }
],
"Back": {
"Label": "Back"
},
"Heading": "Hello world",
"Description": "This view is showing off the wonders of a detail page",
"Sections": [{
"TemplateString": "This is an intro paragraph"
}, "abc"],
"Actions": ["Do thing!", "Update thing 2!"],
}
```
**輸出範例**
```
{
Action: "ActionSelected",
ViewResultData: {
actionName: "Action 2"
}
}
```
------
#### [ List view ]
**清單檢視**用於將資訊顯示為包含標題和說明的項目清單。項目也可以作為帶有附加操作的連結。還可以選擇支持標準的返回導覽和持久性的內容標題。
**清單檢視**的互動式[文件](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-list--with-all)
下圖顯示清單檢視的範例。擁有一列，其中包含三個項目。
![\[清單檢視、一個含有連結的項目清單，以及兩個沒有連結的項目。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/list-view-column-sq.png)
**項目**
+ 必要，會以清單顯示這些項目。
+ 每個項目可能有一個標題、描述、圖示和 ID。
+ 所有屬性皆是選用。
+ 定義 Id 之後，輸出將包含該值作為輸出的一部分。
**屬性列 (選用)**
+ 選用，如果有提供，將在檢視上方顯示屬性列。
+ 具有必要屬性、**標籤**、**值** 和選用屬性 **連結類型**、**資源 ID**、**可複製** 和 **URL** 的物件清單。如需更多詳細資訊，請參閱[屬性](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute)。
+ **連結類型** 可以是外部或連結的應用程式，例如案例。
+ 當是*外部*時，使用者可以導覽至一個新的瀏覽器頁面，該頁面使用 **URL** 設定。
+ 當是*案例*時，使用者可以在客服人員工作區上導覽至新案例詳細資訊，該案例使用資源 ID 設定。
+ **可複製**允許使用者透過您的輸入裝置進行選擇，以複製資源 ID。
**返回 (選用)**
+ 選用，但如果沒有包含任何動作，則為必填。如果提供，將顯示返回導覽連結。
+ 是具有*標籤*的物件，將控制連結文字中顯示的內容。
**標題 (選用)**
+ 選用，如果提供將顯示文字作為標題。
**副標題 (選用)**
+ 選用，如果提供將顯示文字作為清單標題。
**輸入資料範例**
```
{
"AttributeBar": [
{ "Label": "Example", "Value": "Attribute" },
{ "Label": "Example 2", "Value": "Attribute 2" },
{ "Label": "Example 2", "Value": "Attribute 3", "LinkType": "external", "Url": "https://www.amzon.com" }
],
"Back": {
"Label": "Back"
},
"Heading": "José may be contacting about...",
"SubHeading": "Optional List Title",
"Items": [
{
"Heading": "List item with link",
"Description": "Optional description here with no characters limit. We can just wrap the text.",
"Icon": "School",
"Id": "Select_Car"
},
{
"Heading": "List item not a link",
"Icon": "School",
"Description": "Optional description here with no characters limit."
},
{
"Heading": "List item not a link and no image",
"Description": "Optional description here with no characters limit."
},
{
"Heading": "List item no image and with link",
"Description": "Optional description here with no characters limit."
}
]
}
```
**輸出資料範例**
```
{
Action: "ActionSelected",
ViewResultData: {
actionName: "Select_Car"
}
}
```
------
#### [ Form view ]
**表單檢視**允許您為客服人員提供輸入欄位，以收集所需的資料並將資料提交到後台系統。此檢視由預先定義的*區段*風格和標題的多個*區段*組成。主體包含排列在一列或網格佈局格式的各種輸入欄位。
**表單檢視**的互動式[文件](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-form--with-all)
下圖顯示租車預約的表單檢視範例。其擁有位置和日期欄位。
![\[以位置和日期欄位作為範例的表單檢視。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/form-view-sq.png)
**章節**
+ **表單檢視**中的位置，也就是輸入欄位和顯示欄位的位置。
+ **區段屬性**
+ **標題**
+ 章節的標題
+ **類型**
+ 區段類型
+ 表單區段 (處理使用者輸入的表單) 或資料區段 (顯示標籤和值的清單)
+ **項目**
+ 基於類型的資料清單。如果 `Type` 是 `DataSection`，則資料應該是屬性。如果 `Type` 是 `FormSection`，則資料應該是表單元件。
+ **可編輯**
+ 當區段類型為時 `DataSection`，在標題處顯示編輯按鈕。
+ Boolean
**精靈 (選用)**
+ 在檢視的左側顯示**進度追蹤器**。
+ 每個項目可以有一個標題、描述和選項。
+ 標題是必需的
**返回 (選用)**
+ 是具有標籤的物件或字串，將控制連結文字中顯示的內容。
**下一步 (選用)**
+ 當步驟不是最後一個步驟時，會使用此動作。
+ 這是一個物件 (FormActionProps) 或字串。如需更多詳細資訊，請參閱 [FormActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps)。
**取消 (選用)**
+ 當步驟不是第一個步驟時，會使用此動作。
+ 這是一個物件 (FormActionProps) 或字串。如需更多詳細資訊，請參閱 [FormActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps)。
**上一步 (選用)**
+ 當步驟不是第一個步驟時，會使用此動作。
+ 這是一個物件 (FormActionProps) 或字串。如需更多詳細資訊，請參閱 [FormActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps)。
**編輯 (選用)**
+ 當章節類型是 `DataSection` 時，會顯示此動作。
+ 這是一個物件 (FormActionProps) 或字串。如需更多詳細資訊，請參閱 [FormActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps)。
**屬性列 (選用)**
+ 選用，如果有提供，將在檢視上方顯示屬性列。
+ 具有必要屬性、**標籤**、**值** 和選用屬性 **連結類型**、**資源 ID**、**可複製** 和 **URL** 的物件清單。如需更多詳細資訊，請參閱[屬性](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute)。
+ **連結類型** 可以是外部或連結的應用程式，例如案例。
+ 當是*外部*時，使用者可以導覽至一個新的瀏覽器頁面，該頁面使用 **URL** 設定。
+ 當是*案例*時，使用者可以在客服人員工作區上導覽至新案例詳細資訊，該案例使用資源 ID 設定。
+ **可複製**允許使用者透過您的輸入裝置進行選擇，以複製資源 ID。
**標題 (選用)**
+ 顯示頁面標題的字串。
**副標題 (選用)**
+ 頁面的次要訊息。
**錯誤文字 (選用)**
+ 選用，顯示伺服器端的錯誤訊息。
+ ErrorProps：字串
**輸入資料範例**
```
{
"AttributeBar": [{
"Label": "Queue",
"Value": "Sales"
},
{
"Label": "Case ID",
"Value": "1234567"
},
{
"Label": "Case",
"Value": "New reservation"
},
{
"Label": "Attribute 3",
"Value": "Attribute"
}
],
"Back": {
"Label": "Back Home"
},
"Next": {
"Label": "Confirm Reservation",
"Details": {
"endpoint": "awesomecustomer.com/submit",
}
},
"Cancel": {
"Label": "Cancel"
},
"Heading": "Modify Reservation",
"SubHeading": "Cadillac XT5",
"ErrorText": {
"Header": "Modify reservation failed",
"Content": "Internal Server Error, please try again"
},
"Sections": [{
"_id": "pickup",
"Type": "FormSection",
"Heading": "Pickup Details",
"Items": [{
"LayoutConfiguration": {
"Grid": [{
"colspan": {
"default": "12",
"xs": "6"
}
}]
},
"Items": [{
"Type": "FormInput",
"Fluid": true,
"InputType": "text",
"Label": "Location",
"Name": "pickup-location",
"DefaultValue": "Seattle"
}]
}, {
"LayoutConfiguration": {
"Grid": [{
"colspan": {
"default": "6",
"xs": "4"
}
}, {
"colspan": {
"default": "6",
"xs": "4"
}
}]
},
"Items": [{
"Label": "Day",
"Type": "DatePicker",
"Fluid": true,
"DefaultValue": "2022-10-10",
"Name": "pickup-day"
}, {
"Label": "Time",
"Type": "TimeInput",
"Fluid": true,
"DefaultValue": "13:00",
"Name": "pickup-time"
}]
}]
}, {
"_id": "dropoff",
"Heading": "Drop off details",
"Type": "FormSection",
"Items": [{
"LayoutConfiguration": {
"Grid": [{
"colspan": {
"default": "12",
"xs": "6"
}
}]
},
"Items": [{
"Label": "Location",
"Type": "FormInput",
"Fluid": true,
"DefaultValue": "Lynnwood",
"Name": "dropoff-location"
}]
}, {
"LayoutConfiguration": {
"Grid": [{
"colspan": {
"default": "6",
"xs": "4"
}
}, {
"colspan": {
"default": "6",
"xs": "4"
}
}]
},
"Items": [{
"Label": "Day",
"Type": "DatePicker",
"Fluid": true,
"DefaultValue": "2022-10-15",
"Name": "dropoff-day"
}, {
"Label": "Time",
"Type": "TimeInput",
"Fluid": true,
"DefaultValue": "01:00",
"Name": "dropoff-time"
}]
}]
}]
}
```
**輸出資料範例**
```
{
Action: "Submit",
ViewResultData: {
FormData: {
"dropoff-day": "2022-10-15",
"dropoff-location": "Lynnwood",
"dropoff-time": "01:00",
"pickup-day": "2022-10-10",
"pickup-location": "Seattle",
"pickup-time": "13:00"
},
StepName:"Pickup and drop off"
}
}
```
------
#### [ Confirmation view ]
**確認檢視**是在提交表單或動作完成後向使用者顯示的頁面。在此預先建置的範本中，您可以提供發生的事情、任何下一個步驟和提示的摘要。**確認檢視**支援持續性的屬性列、圖示/影像、標題和子標題，以及返回首頁導覽按鈕。
**確認檢視**的互動式[文件](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-confirmation--with-all)
下圖顯示組態索引標籤的範例。
![\[確認檢視，用於確認租車的核取記號和文字。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/confirmation-view-check-sq.png)
**下一頁**
+ 必要.
+ 下一個動作按鈕
+ 標籤 – 導覽按鈕的字串標籤。
**屬性列 (選用)**
+ 選用，如果有提供，將在檢視上方顯示屬性列。
+ 具有必要屬性、**標籤**、**值** 和選用屬性 **連結類型**、**資源 ID**、**可複製** 和 **URL** 的物件清單。如需更多詳細資訊，請參閱[屬性](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute)。
+ **連結類型** 可以是外部或連結的應用程式，例如案例。
+ 當是*外部*時，使用者可以導覽至一個新的瀏覽器頁面，該頁面使用 **URL** 設定。
+ 當是*案例*時，使用者可以在客服人員工作區上導覽至新案例詳細資訊，該案例使用資源 ID 設定。
+ **可複製**允許使用者透過您的輸入裝置進行選擇，以複製資源 ID。
**標題 (選用)**
+ 顯示頁面標題的字串。
**副標題 (選用)**
+ 頁面的次要訊息。
**圖形 (選用)**
+ 顯示影像
+ 具有以下鍵的物件：
+ 包括 – 布林值，如果這是真的，則圖形將被包括在頁面中。
**輸入資料範例**
```
{
"AttributeBar": [
{ "Label": "Attribute1", "Value": "Value1" },
{ "Label": "Attribute2", "Value": "Value2" },
{ "Label": "Attribute3", "Value": "Amazon", "LinkType": "external", "Url": "https://www.amzon.com" }
],
"Next": {
"Label": "Go Home"
},
"Graphic": {
"Include": true
},
"Heading": "I have updated your car rental reservation for pickup on July 22.",
"SubHeading": "You will be receiving a confirmation shortly. Is there anything else I can help with today?",
}
```
**輸出資料範例**
```
{
"Action": "Next",
"ViewResultData": {
"Label": "Go Home"
}
}
```
------
#### [ Cards view ]
**卡片檢視**可讓您在客服人員接受聯絡後，立即提供可供選擇的主題清單，藉此引導聯絡。
**卡片檢視**的互動式[文件](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-cards--with-all)
*向您的客服人員展示卡片。*下圖顯示向客服人員提供的六張卡片範例：一張用建立新的預約，另一張用於查看即將到來的行程預訂。
![\[一組六張卡片。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/solve-view-sq.png)
*當客服人員選擇卡片時，會顯示更多資訊。*下圖顯示開啟的卡片，其顯示預約的詳細資訊。
![\[開啟的卡片顯示預約詳細資訊。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/card-view-sq.png)
**章節**
+ 具有摘要和詳細資訊的物件清單。建立卡片和詳細資訊時必須提供。
+ 由摘要和詳細資訊組成。如需更多詳細資訊，請參閱[摘要和詳細資訊](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-cards--with-all)。
**屬性列 (選用)**
+ 選用，如果有提供，將在檢視上方顯示屬性列。
+ 具有必要屬性、**標籤**、**值** 和選用屬性 **連結類型**、**資源 ID**、**可複製** 和 **URL** 的物件清單。如需更多詳細資訊，請參閱[屬性](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute)。
+ **連結類型** 可以是外部或連結的應用程式，例如案例。
+ 當是*外部*時，使用者可以導覽至一個新的瀏覽器頁面，該頁面使用 **URL** 設定。
+ 當是*案例*時，使用者可以在客服人員工作區上導覽至新案例詳細資訊，該案例使用資源 ID 設定。
+ **可複製**允許使用者透過您的輸入裝置進行選擇，以複製資源 ID。
**標題 (選用)**
+ 顯示頁面標題的字串
**返回 (選用)**
+ 是具有標籤的物件或字串，將控制連結文字中顯示的內容。如需更多詳細資訊，請參閱 [ActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps)。
**找不到相符項目 (選用)**
+ 是一個字串，顯示在卡下片面的按鈕。如需更多詳細資訊，請參閱 [ActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps)。
**輸入資料範例**
```
{
"AttributeBar": [{
"Label": "Queue",
"Value": "Sales"
},
{
"Label": "Case ID",
"Value": "1234567"
},
{
"Label": "Case",
"Value": "New reservation"
},
{
"Label": "Attribute 3",
"Value": "Attribute"
}
],
"Back": {
"Label": "Back"
},
"Heading": "Customer may be contacting about...",
"Cards": [{
"Summary": {
"Id": "lost_luggage",
"Icon": "plus",
"Heading": "Lost luggage claim"
},
"Detail": {
"Heading": "Lost luggage claim",
"Description": "Use this flow for customers that have lost their luggage and need to fill a claim in order to get reimbursement. This workflow usually takes 5-8 minutes",
"Sections": {
"TemplateString": "Steps:- Customer provides incident information
- Customer provides receipts and agrees with amount
- Customer receives reimbursement
"
},
"Actions": [
"Start a new claim",
"Something else"
]
}
},
{
"Summary": {
"Id": "car_rental",
"Icon": "Car Side View",
"Heading": "Car rental - New York",
"Status": "Upcoming Sept 17, 2022"
},
"Detail": {
"Heading": "Car rental - New York",
"Sections": {
"TemplateString": "There is no additional information
"
}
}
},
{
"Summary": {
"Id": "trip_reservation",
"Icon": "Suitcase",
"Heading": "Trip to Mexico",
"Status": "Upcoming Aug 15, 2022",
"Description": "Flying from New York to Cancun, Mexico"
},
"Detail": {
"Heading": "Trip to Mexico",
"Sections": {
"TemplateString": "There is no additional information
"
}
}
},
{
"Summary": {
"Id": "fligh_reservation",
"Icon": "Airplane",
"Heading": "Flight to France",
"Status": "Upcoming Dec 5, 2022",
"Description": "Flying from Miami to Paris, France"
},
"Detail": {
"Heading": "Flight to France",
"Sections": {
"TemplateString": "There is no additional information
"
}
}
},
{
"Summary": {
"Id": "flight_refund",
"Icon": "Wallet Closed",
"Heading": "Refund flight to Atlanta",
"Status": "Refunded July 10, 2022"
},
"Detail": {
"Heading": "Refund trip to Atlanta",
"Sections": {
"TemplateString": "There is no additional information
"
}
}
},
{
"Summary": {
"Id": "book_experience",
"Icon": "Hot Air Balloon",
"Heading": "Book an experience",
"Description": "Top experience for european travellers"
},
"Detail": {
"Heading": "Book an experience",
"Sections": {
"TemplateString": "There is no additional information
"
}
}
}],
"NoMatchFound": {
"Label": "Can't find match?"
}
}
```
**輸出資料範例**
```
{
Action: "ActionSelected",
ViewResultData: {
actionName: "Update the trip"
}
}
```
------
# 使用 HTML 和 JSX，來自訂 Amazon Connect 客服人員工作區的檢視
您可以自訂視圖資源配置的外觀和體驗。當您將輸入參數傳遞給 [顯示檢視](show-view-block.md) 區塊時，您可以利用 HTML 或 JSX 來執行此操作。
請完成下列步驟，以取得簡單範例，了解如何搭配使用 HTML 或 JSX 和 [顯示檢視](show-view-block.md) 區塊。
1. 透過 [顯示檢視](show-view-block.md) 區塊建立流程。
1. 開啟 [顯示檢視](show-view-block.md) 區塊的屬性頁面。
1. 在**檢視**下，從下拉式清單中選取**詳細資訊**。
1. 在**章節**區段中，選擇**設定 JSON**。
1. 複製貼上以下 JSON 程式碼。此程式碼會顯示 HTML 或 JSX 表達式的處理方式。
**HTML 範例**
```
{
"TemplateString":
"Steps:- Customer provides incident information
- Customer provides receipts and agrees with
amount
- Customer receives reimbursement
"
}
```
**JSX 範例**
```
{
"TemplateString":
"Please provide an introduction to the customers. Ask them how their day is going
Things to say:
Hello, how are you today? My name is Bob, who am I speaking to?"
}
```