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. # Ansichten: Benutzeroberflächenvorlagen zur Anpassung des Kundendienstmitarbeiter-Workspace in Amazon Connect *Ansichten* sind Benutzeroberflächenvorlagen, mit denen Sie den Arbeitsbereich Ihrer Kundendienstmitarbeiter anpassen können. Mithilfe von Ansichten können Sie beispielsweise Kontaktattribute für einen Agenten anzeigen, Formulare für die Eingabe von Dispositionscodes bereitstellen, Anrufnotizen bereitstellen und Benutzeroberflächenseiten aufrufen, auf denen Agenten durch die step-by-step Anleitungen geführt werden können. Amazon Connect enthält eine Reihe von Ansichten, zu denen Sie den Arbeitsbereich Ihres Agenten hinzufügen können. Sie können auch Ihre eigenen Ansichten mithilfe unserer öffentlichen Ansicht erstellen APIs. Bei der Konfiguration von Ansichten in Flows mithilfe des Blocks [Ansicht anzeigen](show-view-block.md) können Sie für jede Ansicht sowohl statische als auch dynamische Inhalte definieren. Der Inhalt für eine bestimmte Ansicht besteht aus drei Hauptelementen: einer Vorlage, einem Eingabeschema und Aktionen. **Tipp** Für eine optimale Datenzuordnung empfehlen wir, die Option **JSON festlegen** im Block [Ansicht anzeigen](show-view-block.md) zu verwenden. Alle Namespaces in Flows können im Block **Ansicht anzeigen** referenziert werden, einschließlich `$.External`. Damit lassen sich Daten aus externen Systemen in beliebigen Ansichten an Kundendienstmitarbeiter weitergeben. Sie können Daten aus Amazon Connect und anderen Quellen zusammenführen und abgleichen, um eine konsolidierte Benutzeroberfläche für Kundendienstmitarbeiter zu erstellen. # Benutzerdefinierte Ansichten im Workspace für Amazon-Connect-Kundendienstmitarbeiter 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 **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": "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 **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 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 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`. # AWS Verwaltete Ansichten für den Arbeitsbereich eines Agenten in Amazon Connect einrichten Amazon Connect enthält eine Reihe von Ansichten, mit denen Sie den Arbeitsbereich Ihres Agenten hinzufügen können. Im Folgenden finden Sie Einzelheiten zur Konfiguration der verschiedenen AWS verwalteten Ansichten. ------ #### [ Detail view ] In der **Detailansicht** werden Kundendienstmitarbeitern Informationen und eine Liste der Aktionen angezeigt, die sie ausführen können. Ein häufiger Anwendungsfall der **Detailansicht** besteht darin, Kundendienstmitarbeitern zu Beginn eines Anrufs ein Bildschirm-Popupfenster einzublenden. + Aktionen in dieser Ansicht können verwendet werden, damit ein Agent mit dem nächsten Schritt in einer step-by-step Anleitung weitermachen kann, oder die Aktionen können verwendet werden, um völlig neue Workflows aufzurufen. + **Sections** ist die einzige erforderliche Komponente. Hier können Sie den Hauptteil der Seite konfigurieren, die Sie Kundendienstmitarbeitern einblenden möchten. + Optionale Komponenten wie die **AttributeBar**werden von dieser Ansicht unterstützt. [Interaktive Dokumentation](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-detail--with-all) für die **Detailansicht** Die folgende Abbildung zeigt ein Beispiel einer **Detailansicht**. Sie enthält eine Seitenüberschrift, eine Beschreibung und vier Beispiele. ![\[Die Detailansicht mit der Seitenüberschrift, der Beschreibung und vier Beispielen mit Attributen\]](http://docs.aws.amazon.com/de_de/connect/latest/adminguide/images/details-view-page-heading-sq.png) **Sections** + Inhalt kann eine statische Zeichenfolge, ein TemplateString Schlüssel-Wert-Paar sein. Er kann ein einzelner Datenpunkt oder eine Liste sein. Für weitere Informationen siehe [TemplateString](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#templatestring) oder [AtrributeSection](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute-section). **AttributeBar (Fakultativ)** + Wenn angegeben, wird die Attributleiste oben in der Ansicht angezeigt. + Ist eine Liste von Objekten mit den erforderlichen Eigenschaften **Label**, **Value** und optionalen Eigenschaften **LinkType****Copyable** und **Url**. **ResourceId** Weitere Informationen finden Sie unter [Attribute](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute). + **LinkType**kann eine externe Anwendung sein oder eine Verbindung herstellen, z. B. Case. + Wenn er extern ist (*external*), kann ein Benutzer zu einer neuen Browserseite navigieren, die mit **Url** konfiguriert wird. + Wenn dies der *Fall* ist, kann ein Benutzer zu einem neuen Falldetail im Arbeitsbereich für Agenten navigieren, der mit konfiguriert wurde ResourceId. + Mit **Copyable** können Benutzer das kopieren, ResourceId indem sie es mit Ihrem Eingabegerät auswählen. **Back (optional)** + Optional, aber erforderlich, wenn keine Aktionen enthalten sind. Wenn angegeben, wird der Link zur Rücknavigation angezeigt. + Ist ein Objekt mit einem *Label*, worüber festgelegt wird, was im Linktext angezeigt werden soll. **Heading (optional)** + Wenn angegeben, wird Text als Titel angezeigt. **Description (optional)** + Wenn angegeben, wird Beschreibungstext unter dem Titel angezeigt. **Actions (optional)** + Optional. Wenn angegeben, wird eine Liste von Aktionen unten auf der Seite angezeigt. **Eingabebeispiel** ``` { "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!"], } ``` **Output example** ``` { Action: "ActionSelected", ViewResultData: { actionName: "Action 2" } } ``` ------ #### [ List view ] In der **Listenansicht** werden Informationen als Liste von Elementen mit Titeln und Beschreibungen angezeigt. Elemente können auch als Links mit zugeordneten Aktionen fungieren. Optional werden auch die standardmäßige Rücknavigation und der persistente Kontext-Header unterstützt. [Interaktive Dokumentation](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-list--with-all) für die **Listenansicht** Die folgende Abbildung zeigt ein Beispiel einer Listenansicht. Sie hat eine Spalte mit drei Elementen. ![\[Die Listenansicht, ein Listenelement mit Link und zwei Elemente ohne Links\]](http://docs.aws.amazon.com/de_de/connect/latest/adminguide/images/list-view-column-sq.png) **Items** + Erforderlich. Zeigt diese Elemente als Liste an. + Jedes Element kann eine Überschrift, eine Beschreibung, ein Symbol und eine ID haben. + Alle anderen Eigenschaften sind optional. + Wenn „Id“ definiert ist, enthält die Ausgabe den Wert als Teil der Ausgabe. **AttributeBar (Fakultativ)** + Wenn angegeben, wird die Attributleiste oben in der Ansicht angezeigt. + Ist eine Liste von Objekten mit den erforderlichen Eigenschaften **Label**, **Value** und optionalen Eigenschaften **LinkType****Copyable** und **Url**. **ResourceId** Weitere Informationen finden Sie unter [Attribute](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute). + **LinkType**kann eine externe Anwendung sein oder eine Verbindung herstellen, z. B. Case. + Wenn er extern ist (*external*), kann ein Benutzer zu einer neuen Browserseite navigieren, die mit **Url** konfiguriert wird. + Wenn dies der *Fall* ist, kann ein Benutzer zu einem neuen Falldetail im Arbeitsbereich für Agenten navigieren, der mit konfiguriert wurde ResourceId. + Mit **Copyable** können Benutzer das kopieren, ResourceId indem sie es mit Ihrem Eingabegerät auswählen. **Back (optional)** + Optional, aber erforderlich, wenn keine Aktionen enthalten sind. Wenn angegeben, wird der Link zur Rücknavigation angezeigt. + Ist ein Objekt mit einem *Label*, worüber festgelegt wird, was im Linktext angezeigt werden soll. **Heading (optional)** + Wenn angegeben, wird Text als Titel angezeigt. **SubHeading (Fakultativ)** + Wenn angegeben, wird Text als Titel der Liste angezeigt. **Beispiel für Eingabedaten** ``` { "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." } ] } ``` **Beispiel für Ausgabedaten** ``` { Action: "ActionSelected", ViewResultData: { actionName: "Select_Car" } } ``` ------ #### [ Form view ] Mit der **Formular-Ansicht** können Sie Kundendienstmitarbeitern Eingabefelder zur Verfügung stellen, um die erforderlichen Daten zu erheben und Daten an Backend-Systeme zu senden. Diese Ansicht besteht aus mehreren Abschnitten (*Sections*) mit einem vordefinierten *Sections*-Stil samt Überschrift. Der Hauptteil besteht aus verschiedenen Eingabefeldern, die in einem Spalten- oder Rasterlayoutformat angeordnet sind. [Interaktive Dokumentation](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-form--with-all) für die **Formular-Ansicht** Die folgende Abbildung zeigt ein Beispiel einer Formular-Ansicht für eine Mietwagenreservierung. Sie enthält Felder für den Ort und das Datum. ![\[Die Formular-Ansicht mit Beispielen für ein Orts- und ein Datumsfeld\]](http://docs.aws.amazon.com/de_de/connect/latest/adminguide/images/form-view-sq.png) **Sections** + Stelle in der **Formular-Ansicht**, an der sich Eingabefelder und Anzeigefelder befinden. + **SectionProps** + **Heading** + Überschrift des Abschnitts + **Typ** + Typ des Abschnitts + FormSection (Formulare, die Benutzereingaben verarbeiten) oder DataSection (Anzeige einer Liste mit Bezeichnungen und Werten) + **Items** + Liste der Daten auf Grundlage des Typs. Wenn `Type` auf `DataSection` gesetzt ist, sollten die Daten Attribute sein. Wenn `Type` auf `FormSection` gesetzt ist, sollten die Daten Formularkomponenten sein. + **isEditable** + Die Bearbeitungsschaltfläche wird in der Überschrift angezeigt, wenn sie angegeben ist und der Abschnittstyp `DataSection` ist. + Boolesch **Wizard (optional)** + **ProgressTracker**Auf der linken Seite der Ansicht anzeigen. + Jedes Element kann eine Überschrift und eine Beschreibung haben und optional sein. + Überschrift ist erforderlich **Back (optional)** + Ist ein Objekt oder eine Zeichenfolge mit einem Label, worüber festgelegt wird, was im Linktext angezeigt werden soll. **Next (optional)** + Diese Aktion wird verwendet, wenn es sich bei diesem Schritt nicht um den letzten Schritt handelt. + Ist ein Objekt (FormActionProps) oder eine Zeichenfolge. Weitere Informationen finden Sie unter [FormActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps). **Cancel (optional)** + Diese Aktion wird verwendet, wenn der Schritt nicht der erste Schritt ist. + Ist ein Objekt (FormActionProps) oder eine Zeichenfolge. Weitere Informationen finden Sie unter [FormActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps). **Previous (optional)** + Diese Aktion wird verwendet, wenn der Schritt nicht der erste Schritt ist. + Ist ein Objekt (FormActionProps) oder eine Zeichenfolge. Weitere Informationen finden Sie unter [FormActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps). **Edit (optional)** + Diese Aktion wird angezeigt, wenn der Abschnittstyp `DataSection` ist. + Ist ein Objekt (FormActionProps) oder eine Zeichenfolge. Weitere Informationen finden Sie unter [FormActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps). **AttributeBar (Fakultativ)** + Wenn angegeben, wird die Attributleiste oben in der Ansicht angezeigt. + Ist eine Liste von Objekten mit den erforderlichen Eigenschaften **Label**, **Value** und optionalen Eigenschaften **LinkType****Copyable** und **Url**. **ResourceId** Weitere Informationen finden Sie unter [Attribute](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute). + **LinkType**kann eine externe Anwendung sein oder eine Verbindung herstellen, z. B. Case. + Wenn er extern ist (*external*), kann ein Benutzer zu einer neuen Browserseite navigieren, die mit **Url** konfiguriert wird. + Wenn dies der *Fall* ist, kann ein Benutzer zu einem neuen Falldetail im Arbeitsbereich für Agenten navigieren, der mit konfiguriert wurde ResourceId. + Mit **Copyable** können Benutzer das kopieren, ResourceId indem sie es mit Ihrem Eingabegerät auswählen. **Heading (optional)** + Zeichenfolge, die als Seitentitel angezeigt wird. **SubHeading (Fakultativ)** + Sekundäre Nachricht für die Seite **ErrorText (Fakultativ)** + Zeigt serverseitige Fehlermeldungen an + ErrorProps; Zeichenfolge **Beispiel für Eingabedaten** ``` { "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" }] }] }] } ``` **Beispiel für Ausgabedaten** ``` { 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 ] Die **Bestätigungsansicht** ist eine Seite, die Benutzern angezeigt wird, nachdem ein Formular gesendet oder eine Aktion abgeschlossen wurde. In dieser vorgefertigten Vorlage können Sie eine Zusammenfassung der Geschehnisse, weitere Schritte und Aufforderungen angeben. Die **Bestätigungsansicht** unterstützt eine persistente Attributleiste, ein Symbol/Bild, eine Überschrift und eine Unterüberschrift sowie eine Schaltfläche, mit der wieder zur Startseite navigiert werden kann. [Interaktive Dokumentation](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-confirmation--with-all) für die **Bestätigungsansicht** Die folgende Abbildung zeigt ein Beispiel einer Bestätigung. ![\[Die Bestätigungsansicht, ein Häkchen und Text zur Bestätigung der Autovermietung\]](http://docs.aws.amazon.com/de_de/connect/latest/adminguide/images/confirmation-view-check-sq.png) **Next** + Erforderlich + Aktionsschaltfläche zum Weiternavigieren + Label – Bezeichnung für die Navigationsschaltfläche als Zeichenfolge **AttributeBar (Fakultativ)** + Wenn angegeben, wird die Attributleiste oben in der Ansicht angezeigt. + Ist eine Liste von Objekten mit den erforderlichen Eigenschaften **Label**, **Value** und optionalen Eigenschaften **LinkType****Copyable** und **Url**. **ResourceId** Weitere Informationen finden Sie unter [Attribute](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute). + **LinkType**kann eine externe Anwendung sein oder eine Verbindung herstellen, z. B. Case. + Wenn er extern ist (*external*), kann ein Benutzer zu einer neuen Browserseite navigieren, die mit **Url** konfiguriert wird. + Wenn dies der *Fall* ist, kann ein Benutzer zu einem neuen Falldetail im Arbeitsbereich für Agenten navigieren, der mit konfiguriert wurde ResourceId. + Mit **Copyable** können Benutzer das kopieren, ResourceId indem sie es mit Ihrem Eingabegerät auswählen. **Heading (optional)** + Zeichenfolge, die als Seitentitel angezeigt wird. **SubHeading (Fakultativ)** + Sekundäre Nachricht für die Seite **Graphic (optional)** + Abbildung wird angezeigt + Objekt mit dem folgenden Schlüssel: + Include – boolescher Wert. Wenn „true“, wird die Grafik auf der Seite angezeigt. **Beispiel für Eingabedaten** ``` { "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?", } ``` **Beispiel für Ausgabedaten** ``` { "Action": "Next", "ViewResultData": { "Label": "Go Home" } } ``` ------ #### [ Cards view ] In der **Kartenansicht** können Sie Kundendienstmitarbeiter anleiten, indem Sie ihnen eine Liste mit Themen zur Auswahl anbieten, sobald sie den Kontakt akzeptieren. [Interaktive Dokumentation](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-cards--with-all) für die **Kartenansicht** *Präsentieren Sie Ihren Kundendienstmitarbeiter Karten.* Die folgende Abbildung zeigt ein Beispiel für sechs Karten, die Kundendienstmitarbeitern präsentiert werden: eine, um eine neue Reservierung vorzunehmen, und die restlichen, um Reservierungen für bevorstehende Reisen zu prüfen. ![\[Ein Satz aus sechs Karten\]](http://docs.aws.amazon.com/de_de/connect/latest/adminguide/images/solve-view-sq.png) *Wenn Kundendienstmitarbeiter eine Karte auswählen, werden weitere Informationen eingeblendet.* Das folgende Bild zeigt eine maximierte Karte, auf der Details zu einer Reservierung angezeigt werden. ![\[Eine maximierte Karte, auf der Details zu einer Reservierung angezeigt werden\]](http://docs.aws.amazon.com/de_de/connect/latest/adminguide/images/card-view-sq.png) **Sections** + Eine Liste von Objekten mit „Summary“ und „Detail“. Die Komponente muss angegeben werden, um „Card“ und „Detail“ zu erstellen. + Besteht aus „Summary“ und „Detail“. Weitere Informationen finden Sie unter [„Summary“ und „Detail“](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-cards--with-all). **AttributeBar (Fakultativ)** + Wenn angegeben, wird die Attributleiste oben in der Ansicht angezeigt. + Ist eine Liste von Objekten mit den erforderlichen Eigenschaften **Label**, **Value** und optionalen Eigenschaften **LinkType****Copyable** und **Url**. **ResourceId** Weitere Informationen finden Sie unter [ Attribut](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute). + **LinkType**kann eine externe Anwendung sein oder eine Verbindung herstellen, z. B. Case. + Wenn er extern ist (*external*), kann ein Benutzer zu einer neuen Browserseite navigieren, die mit **Url** konfiguriert wird. + Wenn dies der *Fall* ist, kann ein Benutzer zu einem neuen Falldetail im Arbeitsbereich für Agenten navigieren, der mit konfiguriert wurde ResourceId. + Mit **Copyable** können Benutzer das kopieren, ResourceId indem sie es mit Ihrem Eingabegerät auswählen. **Heading (optional)** + Zeichenfolge, die als Seitentitel angezeigt wird. **Back (optional)** + Ist ein Objekt oder eine Zeichenfolge mit einem Label, worüber festgelegt wird, was im Linktext angezeigt werden soll. Weitere Informationen finden Sie unter [ActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps). **NoMatchFound (Fakultativ)** + Ist eine Zeichenfolge, die für eine Schaltfläche unter „Cards“ angezeigt wird. Weitere Informationen finden Sie unter [ActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps). **Beispiel für Eingabedaten** ``` { "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": "Steps:
  1. Customer provides incident information
  2. Customer provides receipts and agrees with amount
  3. Customer receives reimbursement
