

기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

# Amazon Connect에서 에이전트의 워크스페이스에 대한 AWS 관리형 뷰 설정
<a name="view-resources-managed-view"></a>

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": "<TextContent>Steps:<ol><li>Customer provides incident information</li><li>Customer provides receipts and agrees with amount</li><li>Customer receives reimbursement</li></ol></TextContent>"
                },
                "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": "<p>There is no additional information</p>"
                }
              }
            },
            {
              "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": "<p>There is no additional information</p>"
                }
              }
            },
            {
              "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": "<p>There is no additional information</p>"
                }
              }
            },
            {
              "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": "<p>There is no additional information</p>"
                }
              }
            },
            {
              "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": "<p>There is no additional information</p>"
                }
              }
            }],
    "NoMatchFound": {
        "Label": "Can't find match?"
    }

}
```

**출력 데이터 예제**

```
{
    Action: "ActionSelected",
    ViewResultData: {
        actionName: "Update the trip"
    }
}
```

------