Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

# Bibliothèque de composants d'interface utilisateur pour le générateur d'interface utilisateur dans Amazon Connect
<a name="user-interface-component-library-sg"></a>

Tous les composants du générateur d'interface utilisateur sont décrits dans la [documentation des composants d'interface utilisateur Amazon Connect](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/overview--page). Cette documentation présente les différents composants de l'interface utilisateur que vous pouvez utiliser dans le générateur d'interface utilisateur et comment les configurer.

Vous pouvez accéder aux composants de la bibliothèque dans le générateur d'interface utilisateur dans le panneau **Créer**, dans l'onglet **Bibliothèque**. L’image suivante montre un exemple de l’onglet **Bibliothèque** et des composants du **conteneur**. 

![\[Le panneau de création d'interface utilisateur, l'onglet Bibliothèque, les composants de l'interface utilisateur.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/user-interface-component-library-example.png)


## Utilisation de conteneurs pour déplacer et organiser les composants
<a name="user-interface-component-library-containers"></a>

Les conteneurs sont une composante de base pour créer des vues. Vous pouvez déplacer des composants d’interface utilisateur (y compris d’autres conteneurs) dans un conteneur afin de les regrouper de manière logique et visuelle sur la page. 

Pour que le contenu de la page reste relativement cohérent lorsque vous personnalisez les paramètres des vues de niveau supérieur, nous vous encourageons vivement à utiliser des conteneurs dans toutes vos vues. Les conteneurs sont également livrés avec une disposition en colonnes. La disposition en colonnes vous permet d’organiser le contenu d’un conteneur.

## Création d’un formulaire
<a name="user-interface-component-library-form-section"></a>

Pour créer un formulaire que les agents ou les clients doivent remplir et envoyer, vous utilisez le composant [Formulaire](https://d3irlmavjxd3d8.cloudfront.net/?path=/story/aws-managed-views-form--with-all). Vous avez le choix entre les options suivantes : 
+ Glissez et déposez un composant de **formulaire** sur le canevas depuis la bibliothèque de l’interface utilisateur.
+ Ou, dans l’onglet **Modèles**, sélectionnez le modèle d’**exemple de formulaire**. Cela utilise un composant de formulaire.

Un composant de [formulaire](https://d3irlmavjxd3d8.cloudfront.net/?path=/story/aws-managed-views-form--with-all) est un type spécial de conteneur dans lequel vous pouvez insérer des champs de saisie et un bouton **Envoyer**. Lorsqu’un utilisateur qui interagit avec le guide appuie sur le bouton **Envoyer**, Amazon Connect transmet toutes les valeurs saisies dans les champs du formulaire au flux. À ce stade du flux, vous pouvez personnaliser votre propre logique métier et vos propres send/retrieve données pour les adapter à des systèmes tiers en utilisant le [Fonction AWS Lambda ](invoke-lambda-function-block.md) bloc. 

L’image suivante montre un exemple de composant de **formulaire** avec des étiquettes d’espace réservé et un bouton Envoyer.

![\[Un composant de formulaire avec des libellés fictifs et un bouton Envoyer.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/user-interface-component-library-form-section-example.png)