Mettre en forme la structure d'une carte ou d'une boîte de dialogue

Cette page explique comment mettre en forme et structurer les widgets dans une fiche ou un message de boîte de dialogue.

Créez et prévisualisez des fiches avec Card Builder.

Ouvrez l'outil de création de cartes

Prérequis

  • Un compte Google Workspace ayant accès à Google Chat
  • Une application Chat publiée. Pour créer une application Chat, suivez ce quickstart.

    • Afficher les fiches et les boîtes de dialogue sous forme de colonnes

    Le widget columns affiche jusqu'à deux colonnes dans une fiche ou une boîte de dialogue. Vous pouvez ajouter des widgets à chaque colonne. Ils apparaissent dans l'ordre dans lequel ils ont été 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 colonne, 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 de 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 est encapsulée en dessous de la première.

    Définir la largeur d'une 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 retourne à la ligne sous la première:

    • Sur le Web, la deuxième colonne renvoie si la largeur de l'écran est inférieure ou égale à 480 pixels.
    • Sur les appareils iOS, la deuxième colonne est encapsulée si la largeur de l'écran est inférieure ou égale à 300 pts.
    • Sur les appareils Android, la deuxième colonne est encapsulée 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. horizontalSizeStyle est appliqué à chaque élément des colonnes afin de manipuler l'espace que le texte remplit dans chaque colonne:

    • Le premier paragraphe de texte utilise FILL_MINIMUM_SPACE pour remplir jusqu'à 30 % de la largeur de la fiche.
    • Le deuxième paragraphe de texte utilise FILL_AVAILABLE_SPACE pour remplir l'espace disponible selon la largeur de la carte. Dans cet exemple, il occupe 70% de la largeur de la carte.
    • Le troisième paragraphe de texte ne définit pas horizontalSizeStyle. Il occupe donc par défaut l'espace disponible de l'espace de la carte.
    • Le quatrième paragraphe de texte utilise FILL_MINIMUM_SPACE pour remplir jusqu'à 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 horizontalAligment. Si le champ horizontalAlignment n'est pas défini, les widgets sont alignés à gauche dans la colonne.

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

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

    L'exemple suivant aligne horizontalement le texte dans 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é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 sur le haut:

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

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

    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 à faire la distinction entre un widget et un autre, ce qui facilite la lecture et la compréhension des cartes.

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

    Afficher une grille avec une collection d'éléments

    Le widget grid affiche une grille avec une collection d'éléments. Une grille prend en charge un nombre indéfini 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 a 6 lignes.

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

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

    Définir l'emplacement du texte avec une image dans une grille

    Le champ gridItemLayout vous permet de définir dans chaque gridItem 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 apparaît 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 définit le texte à afficher sous l'image et la troisième ne définit pas la position du texte.

    Ajouter une bordure aux éléments de l'interface utilisateur

    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 ne s'affiche 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 sont définis individuellement. La première image a une bordure définie sur STROKE. La deuxième image a une bordure définie sur NO_BORDER. Aucune bordure n'est définie pour la troisième image.

    Dépannage

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

    Bien qu'aucun message d'erreur ne s'affiche dans l'interface 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. Si vous avez besoin d'aide pour afficher, déboguer et corriger les erreurs, consultez Résoudre les erreurs Google Chat.