Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

# Tampilan khusus di ruang kerja agen Amazon Connect
<a name="view-resources-custom-view"></a>

Menggunakan APIs Anda dapat membuat sumber daya tampilan Anda sendiri. Sumber daya View mencakup CloudFormation, CloudTrail, dan dukungan penandaan.

## Contoh tampilan API
<a name="view-resources-custom-view-example"></a>

**Lihat deskripsi**

Tampilan ini bersarang dua kartu di dalam wadah, dan menempatkan tombol lewati di sebelah kanannya. 

**Perintah 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"]
}
```

**Template JSON (tidak dirangkai)**

```
{
    "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"]
        }
    ]
}
```

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

**Masukan**

`$.NoIconCardHeading`menunjukkan bahwa input untuk bidang `NoIconCardHeading` diperlukan untuk membuat tampilan.

Katakanlah `NoIconCardHeading` diatur ke`No Icon Card`.

**Penampilan**

![\[Gambar kartu tampilan ruang kerja agen.\]](http://docs.aws.amazon.com/id_id/connect/latest/adminguide/images/view-resources-custom-the-view.png)


## Lihat contoh keluaran
<a name="view-resources-custom-view-output-example"></a>

Tampilan menghasilkan dua bagian utama data: yang `Action` diambil, dan `Output` data.

Saat menggunakan tampilan dengan [blok Tampilkan tampilan](https://docs.aws.amazon.com/connect/latest/adminguide/show-view-block.html), `Action` mewakili cabang, dan `Output` data diatur ke atribut `$.Views.ViewResultData` flow, seperti yang disebutkan dalam dokumentasi blok Tampilkan Tampilan.

**Skenario 1: Pilih **Kartu Kartu Cafe****

```
"Action": "CardSelected"
"Output": {
    "Heading": "CafeCard",
    "Id": "CafeCard"
}
```

**Skenario 2: Pilih Tombol **Lewati****

```
"Action": "Skip"
"Output": {
    "action": "Button"
}
```

## Contoh keluaran Tampilan Formulir
<a name="view-resources-custom-form-view-output-example"></a>

Saat menggunakan tampilan yang **dikelola AWS (tampilan Formulir)**, hasil data formulir akan berada di bawah. *FormData*

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

Anda dapat mengakses data di blok tampilan tampilan seperti`$.Views.ViewResultData.FormData.email`.

Saat menggunakan **tampilan Kustom (dengan komponen formulir)**, hasil data formulir langsung berada di bawah output.

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

Anda dapat mengakses data di blok tampilan tampilan seperti`$.Views.ViewResultData.email`.