Créer des fiches pour les applications Google Chat

Cette page explique comment créer les composants et la structure d'une fiche. Les fiches sont des interfaces utilisateur que les applications Google Chat peuvent utiliser pour présenter et collecter des informations auprès des utilisateurs de Chat. Les applications Chat peuvent créer et afficher des fiches dans les interfaces suivantes :

  • Messages contenant une ou plusieurs fiches.
  • Pages d'accueil, qui sont des fiches qui s'affichent dans l'onglet Accueil des messages privés avec l'application Chat.
  • Boîtes de dialogue, qui sont des fiches s'ouvrant dans une nouvelle fenêtre à partir de messages et de pages d'accueil.

Cette page présente les composants suivants d'une fiche :

  • En-têtes, qui contiennent généralement le titre d'une fiche ou d'une section de fiche.
  • Sections, qui forment le corps principal de la fiche, y compris les widgets et d'autres éléments interactifs. Dans une section de fiche, vous pouvez ajouter une structure à la fiche, y compris des colonnes et des grilles.
  • Pieds de page fixes, qui s'affichent en bas des boîtes de dialogue pour afficher des éléments d'interface utilisateur persistants, tels que des boutons.

Prérequis

Une application Google Chat configurée pour recevoir des interactions utilisateur et y répondre. Pour créer une application Chat interactive, suivez l'un des guides de démarrage rapide suivants en fonction de l'architecture d'application que vous souhaitez utiliser :

Utilisez Card Builder pour concevoir et prévisualiser les messages et les interfaces utilisateur des applications Chat :

Ouvrir le générateur de fiches

Ajouter un en-tête

Le widget CardHeader représente l'en-tête d'une fiche. Les en-têtes peuvent inclure un titre, un sous-titre et une image d'avatar pour votre fiche.

Voici un exemple de CardHeader :

Ajouter une ou plusieurs sections de carte

Le widget CardSection est un conteneur de haut niveau dans une fiche. Vous utilisez des sections de fiche pour regrouper des widgets dans une fiche. Pour chaque section de fiche, vous pouvez inclure un en-tête et un ou plusieurs widgets.

Voici un exemple de CardSection contenant deux widgets textParagraph :

Ajouter un séparateur horizontal entre les widgets

Le widget divider affiche une ligne horizontale couvrant la largeur d'une fiche entre des widgets empilés verticalement. La ligne est un séparateur visuel qui aide les utilisateurs à distinguer un widget d'un autre, ce qui facilite l'analyse et la compréhension des fiches.

Voici une fiche composée d'un widget divider entre d'autres types de widgets :

Ajouter des colonnes

Le widget columns affiche jusqu'à deux colonnes dans une fiche. Vous pouvez ajouter des widgets à chaque colonne. Les widgets s'affichent dans l'ordre dans lequel ils sont spécifiés. Pour inclure plus de deux colonnes ou pour utiliser des lignes, utilisez le widget grid.

La hauteur de chaque colonne est déterminée par la colonne la plus haute. Par exemple, si la première colonne est plus haute que la deuxième, les deux colonnes ont la hauteur de la première colonne. Comme chaque colonne peut contenir un nombre différent de widgets, vous ne pouvez pas définir de lignes ni aligner les widgets entre les colonnes.

L'exemple suivant affiche une fiche avec un widget columns comportant deux colonnes de texte. Pour n'afficher que la mise en page des colonnes et réduire l'exemple de code, cliquez sur Réduire. Lorsque l'espace est limité, comme dans l'exemple suivant, la deuxième colonne s'affiche sous la première.

Définir la largeur de la colonne

Les colonnes sont affichées côte à côte. Vous pouvez personnaliser la largeur de chaque colonne à l'aide du champ horizontalSizeStyle. Si la largeur de l'écran de l'utilisateur est trop étroite, la deuxième colonne s'affiche sous la première :

  • Sur le Web, la deuxième colonne est renvoyée à la ligne si la largeur de l'écran est inférieure ou égale à 480 pixels.
  • Sur les appareils iOS, la deuxième colonne est renvoyée à la ligne si la largeur de l'écran est inférieure ou égale à 300 pt.
  • Sur les appareils Android, la deuxième colonne est renvoyée à la ligne si la largeur de l'écran est inférieure ou égale à 320 dp.

L'exemple suivant affiche une fiche avec un widget columns qui comporte deux colonnes de texte avec quatre éléments dans les colonnes. Chaque élément des colonnes est associé à horizontalSizeStyle afin de manipuler l'espace occupé par le texte dans chaque colonne :

  • Le premier paragraphe de texte utilise FILL_MINIMUM_SPACE pour remplir au maximum 30 % de la largeur de la fiche.
  • Le deuxième paragraphe de texte utilise FILL_AVAILABLE_SPACE pour remplir l'espace disponible dans la largeur de la fiche. Dans cet exemple, il remplit 70 % de la largeur de la carte.
  • Le troisième paragraphe de texte ne définit pas horizontalSizeStyle. Il remplit donc par défaut l'espace disponible de la fiche.
  • Le quatrième paragraphe de texte utilise FILL_MINIMUM_SPACE pour ne pas occuper plus de 30 % de la largeur de la fiche.