" }, "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": "

There is no additional information

" } } }, { "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": "

There is no additional information

" } } }, { "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": "

There is no additional information

" } } }, { "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": "

There is no additional information

" } } }, { "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": "

There is no additional information

" } } }], "NoMatchFound": { "Label": "Can't find match?" } } ``` **Beispiel für Ausgabedaten** ``` { Action: "ActionSelected", ViewResultData: { actionName: "Update the trip" } } ``` ------ # Anpassen der für den Kundendienstmitarbeiter-Workspace in Amazon Connect mithilfe von HTML und JSX Sie können das Erscheinungsbild der Layouts von Ansichtsressourcen anpassen. Sie tun dies, indem Sie Eingabeparameter mittels HTML oder JSX an den [Ansicht anzeigen](show-view-block.md) Block übergeben. Führen Sie die folgenden Schritte aus, um ein einfaches Beispiel dafür zu erhalten, wie Sie HTML oder JSX mit einem Block [Ansicht anzeigen](show-view-block.md) nutzen können. 1. Erstellen Sie einen Flow mit einem Block [Ansicht anzeigen](show-view-block.md). 1. Öffnen Sie die Eigenschaftenseite des Blocks [Ansicht anzeigen](show-view-block.md). 1. Wählen Sie unter **Ansicht** die Option **Detail** aus der Dropdown-Liste aus. 1. Wählen Sie im Abschnitt **Abschnitte** die Option **Bearbeiten** aus. 1. Kopieren Sie anschließend den folgenden Code und fügen Sie ihn ein. Dieser Code zeigt, wie HTML- oder JSX-Ausdrücke verarbeitet werden. **HTML-Beispiel** ``` { "TemplateString": "Steps:
  1. Customer provides incident information
  2. Customer provides receipts and agrees with amount
  3. Customer receives reimbursement
" } ``` **JSX-Beispiel** ``` { "TemplateString": "Please provide an introduction to the customers. Ask them how their day is going Things to say: Hello, how are you today? My name is Bob, who am I speaking to?" } ```