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 qui s'ouvrent 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 autres éléments interactifs. Dans une section de fiche, vous pouvez ajouter plus de structure à la fiche, y compris des colonnes et des grilles.
  • Pieds de page fixes, qui apparaissent 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 événements d'interaction 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 interfaces de messagerie et utilisateur des applications Chat :

Ouvrir Card Builder

Ajouter un en-tête

Le CardHeader widget 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 fiche

Le CardSection widget 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 divider widget affiche une ligne horizontale sur toute la largeur d'une fiche entre des widgets empilés verticalement. Cette ligne est un séparateur visuel qui aide les utilisateurs à distinguer les widgets les uns des autres, ce qui facilite la lecture 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 columns widget affiche jusqu'à deux colonnes dans une fiche. Vous pouvez ajouter des widgets à chaque colonne. Ils s'affichent dans l'ordre spécifié. Pour inclure plus de deux colonnes ou 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. Étant donné que 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 des colonnes

Les colonnes sont affichées côte à côte. Vous pouvez personnaliser la largeur de chaque colonne à l'aide du horizontalSizeStyle champ. 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 s'affiche sous la première si la largeur de l'écran est inférieure ou égale à 480 pixels.
  • Sur les appareils iOS, la deuxième colonne s'affiche sous la première si la largeur de l'écran est inférieure ou égale à 300 points.
  • Sur les appareils Android, la deuxième colonne s'affiche sous la première si la largeur de l'écran est inférieure ou égale à 320 dp.

L'exemple suivant affiche une fiche avec un widget columns comportant deux colonnes de texte avec quatre éléments dans les colonnes. Chaque élément des colonnes a un horizontalSizeStyle appliqué afin de manipuler la quantité d'espace que le texte remplit dans chaque colonne :

  • Le premier paragraphe de texte utilise FILL_MINIMUM_SPACE pour ne pas dépasser 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 fiche.
  • Le troisième paragraphe de texte ne définit pas horizontalSizeStyle. Il est donc défini par défaut pour remplir l'espace disponible de la fiche.
  • Le quatrième paragraphe de texte utilise FILL_MINIMUM_SPACE pour ne pas dépasser 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 horizontalAligment champ. 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 à gauche dans une colonne :

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

L'exemple suivant aligne horizontalement le texte à droite dans une colonne :

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 verticalAlignment champ. 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 en haut dans une colonne :

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

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

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

Le grid widget affiche une grille avec une collection d'éléments. Une grille accepte n'importe quel nombre 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 2 colonnes comporte 5 lignes. Une grille de 11 éléments et 2 colonnes comporte 6 lignes.

Le widget accepte les suggestions, qui aident les utilisateurs à saisir des données uniformes, et les actions en cas de modification, qui sont Actions exécutées 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 avec une image dans une grille, vous pouvez spécifier le gridItemLayout champ. Ce champ vous permet de définir si le texte s'affiche 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 à afficher au-dessus de l'image, la deuxième grille définit le texte à afficher sous l'image et la troisième grille ne définit pas la position du texte.

Ajouter une bordure à une grille ou à une colonne

Pour les éléments qui apparaissent 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 individuel 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 a une bordure définie comme STROKE. La deuxième image a une bordure définie comme NO_BORDER. La troisième image n'a pas de bordure définie.

Ajouter un carrousel

Le Carousel widget affiche une collection d'objets CarouselCard qui peuvent être affichés à l'écran et masqués. Vous pouvez ajouter plusieurs widgets à chaque CarouselCard.

Le CardFixedFooter widget 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 ou fiche Google Chat renvoie une erreur, l'interface Chat affiche un message indiquant "Un problème est survenu." ou "Impossible de traiter votre demande." Parfois, l'interface utilisateur Chat n'affiche aucun message d'erreur, mais l'application ou la fiche Chat produit un résultat inattendu. Par exemple, un message de fiche peut ne pas s'afficher.

Bien qu'un message d'erreur ne s'affiche pas dans l'interface utilisateur 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 pour les applications Chat est activée. Pour obtenir de l'aide sur l'affichage, le débogage et la correction des erreurs, consultez Résoudre et corriger les erreurs Google Chat.