Définir l'alignement horizontal d'une colonne

Vous pouvez aligner les widgets horizontalement à gauche, à droite ou au centre d'une colonne en définissant le champ horizontalAlignment. Si le champ horizontalAlignment n'est pas défini, les widgets sont alignés à gauche dans une colonne.

L'exemple suivant aligne horizontalement le texte d'une colonne vers la gauche :

L'exemple suivant aligne horizontalement le texte au centre d'une colonne :

L'exemple suivant aligne horizontalement le texte d'une colonne vers la droite :

Définir l'alignement vertical d'une colonne

Vous pouvez aligner les widgets verticalement en haut, en bas ou au centre d'une colonne en définissant le champ verticalAlignment. Si le champ verticalAlignment n'est pas défini, les widgets d'une colonne sont alignés en haut.

L'exemple suivant aligne verticalement le texte d'une colonne vers le haut :

L'exemple suivant aligne verticalement le texte au centre d'une colonne :

L'exemple suivant aligne verticalement le texte d'une colonne en bas :

Ajouter une grille pour afficher une collection d'éléments

Le widget grid affiche une grille avec une collection d'éléments. Une grille accepte un nombre illimité de colonnes et d'éléments. Le nombre de lignes est déterminé par le nombre d'éléments divisé par le nombre de colonnes. Une grille de 10 éléments et de deux colonnes comporte cinq lignes. Une grille de 11 éléments et de deux colonnes comporte six lignes.

Le widget accepte les suggestions, qui aident les utilisateurs à saisir des données uniformes, et les actions de modification, qui sont des Actions qui s'exécutent lorsqu'une modification se produit dans le champ de saisie de texte, par exemple lorsqu'un utilisateur ajoute ou supprime du texte.

L'exemple suivant est une grille à deux colonnes avec un seul élément :

Pour définir l'emplacement du texte par rapport à une image dans une grille, vous pouvez spécifier le champ gridItemLayout. Ce champ vous permet de définir si le texte apparaît au-dessus ou en dessous de l'élément dans la grille. Si gridItemLayout n'est pas défini, le texte s'affiche par défaut sous l'élément dans la grille.

L'exemple suivant est une grille à trois colonnes avec du texte et une image dans chaque grille. La première grille définit le texte qui doit apparaître au-dessus de l'image, la deuxième définit le texte qui doit apparaître en dessous de l'image et la troisième ne définit pas la position du texte.

Ajouter une bordure à une grille ou à une colonne

Pour les éléments qui s'affichent dans un widget column ou grid, vous pouvez ajouter une bordure à ces éléments d'interface utilisateur en définissant un champ borderType et un champ borderStyle. Si aucun champ borderStyle n'est défini, aucune bordure n'est affichée par défaut. Vous pouvez définir un borderType à appliquer à tous les éléments d'un widget ou appliquer le style à chaque élément d'un widget.

L'exemple suivant est une grille à deux colonnes avec une image dans chaque grille, où le type, le style et la couleur de la bordure ont été définis pour s'appliquer à tous les éléments de la grille.

L'exemple suivant est une grille à trois colonnes avec une image dans chaque grille, et le style et le type de bordure définis individuellement. La première image comporte une bordure définie comme STROKE. La deuxième image a une bordure définie sur NO_BORDER. La troisième image n'a pas de bordure définie.

Ajouter un carrousel

Le widget Carousel affiche une collection d'objets CarouselCard qui peuvent défiler à l'écran. Vous pouvez ajouter plusieurs widgets à chaque CarouselCard.

Le widget CardFixedFooter représente le pied de page d'un message de boîte de dialogue envoyé par une application Chat. Les pieds de page peuvent inclure un bouton principal et un bouton secondaire.

Le widget CardFixedFooter n'est disponible que pour les boîtes de dialogue.

Voici un exemple de widget CardFixedFooter avec deux boutons :

Résoudre les problèmes

Lorsqu'une application Chat ou une fiche Google Chat renvoie une erreur, l'interface Chat affiche le message "Un problème est survenu". ou "Impossible de traiter votre demande." Il peut arriver que l'interface utilisateur de Chat n'affiche aucun message d'erreur, mais que l'application Chat ou la fiche produise un résultat inattendu. Par exemple, un message de fiche peut ne pas s'afficher.

Même si aucun message d'erreur ne s'affiche dans l'UI de Chat, des messages d'erreur descriptifs et des données de journal sont disponibles pour vous aider à corriger les erreurs lorsque la journalisation des erreurs est activée pour les applications Chat. Pour obtenir de l'aide pour afficher, déboguer et corriger les erreurs, consultez Résoudre les erreurs Google Chat.