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 cartes
  • Pages d'accueil, qui est une fiche qui s'affiche 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 des messages et des pages d'accueil.

Sur cette page, vous allez découvrir les composants suivants d'une fiche:

  • Les en-têtes, qui contiennent généralement le titre d'une fiche ou d'une section de fiche.
  • Les sections, qui constituent le corps principal de la fiche, y compris les widgets et d'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 pour laquelle les fonctionnalités interactives sont activées. Pour créer une application Chat interactive, suivez l'un des guides de démarrage rapide suivants en fonction de l'architecture de l'application que vous souhaitez utiliser:

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

Ouvrir l'outil de création de cartes

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 carte pour regrouper des widgets dans une carte. Pour chaque section de la 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 carte entre les widgets empilés verticalement. La 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.

Vous trouverez ci-dessous 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. Ils s'affichent dans l'ordre dans lequel ils sont spécifiés. 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 colonne. É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 afficher uniquement 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 se poursuit 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 se rabat sous la première:

  • Sur le Web, la deuxième colonne se plie si la largeur de l'écran est inférieure ou égale à 480 pixels.
  • Sur les appareils iOS, la deuxième colonne se plie si la largeur de l'écran est inférieure ou égale à 300 pt.
  • Sur les appareils Android, la deuxième colonne se plie 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. horizontalSizeStyle est appliqué à chaque élément des colonnes afin de manipuler l'espace que le texte occupe 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 occupe 70% de la largeur de la fiche.
  • Le troisième paragraphe de texte ne définit pas horizontalSizeStyle. Il remplit donc par défaut l'espace disponible de la carte.
  • 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 horizontalement les widgets à gauche, à droite ou au centre d'une colonne en définissant le champ horizontalAligment. 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 à 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 verticalement les widgets 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 en haut:

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

L'exemple suivant aligne verticalement le texte dans 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 avec 11 éléments et deux colonnes comporte six lignes.

Le widget est compatible avec les suggestions, qui aident les utilisateurs à saisir des données uniformes, et les actions de modification, qui sont des Actions exécutées lorsqu'un changement 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 champ gridItemLayout. 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 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 sont 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. Aucune bordure n'est définie pour la troisième image.

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 ou une fiche Google Chat renvoie une erreur, l'interface Chat affiche le message "Un problème s'est produit". ou "Impossible de traiter votre demande". Il arrive que l'interface utilisateur de Chat n'affiche aucun message d'erreur, mais que l'application ou la fiche Chat produise 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 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 pour les applications Chat est activée. Pour savoir comment afficher, déboguer et corriger les erreurs, consultez Résoudre et corriger les erreurs Google Chat.