기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다. # 보기: Amazon Connect에서 에이전트의 워크스페이스를 사용자 지정하기 위한 UI 템플릿 **보기는 에이전트의 Workspace를 사용자 지정하는 데 사용할 수 있는 UI 템플릿입니다. 예를 들어 보기를 사용하여 에이전트에게 고객 응대 속성을 표시하고, 처리 코드를 입력할 수 있는 양식을 제공하고, 통화 메모를 제공하고, 단계별 가이드를 통해 에이전트에게 설명을 제공하기 위한 UI 페이지를 표시할 수 있습니다. Amazon Connect에는 에이전트의 워크스페이스에 추가할 수 있는 보기 집합이 포함되어 있으며, 퍼블릭 API를 사용하여 나만의 보기를 만들 수도 있습니다. [보기 표시](show-view-block.md) 블록을 사용하여 흐름에서 보기를 구성할 때 각 보기에 대해 정적 및 동적 콘텐츠를 모두 정의할 수 있습니다. 특정 보기의 콘텐츠는 템플릿, 입력 스키마 및 작업의 세 가지 핵심 요소로 구성됩니다. **작은 정보** 최상의 데이터 매핑 환경을 위해 [보기 표시](show-view-block.md) 블록에서 **JSON 설정** 옵션을 사용하는 것이 좋습니다. **보기 표시** 블록에서 `$.External`을 포함하여 흐름의 모든 네임스페이스를 참조할 수 있으므로 어떤 보기를 만들든 외부 시스템에서 에이전트에게 데이터를 공유할 수 있습니다. Amazon Connect 및 기타 소스의 데이터를 조합하여 에이전트를 위한 통합 UI를 만들 수 있습니다. # 에이전트 Workspace의 사용자 지정 보기 API를 사용하여 나만의 보기 리소스를 만들 수 있습니다. 보기 리소스에는 CloudFormation, CloudTrail 및 태그 지정 지원이 포함됩니다. ## 보기 API 예제 **보기 설명** 이 보기는 컨테이너 안에 두 개의 카드를 중첩시키고 오른쪽에 건너뛰기 버튼을 배치합니다. **CLI 명령** ``` aws connect create-view --name CustomerManagedCardsNoContainer \ --status PUBLISHED --content file://view-content.json \ --instance-id $INSTANCE_ID --region $REGION ``` **view-content.json** ``` { "Template": "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`로 설정되어 있다고 가정해 보겠습니다. **모양** ![\[에이전트 Workspace 보기 카드의 이미지.\]](http://docs.aws.amazon.com/ko_kr/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 ] **세부 정보 보기**는 에이전트에게 정보를 표시하고 에이전트가 취할 수 있는 작업 목록을 제공합니다. **세부 정보 보기**의 일반적인 사용 사례는 통화가 시작될 때 에이전트에게 화면 팝을 표시하는 것입니다. + 이 보기의 작업을 사용하여 에이전트가 단계별 가이드의 다음 단계로 넘어가도록 하거나 완전히 새로운 워크플로를 호출할 수 있습니다. + **Sections**는 유일한 필수 구성 요소입니다. 에이전트에게 표시할 페이지의 본문을 구성할 수 있는 곳입니다. + 이 보기에서는 **AttributeBar**와 같은 선택적 구성 요소도 지원됩니다. **세부 정보 보기**의 대화형 [설명서](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-detail--with-all) 다음은 **세부 정보 보기**의 예를 보여 주는 이미지입니다. 여기에는 페이지 제목, 설명 및 네 가지 예가 있습니다. ![\[페이지 제목, 설명 및 속성이 있는 네 가지 예가 포함된 세부 정보 보기.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/details-view-page-heading-sq.png) **Sections** + 콘텐츠는 정적 문자열, 템플릿 문자열 또는 키-값 쌍일 수 있습니다. 단일 데이터 포인트 또는 목록일 수 있습니다. 자세한 내용은 [TemplateString](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#templatestring) 또는 [AtrributeSection](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute-section)을 참조하세요. **AttributeBar(선택 사항)** + 선택 사항으로, 제공된 경우 보기 상단에 Attribute 막대가 표시됩니다. + 필수 속성인 **Label**, **Value**와 선택 속성인 **LinkType**, **ResourceId**, **Copyable** 및 **Url**이 있는 객체 목록입니다. 자세한 내용은 [Attribute](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute)를 참조하세요. + **LinkType**은 외부이거나 연결 애플리케이션(예: 사례)일 수 있습니다. + **외부인 경우 사용자는 **Url**로 구성된 새 브라우저 페이지로 이동할 수 있습니다. + **사례인 경우 사용자는 ResourceId로 구성된 에이전트 Workspace의 새 사례 세부 정보로 이동할 수 있습니다. + **Copyable**을 선택하면 사용자가 입력 디바이스로 ResourceId를 선택하여 복사할 수 있습니다. **Back(선택 사항)** + 선택 사항이지만 포함된 작업이 없는 경우 필수 사항입니다. 제공된 경우 뒤로 탐색 링크가 표시합니다. + 링크 텍스트에 표시되는 내용을 제어하는 **Label이 있는 객체입니다. **Heading(선택 사항)** + 선택 사항으로, 제공된 경우 텍스트가 제목으로 표시됩니다. **Description(선택 사항)** + 선택 사항으로, 제공된 경우 제목 아래에 설명 텍스트가 표시됩니다. **Actions(선택 사항)** + 선택 사항으로, 제공된 경우 페이지 하단에 작업 목록이 표시됩니다. **입력 예제** ``` { "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) 다음은 목록 보기의 예를 보여 주는 이미지입니다. 하나의 열에 세 개의 항목이 있습니다. ![\[링크가 있는 목록 항목 1개와 링크가 없는 항목 2개가 있는 목록 보기입니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/list-view-column-sq.png) **Items** + 필수 사항으로, 이러한 항목은 리스트로 표시됩니다. + 각 항목에는 제목, 설명, 아이콘 및 ID가 있을 수 있습니다. + 모든 속성은 선택 사항입니다. + ID를 정의하면 출력에 해당 값이 출력의 일부로 포함됩니다. **AttributeBar(선택 사항)** + 선택 사항으로, 제공된 경우 보기 상단에 Attribute 막대가 표시됩니다. + 필수 속성인 **Label**, **Value**와 선택 속성인 **LinkType**, **ResourceId**, **Copyable** 및 **Url**이 있는 객체 목록입니다. 자세한 내용은 [Attribute](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute)를 참조하세요. + **LinkType**은 외부이거나 연결 애플리케이션(예: 사례)일 수 있습니다. + **외부인 경우 사용자는 **Url**로 구성된 새 브라우저 페이지로 이동할 수 있습니다. + **사례인 경우 사용자는 ResourceId로 구성된 에이전트 Workspace의 새 사례 세부 정보로 이동할 수 있습니다. + **Copyable**을 선택하면 사용자가 입력 디바이스로 ResourceId를 선택하여 복사할 수 있습니다. **Back(선택 사항)** + 선택 사항이지만 포함된 작업이 없는 경우 필수 사항입니다. 제공된 경우 뒤로 탐색 링크가 표시합니다. + 링크 텍스트에 표시되는 내용을 제어하는 **Label이 있는 객체입니다. **Heading(선택 사항)** + 선택 사항으로, 제공된 경우 텍스트가 제목으로 표시됩니다. **SubHeading(선택 사항)** + 선택 사항으로, 제공된 경우 텍스트가 목록 제목으로 표시됩니다. **입력 데이터 예제** ``` { "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/ko_kr/connect/latest/adminguide/images/form-view-sq.png) **Sections** + 입력 필드 및 표시 필드가 있는 **양식 보기**의 위치입니다. + **SectionProps** + **Heading** + 섹션의 제목 + **Type** + 섹션의 유형 + FormSection(사용자의 입력을 처리하는 양식) 또는 DataSection(레이블 및 값 목록 표시) + **Items** + 유형에 따른 데이터 목록입니다. `Type`이 `DataSection`인 경우 데이터는 속성이어야 합니다. `Type`이 `FormSection`인 경우 데이터는 양식 구성 요소여야 합니다. + **편집 가능** + 섹션 유형이 `DataSection`일 때 제공되면 헤더에 편집 버튼이 표시됩니다. + 부울 **Wizard(선택 사항)** + 보기의 왼쪽에 **ProgressTracker**가 표시됩니다. + 각 항목에는 제목, 설명 및 선택 사항이 있을 수 있습니다. + 제목은 필수 사항입니다. **Back(선택 사항)** + 링크 텍스트에 표시되는 내용을 제어하는 Label이 있는 객체 또는 문자열입니다. **Next(선택 사항)** + 이 작업은 해당 단계가 단계의 마지막 단계가 아닐 때 사용됩니다. + 객체(FormActionProps) 또는 문자열입니다. 자세한 내용은 [FormActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps)를 참조하세요. **Cancel(선택 사항)** + 이 작업은 해당 단계가 첫 단계가 아닐 때 사용됩니다. + 객체(FormActionProps) 또는 문자열입니다. 자세한 내용은 [FormActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps)를 참조하세요. **Previous(선택 사항)** + 이 작업은 해당 단계가 첫 단계가 아닐 때 사용됩니다. + 객체(FormActionProps) 또는 문자열입니다. 자세한 내용은 [FormActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps)를 참조하세요. **Edit(선택 사항)** + 이 작업은 섹션 유형이 `DataSection`일 때 표시됩니다. + 객체(FormActionProps) 또는 문자열입니다. 자세한 내용은 [FormActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps)를 참조하세요. **AttributeBar(선택 사항)** + 선택 사항으로, 제공된 경우 보기 상단에 Attribute 막대가 표시됩니다. + 필수 속성인 **Label**, **Value**와 선택 속성인 **LinkType**, **ResourceId**, **Copyable** 및 **Url**이 있는 객체 목록입니다. 자세한 내용은 [Attribute](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute)를 참조하세요. + **LinkType**은 외부이거나 연결 애플리케이션(예: 사례)일 수 있습니다. + **외부인 경우 사용자는 **Url**로 구성된 새 브라우저 페이지로 이동할 수 있습니다. + **사례인 경우 사용자는 ResourceId로 구성된 에이전트 Workspace의 새 사례 세부 정보로 이동할 수 있습니다. + **Copyable**을 선택하면 사용자가 입력 디바이스로 ResourceId를 선택하여 복사할 수 있습니다. **Heading(선택 사항)** + 페이지 제목으로 표시되는 문자열입니다. **SubHeading(선택 사항)** + 페이지의 보조 메시지입니다. **ErrorText(선택 사항)** + 선택 사항으로, 서버 측 오류 메시지가 표시됩니다. + ErrorProps, String **입력 데이터 예제** ``` { "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/ko_kr/connect/latest/adminguide/images/confirmation-view-check-sq.png) **Next** + 필수 사항입니다. + 다음을 위한 작업 버튼 + Label - 탐색 버튼의 문자열 레이블입니다. **AttributeBar(선택 사항)** + 선택 사항으로, 제공된 경우 보기 상단에 Attribute 막대가 표시됩니다. + 필수 속성인 **Label**, **Value**와 선택 속성인 **LinkType**, **ResourceId**, **Copyable** 및 **Url**이 있는 객체 목록입니다. 자세한 내용은 [Attribute](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute)를 참조하세요. + **LinkType**은 외부이거나 연결 애플리케이션(예: 사례)일 수 있습니다. + **외부인 경우 사용자는 **Url**로 구성된 새 브라우저 페이지로 이동할 수 있습니다. + **사례인 경우 사용자는 ResourceId로 구성된 에이전트 Workspace의 새 사례 세부 정보로 이동할 수 있습니다. + **Copyable**을 선택하면 사용자가 입력 디바이스로 ResourceId를 선택하여 복사할 수 있습니다. **Heading(선택 사항)** + 페이지 제목으로 표시되는 문자열입니다. **SubHeading(선택 사항)** + 페이지의 보조 메시지입니다. **Graphic(선택 사항)** + 이미지 표시 + 다음 키가 있는 객체: + 포함 - 부울, true이면 그래픽이 페이지에 포함됩니다. **입력 데이터 예제** ``` { "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) **에이전트에게 카드를 표시합니다. 다음은 새 예약을 위한 카드와 예정된 여행의 예약을 검토하기 위한 카드 등 에이전트에게 제시되는 6가지 카드의 예를 보여 주는 이미지입니다. ![\[6장의 카드 세트입니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/solve-view-sq.png) **에이전트가 카드를 선택하면 더 많은 정보가 표시됩니다. 다음은 예약 세부 정보를 표시하는 열린 카드를 보여 주는 이미지입니다. ![\[예약 세부 정보가 표시된 열린 카드입니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/card-view-sq.png) **Sections** + 요약 및 세부 정보가 있는 객체 목록입니다. 카드 및 세부 정보를 생성하려면 이 정보가 제공되어야 합니다. + 요약 및 세부 정보로 구성됩니다. 자세한 내용은 [요약 및 세부 정보](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-cards--with-all)를 참조하세요. **AttributeBar(선택 사항)** + 선택 사항으로, 제공된 경우 보기 상단에 Attribute 막대가 표시됩니다. + 필수 속성인 **Label**, **Value**와 선택 속성인 **LinkType**, **ResourceId**, **Copyable** 및 **Url**이 있는 객체 목록입니다. 자세한 내용은 [Attribute](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute)를 참조하세요. + **LinkType**은 외부이거나 연결 애플리케이션(예: 사례)일 수 있습니다. + **외부인 경우 사용자는 **Url**로 구성된 새 브라우저 페이지로 이동할 수 있습니다. + **사례인 경우 사용자는 ResourceId로 구성된 에이전트 Workspace의 새 사례 세부 정보로 이동할 수 있습니다. + **Copyable**을 선택하면 사용자가 입력 디바이스로 ResourceId를 선택하여 복사할 수 있습니다. **Heading(선택 사항)** + 페이지 제목으로 표시되는 문자열 **Back(선택 사항)** + 링크 텍스트에 표시되는 내용을 제어하는 Label이 있는 객체 또는 문자열입니다. 자세한 내용은 [ActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps)를 참조하세요. **NoMatchFound(선택 사항)** + 카드 아래에 있는 버튼에 표시되는 문자열입니다. 자세한 내용은 [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:
  1. Customer provides incident information
  2. Customer provides receipts and agrees with amount
  3. 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 에이전트 Workspace에 대한 보기 사용자 지정 보기 리소스 레이아웃의 모양과 느낌을 사용자 지정할 수 있습니다. 입력 파라미터를 [보기 표시](show-view-block.md) 블록에 전달할 때 HTML 또는 JSX를 활용하여 이 작업을 수행할 수 있습니다. [보기 표시](show-view-block.md) 블록에서 HTML 또는 JSX를 활용하는 방법의 간단한 예를 보려면 다음 단계를 완료하세요. 1. [보기 표시](show-view-block.md) 블록을 사용하여 흐름을 생성합니다. 1. [보기 표시](show-view-block.md) 블록의 속성 페이지를 엽니다. 1. **보기**의 드롭다운 목록에서 **세부 정보**를 선택합니다. 1. **섹션** 섹션에서 **JSON 설정**을 선택합니다. 1. 다음 JSON 코드를 복사하여 붙여 넣습니다. 이 코드는 HTML 또는 JSX 표현식이 처리되는 방법을 보여 줍니다. **HTML 예제** ``` { "TemplateString": "Steps:
  1. Customer provides incident information
  2. Customer provides receipts and agrees with amount
  3. 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?" } ```