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 Connect-Customer-Arbeitsbereich für Agenten
<a name="view-resources-custom-view"></a>

Mithilfe von APIs können Sie jetzt Ihre eigenen Ansichtsressourcen erstellen. Die View-Ressource umfasst CloudFormation Unterstützung für Tagging. CloudTrail

## 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**

![Die Ansichtskarte für den Arbeitsbereich für Agenten.](https://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-managed Ansicht (Formularansicht) verwenden**, wird das Ergebnis der Formulardaten unter angezeigt * 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`.