Liste des boutons

Le widget ButtonList affiche un ensemble de boutons. Les boutons peuvent afficher du texte, une icône, ou les deux.


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

Ouvrez l'outil de création de cartes

Chaque Button prend en charge une action OnClick qui se produit lorsque les utilisateurs cliquent sur le bouton. Exemple :

  • Ouvrez un lien hypertexte avec OpenLink, par exemple un lien hypertexte vers la documentation Google Chat pour les développeurs, https://developers.google.com/chat.
  • Exécuter une action qui exécute une fonction personnalisée, telle que l'appel d'une API

Vous pouvez empêcher les utilisateurs de cliquer sur un bouton en définissant "disabled": "true".

Pour des raisons d'accessibilité, les boutons prennent en charge le texte alternatif.

Exemples

Voici une fiche composée d'un widget ButtonList constitué de deux Button. Un bouton permet d'ouvrir la documentation pour les développeurs Google Chat dans un nouvel onglet. L'autre bouton exécute une fonction personnalisée appelée goToView() et transmet un paramètre: viewType="Bird Eye View".

Exemple 2: bouton avec couleur personnalisée et bouton désactivé

L'exemple suivant affiche une fiche composée d'un widget ButtonList constitué de deux Button. Un bouton utilise le champ Color pour personnaliser la couleur d'arrière-plan du bouton. L'autre bouton est désactivé avec le champ Disabled, ce qui empêche l'utilisateur de cliquer sur le bouton et d'exécuter la fonction.

Exemple 3: Boutons affichant des icônes

L'exemple suivant affiche une fiche composée d'un widget ButtonList avec deux widgets d'icône Button. Un bouton utilise le champ knownIcon pour afficher l'icône d'e-mail intégrée de Google Chat. L'autre bouton utilise le champ iconUrl pour afficher un widget d'icône personnalisée.

Exemple 4: Boutons avec une icône et du texte

L'exemple suivant affiche une fiche composée d'un widget ButtonList qui invite l'utilisateur à envoyer un e-mail. Le premier bouton affiche une icône d'e-mail et le second affiche du texte. L'utilisateur peut cliquer sur l'icône ou sur le bouton de texte pour exécuter la fonction sendEmail.

Représentation et champs JSON

Représentation JSON
{
  "buttons": [
    {
      object (Button)
    }
  ]
}
Champs
buttons[]

object (Button)

Tableau de boutons.

Bouton

Représentation JSON
{
  "text": string,
  "icon": {
    object (Icon)
  },
  "color": {
    object (Color)
  },
  "onClick": {
    object (OnClick)
  },
  "disabled": boolean,
  "altText": string
}
Champs
text

string

Texte affiché dans le bouton.

icon

object (Icon)

Image de l'icône. Si icon et text sont tous les deux définis, l'icône apparaît avant le texte.

color

object (Color)

Si cette option est définie, le bouton est rempli d'une couleur d'arrière-plan unie et la couleur de la police change pour maintenir le contraste avec l'arrière-plan. Par exemple, si vous définissez un arrière-plan bleu, le texte sera probablement blanc.

Si cette règle n'est pas configurée, l'arrière-plan de l'image est blanc et la couleur de la police est bleue.

Pour le rouge, le vert et le bleu, la valeur de chaque champ est un nombre float que vous pouvez exprimer de deux manières: en tant que nombre compris entre 0 et 255 divisé par 255 (153/255) ou en tant que valeur comprise entre 0 et 1 (0,6). 0 représente l'absence d'une couleur et 1 ou 255/255 représente la présence totale de cette couleur sur l'échelle RVB.

Vous pouvez également définir alpha, qui définit un niveau de transparence à l'aide de cette équation:

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

Pour alpha, la valeur 1 correspond à une couleur unie, et la valeur 0 à une couleur totalement transparente.

Par exemple, la couleur suivante représente un rouge à moitié transparent:

"color": {
   "red": 1,
   "green": 0,
   "blue": 0,
   "alpha": 0.5
}
onClick

object (OnClick)

Obligatoire. Action à effectuer lorsqu'un utilisateur clique sur le bouton (par exemple, ouverture d'un lien hypertexte ou exécution d'une fonction personnalisée).

disabled

boolean

Si la valeur est true, le bouton s'affiche à l'état inactif et ne répond pas aux actions de l'utilisateur.

altText

string

Texte alternatif utilisé pour l'accessibilité.

Définissez un texte descriptif qui permet aux utilisateurs de savoir à quoi sert le bouton. Par exemple, si un bouton ouvre un lien hypertexte, vous pouvez saisir: "Ouvre un nouvel onglet de navigateur et accède à la documentation pour les développeurs Google Chat à l'adresse https://developers.google.com/chat".

Icône

Icône affichée dans un widget sur une carte. Pour voir un exemple dans les applications Google Chat, consultez Icône.

Compatible avec les icônes intégrées et personnalisées.

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

Représentation JSON
{
  "altText": string,
  "imageType": enum (ImageType),

  // Union field icons can be only one of the following:
  "knownIcon": string,
  "iconUrl": string
  // End of list of possible types for union field icons.
}
Champs
altText

string

Facultatif. Description de l'icône utilisée pour l'accessibilité. Si aucune valeur n'est spécifiée, la valeur par défaut Button est fournie. Une bonne pratique consiste à définir une description utile de ce que l'icône affiche et, le cas échéant, de ce qu'elle fait. Par exemple, A user's account portrait ou Opens a new browser tab and navigates to the Google Chat developer documentation at https://developers.google.com/chat.

Si l'icône est définie dans un Button, l'altText apparaît sous forme de texte d'aide lorsque l'utilisateur pointe sur le bouton. Toutefois, si le bouton définit également text, le altText de l'icône est ignoré.

imageType

enum (ImageType)

Style de recadrage appliqué à l'image. Dans certains cas, si vous appliquez un recadrage CIRCLE, l'image sera plus grande qu'une icône intégrée.

Champ d'union icons. Icône affichée dans le widget sur la fiche. icons ne peut être que l'un des éléments suivants:
knownIcon

string

Afficher l'une des icônes intégrées fournies par Google Workspace.

Par exemple, pour afficher une icône représentant un avion, spécifiez AIRPLANE. Pour un bus, spécifiez BUS.

Pour obtenir la liste complète des icônes compatibles, consultez la section Icônes intégrées.

iconUrl

string

afficher une icône personnalisée hébergée sur une URL HTTPS ;

Exemple :

"iconUrl":
"https://developers.google.com/chat/images/quickstart-app-avatar.png"

Les types de fichiers .png et .jpg sont compatibles.

ImageType

Forme utilisée pour recadrer l'image.

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

Enums
SQUARE Valeur par défaut. Applique un masque carré à l'image. Par exemple, une image de 4 x 3 devient 3 x 3.
CIRCLE Applique un masque circulaire à l'image. Par exemple, une image de 4 x 3 devient un cercle d'un diamètre de 3.

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.

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.