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

# 에이전트 Workspace의 사용자 지정 보기
<a name="view-resources-custom-view"></a>

API를 사용하여 나만의 보기 리소스를 만들 수 있습니다. 보기 리소스에는 CloudFormation, CloudTrail 및 태그 지정 지원이 포함됩니다.

## 보기 API 예제
<a name="view-resources-custom-view-example"></a>

**보기 설명**

이 보기는 컨테이너 안에 두 개의 카드를 중첩시키고 오른쪽에 건너뛰기 버튼을 배치합니다.

**CLI 명령**

```
aws connect create-view --name CustomerManagedCardsNoContainer \
--status PUBLISHED --content file://view-content.json \
--instance-id $INSTANCE_ID --region $REGION
```

**view-content.json**

```
{
  "Template": <stringified-template-json>
  "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"]
        }
    ]
}
```

## 보기
<a name="view-resources-custom-the-view"></a>

**입력**

`$.NoIconCardHeading`은 보기를 렌더링하는 데 `NoIconCardHeading` 필드에 입력값이 필요함을 나타냅니다.

`NoIconCardHeading`이 `No Icon Card`로 설정되어 있다고 가정해 보겠습니다.

**모양**

![\[에이전트 Workspace 보기 카드의 이미지.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/view-resources-custom-the-view.png)


## 보기 출력 예제
<a name="view-resources-custom-view-output-example"></a>

보기는 두 가지 주요 데이터, 수행한 `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"
}
```

## 양식 보기 출력 예시
<a name="view-resources-custom-form-view-output-example"></a>

**AWS 관리형 보기(양식 보기)**를 사용하는 경우 양식 데이터의 결과는 *FormData* 아래에 표시됩니다.

```
{
   FormData: {
       email: "a@amazon.com"
   }
}
```

`$.Views.ViewResultData.FormData.email`과 같은 표시 보기 블록에서 데이터에 액세스할 수 있습니다.

**사용자 지정 보기(양식 구성 요소 포함)**를 사용하는 경우 양식 데이터의 결과가 출력 바로 아래에 표시됩니다.

```
{
    email: "a@amazon.com"
}
```

`$.Views.ViewResultData.email`과 같은 표시 보기 블록에서 데이터에 액세스할 수 있습니다.