Grid

Le widget Grid affiche une grille contenant une collection d'éléments.


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

Ouvrez l'outil de création de cartes

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).

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 2 colonnes comporte cinq lignes. Une grille de 11 éléments et 2 colonnes a 6 lignes.

Exemple: grille à deux colonnes avec un seul élément

L'exemple suivant affiche une boîte de dialogue composée d'un widget grid. Il crée une grille à deux colonnes avec un seul élément.

Représentation et champs JSON

Représentation JSON
{
  "title": string,
  "items": [
    {
      object (GridItem)
    }
  ],
  "borderStyle": {
    object (BorderStyle)
  },
  "columnCount": integer,
  "onClick": {
    object (OnClick)
  }
}
Champs
title

string

Texte qui s'affiche dans l'en-tête de la grille.

items[]

object (GridItem)

Éléments à afficher dans la grille.

borderStyle

object (BorderStyle)

Style de bordure à appliquer à chaque élément de la grille.

columnCount

integer

Nombre de colonnes à afficher dans la grille. Une valeur par défaut est utilisée si ce champ n'est pas spécifié. Cette valeur par défaut varie selon l'emplacement de la grille (boîte de dialogue ou création associée).

onClick

object (OnClick)

Ce rappel est réutilisé par chaque élément de la grille, mais avec l'identifiant et l'index de l'élément dans la liste des éléments ajoutés aux paramètres du rappel.

GridItem

Représentation JSON
{
  "id": string,
  "image": {
    object (ImageComponent)
  },
  "title": string,
  "subtitle": string,
  "layout": enum (GridItemLayout)
}
Champs
id

string

Identifiant spécifié par l'utilisateur pour cet élément de grille. Cet identifiant est renvoyé dans les paramètres de rappel onClick de la grille parente.

image

object (ImageComponent)

Image qui s'affiche dans l'élément de la grille.

title

string

Titre de l'élément de la grille.

subtitle

string

Sous-titre de l'élément de la grille.

layout

enum (GridItemLayout)

Mise en page à utiliser pour l'élément de la grille.

BorderStyle

Représentation JSON
{
  "type": enum (BorderType),
  "strokeColor": {
    object (Color)
  },
  "cornerRadius": integer
}
Champs
type

enum (BorderType)

Type de bordure.

strokeColor

object (Color)

Couleurs à utiliser lorsque le type est BORDER_TYPE_STROKE.

cornerRadius

integer

Rayon de l'angle de la bordure.

BorderType

Enums
BORDER_TYPE_UNSPECIFIED Ne pas utiliser. URL indéterminée.
NO_BORDER Valeur par défaut. Aucune bordure
STROKE Contours.

Couleur

Représentation JSON
{
  "red": number,
  "green": number,
  "blue": number,
  "alpha": number
}
Champs
red

number

Quantité de rouge dans la couleur en tant que valeur dans l'intervalle [0, 1].

green

number

Quantité de vert dans la couleur en tant que valeur dans l'intervalle [0, 1].

blue

number

Quantité de bleu dans la couleur en tant que valeur dans l'intervalle [0, 1].

alpha

number

Fraction de cette couleur à appliquer au pixel. En d'autres termes, la couleur finale du pixel est définie par l'équation :

pixel color = alpha * (this color) + (1.0 - alpha) * (background color)

Cela signifie qu'une valeur de 1,0 correspond à une couleur solide, tandis qu'une valeur de 0,0 correspond à une couleur complètement transparente. Un message wrapper est utilisé à la place d'une simple valeur scalaire flottante afin qu'il soit possible de distinguer une valeur par défaut de la valeur non définie. En cas d'omission, cet objet couleur est rendu sous forme de couleur unie (comme si la valeur alpha avait été explicitement définie sur 1,0).

OnClick

Représente la manière de répondre lorsque les utilisateurs cliquent sur un élément interactif d'une carte, comme un bouton.

Disponible pour les applications Google Chat et les modules complémentaires Google Workspace.

Représentation JSON
{

  // Union field data can be only one of the following:
  "action": {
    object (Action)
  },
  "openLink": {
    object (OpenLink)
  },
  "openDynamicLinkAction": {
    object (Action)
  },
  "card": {
    object (Card)
  }
  // End of list of possible types for union field data.
}
Champs

Champ d'union data.

data ne peut être que l'un des éléments suivants:

action

object (Action)

Si cette valeur est spécifiée, une action est déclenchée par ce onClick.

card

object (Card)

Une nouvelle carte est insérée dans la pile de cartes après un clic, si spécifié.

Disponible pour les modules complémentaires Google Workspace et indisponible pour les applications Google Chat.

Action

Action décrivant le comportement lors de l'envoi du formulaire. Par exemple, vous pouvez appeler un script Apps Script pour gérer le formulaire. Si l'action est déclenchée, les valeurs du formulaire sont envoyées au serveur.

Disponible pour les applications Google Chat et les modules complémentaires Google Workspace.

Représentation JSON
{
  "function": string,
  "parameters": [
    {
      object (ActionParameter)
    }
  ],
  "loadIndicator": enum (LoadIndicator),
  "persistValues": boolean,
  "interaction": enum (Interaction)
}
Champs
function

string

Fonction personnalisée à invoquer lorsque l'utilisateur clique sur l'élément conteneur ou est activé en continu.

Pour obtenir un exemple d'utilisation, consultez la section Créer des fiches interactives.

parameters[]

object (ActionParameter)

Liste des paramètres d'action.

loadIndicator

enum (LoadIndicator)

Spécifie l'indicateur de chargement que l'action affiche lors de l'appel à l'action.

persistValues

boolean

Indique si les valeurs du formulaire sont conservées après l'action. La valeur par défaut est false.

Si la valeur est true, les valeurs du formulaire restent après le déclenchement de l'action. Pour permettre à l'utilisateur d'effectuer des modifications pendant le traitement de l'action, définissez LoadIndicator sur NONE. Pour les messages sous forme de fiches dans les applications Chat, vous devez également définir ResponseType de l'action sur UPDATE_MESSAGE et utiliser le même cardId que celui figurant sur la fiche contenant l'action.

Si la valeur est false, les valeurs du formulaire sont effacées lorsque l'action est déclenchée. Pour empêcher l'utilisateur d'apporter des modifications pendant le traitement de l'action, définissez LoadIndicator sur SPINNER.

interaction

enum (Interaction)

Facultatif. Obligatoire lors de l'ouverture d'une boîte de dialogue.

Que faire en réponse à une interaction avec un utilisateur (par exemple, lorsqu'il clique sur un bouton dans un message de fiche) ?

Si aucune valeur n'est spécifiée, l'application répond en exécutant normalement un action (comme l'ouverture d'un lien ou l'exécution d'une fonction).

Si vous spécifiez un interaction, l'application peut répondre de manière interactive spéciale. Par exemple, en définissant interaction sur OPEN_DIALOG, l'application peut ouvrir une boîte de dialogue. Si cet indicateur est spécifié, aucun indicateur de chargement ne s'affiche. Si elle est spécifiée pour un module complémentaire, la fiche entière est supprimée et rien n'est affiché dans le client.

Disponible pour les applications Google Chat et indisponible pour les modules complémentaires Google Workspace.

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.