

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.

# UI-Komponentenbibliothek für den UI Builder in Amazon Connect
<a name="user-interface-component-library-sg"></a>

Alle UI Builder-Komponenten werden in der [Dokumentation der Amazon Connect Connect-UI-Komponenten](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/overview--page) beschrieben. Diese Dokumentation zeigt Ihnen die einzelnen UI-Komponenten, die Sie im UI Builder verwenden können, und wie Sie sie konfigurieren können.

Sie greifen auf die Bibliothekskomponenten im UI Builder im Bereich **Erstellen** auf der Registerkarte **Bibliothek** zu. Die folgende Abbildung zeigt ein Beispiel für die Registerkarte **Bibliothek** und die **Container**-Komponenten. 

![Das Bedienfeld „Erstellen“ des UI Builders, die Registerkarte „Bibliothek“ und die Benutzeroberflächenkomponenten.](http://docs.aws.amazon.com/de_de/connect/latest/adminguide/images/user-interface-component-library-example.png)


## Verwenden von Containern, zum Verschieben und Organisieren von Komponenten
<a name="user-interface-component-library-containers"></a>

Container sind ein zentraler Baustein für die Erstellung von Ansichten. Sie können UI-Komponenten (einschließlich anderer Container) in einen Container verschieben, um sie auf der Seite logisch und visuell zu gruppieren. 

Damit der Inhalt der Seite bei der Anpassung der Einstellungen für die Ansicht auf oberster Ebene relativ einheitlich bleibt, empfehlen wir, Container in allen Ihren Ansichten zu verwenden. Container verfügen auch über ein Spaltenlayout. Das Spaltenlayout ermöglicht es Ihnen, den Inhalt innerhalb eines Containers zu organisieren.

## Erstellen eines Formulars
<a name="user-interface-component-library-form-section"></a>

Um ein Formular zu erstellen, das Kundendienstmitarbeiter oder Kunden ausfüllen und abschicken können, verwenden Sie die Komponente [Formular](https://d3irlmavjxd3d8.cloudfront.net/?path=/story/aws-managed-views-form--with-all). Führen Sie dazu einen der folgenden Schritte aus: 
+ Ziehen Sie eine **Formularkomponente** aus der UI-Bibliothek auf die Zeichenfläche.
+ Wählen Sie alternativ auf der Registerkarte **Vorlagen** die Vorlage **Formularbeispiel** aus. In dieser wird eine Formularkomponente verwendet.

Bei einer [Formularkomponente](https://d3irlmavjxd3d8.cloudfront.net/?path=/story/aws-managed-views-form--with-all) handelt es um einen speziellen Containertyp, in den Sie Eingabefelder und eine Schaltfläche zum **Senden** einfügen können. Wenn der Benutzer, der die Anleitung verwendet, die Schaltfläche **Senden** betätigt, leitet Amazon Connect alle in die Formularfelder eingegebenen Werte zurück an den Kontaktdatenfluss. An diesem Punkt im Ablauf können Sie mithilfe des [AWS Lambda Funktion](invoke-lambda-function-block.md) Blocks Ihre eigene Geschäftslogik und send/retrieve Daten an Systeme von Drittanbietern anpassen. 

Die folgende Abbildung zeigt ein Beispiel für eine **Formularkomponente** mit Platzhalterbeschriftungen und einer Schaltfläche „Senden“.

![Formularkomponente mit Platzhalterbeschriftungen und einer Schaltfläche „Senden“.](http://docs.aws.amazon.com/de_de/connect/latest/adminguide/images/user-interface-component-library-form-section-example.png)
