Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

# Benutzerdefinierte Ansichten im Workspace für Amazon-Connect-Kundendienstmitarbeiter
<a name="view-resources-custom-view"></a>

Mithilfe können APIs Sie Ihre eigenen View-Ressourcen erstellen. Die View-Ressource umfasst Unterstützung für CloudFormation CloudTrail, und Tagging.

## API-Beispiel für Ansichten
<a name="view-resources-custom-view-example"></a>

**Ansichtsbeschreibung**

In dieser Ansicht werden zwei Karten in einem Container geschachtelt. Rechts davon wird eine Schaltfläche zum Überspringen platziert. 

**CLI-Befehl**

```
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 aus Vorlage (nicht stringifiziert)**

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

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

**Eingaben**

`$.NoIconCardHeading` gibt an, dass eine Eingabe für das Feld `NoIconCardHeading` erforderlich ist, um die Ansicht zu rendern.

Nehmen wir an, `NoIconCardHeading` ist auf `No Icon Card` festgelegt.

**Darstellung**

![\[Bild der Ansichtskarte für den Arbeitsbereich von Kundendienstmitarbeitern\]](http://docs.aws.amazon.com/de_de/connect/latest/adminguide/images/view-resources-custom-the-view.png)


## Beispiel für Ansichtsausgabe
<a name="view-resources-custom-view-output-example"></a>

Ansichten geben zwei Hauptdatentypen aus: die unternommene `Action` und die `Output`-Daten.

Wenn Sie eine Ansicht mit dem Block [Ansicht anzeigen](https://docs.aws.amazon.com/connect/latest/adminguide/show-view-block.html) verwenden, stellt `Action` eine Verzweigung dar und `Output`-Daten werden auf das Flowattribut `$.Views.ViewResultData` festgelegt, wie in der Dokumentation zum Block „Ansicht anzeigen“ beschrieben.

**Szenario 1: Auswählen der **Cafékarte****

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

**Szenario 2: Auswählen der Schaltfläche **Überspringen****

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

## Beispiel für die Ausgabe einer Formularansicht
<a name="view-resources-custom-form-view-output-example"></a>

Wenn Sie die **AWS-verwaltete Ansicht (Formularansicht)** verwenden, wird das Ergebnis der Formulardaten unter. *FormData*

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

Sie können auf die Daten im Block „Ansicht anzeigen“ zugreifen, z. B. `$.Views.ViewResultData.FormData.email`.

Wenn Sie die **benutzerdefinierte Ansicht (mit Formularkomponente)** verwenden, wird das Ergebnis der Formulardaten direkt unter Ausgabe angezeigt.

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

Sie können auf die Daten im Block „Ansicht anzeigen“ zugreifen, z. B. `$.Views.ViewResultData.email`.