Créer des fiches pour les applications Google Chat

Cette page explique comment créer les composants et la structure d'un fiche. Les cartes sont des valeurs que les applications Google Chat peuvent utiliser pour présenter et collecter des utilisateurs de Chat. Les applications de chat peuvent créer et affiche des cartes dans les interfaces suivantes:

  • Messages contenant une ou plusieurs fiches.
  • Pages d'accueil, Il s'agit d'une fiche qui apparaît dans l'onglet Accueil messages avec l'application Chat.
  • Les 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 découvrirez les composants suivants d'une fiche:

  • Les en-têtes, qui contiennent généralement le titre d'une fiche ou d'une fiche .
  • Les sections, qui constituent le corps principal. de la fiche, y compris les widgets et autres éléments interactifs. Dans une fiche vous pouvez structurer la fiche, y compris des colonnes et des grilles.
  • Les pieds de page fixes, qui s'affichent en bas des pour afficher des éléments permanents d'interface utilisateur, tels que des boutons

Prérequis

Une application Google Chat avec des fonctionnalités interactives. Pour créer un interactive, suivez l'un des guides de démarrage rapide suivants sur l'architecture de l'application que vous souhaitez utiliser:

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

Ouvrir Card Builder

Ajouter un en-tête

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

Voici un exemple de CardHeader:

Ajouter une ou plusieurs sections de fiches

Widget CardSection est un conteneur de haut niveau dans une carte. Vous utilisez une carte pour regrouper les 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 textParagraph widgets:

Ajouter une séparation horizontale entre les widgets

La Widget divider Affiche une ligne horizontale couvrant toute la largeur d'une carte. entre des widgets empilés verticalement. La ligne est un séparateur visuel qui aide les utilisateurs font la distinction entre un widget et un autre, ce qui facilite la lecture des cartes. et comprendre.

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

Ajouter des colonnes

La Widget columns affiche jusqu'à deux colonnes par fiche. Vous pouvez ajouter des widgets à chaque colonne ; les widgets apparaissent dans l'ordre dans lequel ils sont 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 le 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 qui présente 2 colonnes de texte. Pour n'afficher que la mise en page des colonnes et réduire le code échantillon, cliquez sur Réduire. Lorsque l'espace est limité, comme dans l'exemple suivant, la deuxième colonne encapsule sous la première colonne.

Définir la largeur de colonne

Les colonnes s'affichent côte à côte. Vous pouvez personnaliser la largeur de chaque colonne à l'aide du Champ horizontalSizeStyle. Si la largeur de l'écran est trop étroite, la deuxième colonne passe à la ligne sous la en premier:

  • Sur le Web, la deuxième colonne renvoie automatiquement à un message si la largeur de l'écran est inférieure ou égale à 480 pixels.
  • Sur les appareils iOS, la deuxième colonne renvoie automatiquement à une ligne si la largeur de l'écran est inférieure à égal à 300 pts
  • Sur les appareils Android, la deuxième colonne renvoie automatiquement à une ligne si la largeur de l'écran est inférieure à ou égales à 320 dp.

L'exemple suivant affiche une fiche avec un widget columns qui présente 2 colonnes de texte avec 4 éléments dans les colonnes. Chaque élément des colonnes a horizontalSizeStyle appliqué afin de manipuler l'espace entre le texte remplit chaque colonne:

  • Le premier paragraphe de texte utilise FILL_MINIMUM_SPACE pour remplir un maximum de 30% de la largeur de la carte.
  • Le deuxième paragraphe utilise FILL_AVAILABLE_SPACE pour remplir le champ d’espace dans la largeur de la carte. Dans cet exemple, elle occupe 70% de l'espace la largeur.
  • 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 l'espace de la carte.
  • Le quatrième paragraphe de texte utilise FILL_MINIMUM_SPACE pour remplir un maximum de 30% de la largeur de la carte.

Définir l'alignement horizontal d'une colonne

Vous pouvez aligner les widgets horizontalement à gauche, à droite ou au centre d'une colonne en définir les Champ horizontalAligment. Si le fichier horizontalAlignment n'est pas défini, les widgets sont alignés sur le restant dans une colonne.

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

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

L'exemple suivant aligne horizontalement le texte d'une colonne à 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éfinir les Champ verticalAlignment. Si le champ verticalAlignment n'est pas défini, les widgets d'une colonne sont alignés. en haut de la page.

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

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

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

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

La Widget grid affiche une grille avec un ensemble d'éléments. Une grille prend en charge n'importe quel nombre des colonnes et des éléments. Le nombre de lignes est calculé en divisant le nombre d'éléments par le nombre de colonnes. Une grille de 10 éléments et 2 colonnes contient 5 lignes. Grille contenant 11 éléments et 2 de colonnes contient 6 lignes.

Le widget prend en charge les suggestions, qui aident les utilisateurs à saisir des données uniformes. les actions en cas de changement, qui sont Actions qui s'exécutent lorsqu'une modification est apportée au champ de saisie de texte, par exemple lorsqu'un utilisateur ajoute ou supprimer du texte.

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

Pour définir l'emplacement du texte d'une image dans une grille, vous pouvez spécifier la Champ gridItemLayout. Ce champ vous permet de définir si le texte doit s'afficher au-dessus ou en dessous. l'élément dans la grille. Si gridItemLayout n'est pas défini, le texte est défini par défaut sur apparaissent 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 seconde la grille définit le texte à afficher sous l'image, tandis que la troisième grille ne définit pas la position du texte.

Ajouter une bordure à une grille ou une colonne

Vous pouvez ajouter une bordure aux éléments qui apparaissent dans un widget column ou grid. ces éléments d'UI en définissant Champ borderType et un 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 le type, le style et la couleur de bordure ont été définis pour s'appliquer à tous les éléments de la la grille.

L'exemple suivant est une grille à 3 colonnes avec une image dans chaque grille et le le style et le type de bordure sont définis individuellement. Le premier L'image comporte une bordure définie sur STROKE. La deuxième image a une bordure définie comme suit : NO_BORDER Aucune bordure n'est définie pour la troisième image.

CardFixedFooter le 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 boîtes de dialogue.

Voici un exemple de widget CardFixedFooter avec deux boutons:

Résoudre les problèmes

Lorsqu'une application ou card renvoie une erreur, la L'interface Chat affiche le message "Une erreur s'est produite". ou "Impossible de traiter votre demande." Parfois, l'interface utilisateur de Chat n'affiche aucun message d'erreur, mais que l'application ou la carte produit un résultat inattendu. Par exemple, un message de fiche peut ne pas s'affichent.

Même s'il est possible qu'aucun message d'erreur ne s'affiche dans l'interface utilisateur de Chat, Des messages d'erreur descriptifs et des données de journaux 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, le débogage et la correction des erreurs, consultez Résoudre les problèmes liés à Google Chat