Package google.apps.card.v1

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Index

Action

Action décrivant le comportement lors de l'envoi du formulaire. Par exemple, un script Apps Script peut être appelé pour gérer le formulaire.

Champs
function

string

Fonction personnalisée à invoquer lorsque l'élément parent est activé ou s'il clique dessus de façon incorrecte.

Pour en savoir plus sur l'utilisation, consultez Créer des fiches interactives.

parameters[]

ActionParameter

Liste des paramètres d'action.

loadIndicator

LoadIndicator

Indique l'indicateur de chargement que l'action affiche lorsqu'elle est appelée.

persistValues

bool

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 sont conservées après le déclenchement de l'action. Lorsque vous utilisez LoadIndicator.NONE pour les actions, il est recommandé d'utiliser persist_values = true, car vous évitez que la réponse n'écrase pas les modifications apportées par l'utilisateur après le formulaire ou lors des actions lors de la modification.

Si la valeur est false, les valeurs du formulaire sont effacées lors du déclenchement de l'action. Lorsque persist_values est défini sur false, il est fortement recommandé d'utiliser LoadIndicator.SPINNER pour toutes les actions, car cette action verrouille l'interface utilisateur afin qu'aucune modification ne soit effectuée par l'utilisateur pendant le traitement de l'action.

Non disponible dans les applications de chat.

interaction

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 le bouton d'un message sur une fiche)

Si elle n'est pas spécifiée, l'application répond en exécutant un action, comme ouvrir un lien ou exécuter une fonction, comme d'habitude.

En spécifiant un interaction, l'application peut répondre de manière interactive spécifique. Par exemple, si vous définissez interaction sur OPEN_DIALOG, l'application peut ouvrir une boîte de dialogue.

Si spécifié, aucun indicateur de chargement ne s'affiche.

Compatible avec les applications de chat, mais pas avec les modules complémentaires Google Workspace. Si elle est spécifiée pour un module complémentaire, la totalité de la carte est supprimée et rien n'apparaît dans le client.

ParamètreAction

Liste des paramètres de chaîne à fournir lorsque la méthode d'action est appelée. Prenons l'exemple de trois boutons de mise en attente : "Répéter maintenant", "Répéter un jour" et "Répéter la semaine prochaine". Vous pouvez utiliser la méthode d'action = Répéter() pour transmettre le type de mise en pause et la durée de répétition dans la liste des paramètres de chaîne.

Pour en savoir plus, consultez CommonEventObject.

Champs
key

string

Nom du paramètre du script d'action.

value

string

Valeur du paramètre.

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 le bouton d'un message sur une fiche)

Si elle n'est pas spécifiée, l'application répond en exécutant un action, comme ouvrir un lien ou exécuter une fonction, comme d'habitude.

En spécifiant un interaction, l'application peut répondre de manière interactive spécifique. Par exemple, si vous définissez interaction sur OPEN_DIALOG, l'application peut ouvrir une boîte de dialogue.

Si spécifié, aucun indicateur de chargement ne s'affiche.

Compatible avec les applications de chat, mais pas avec les modules complémentaires Google Workspace. Si elle est spécifiée pour un module complémentaire, la totalité de la carte est supprimée et rien n'apparaît dans le client.

Enums
INTERACTION_UNSPECIFIED Valeur par défaut. action s'exécute normalement.
OPEN_DIALOG

Ouvre une boîte de dialogue, une interface de type "Fenêtre" que les applications de chat utilisent pour interagir avec les utilisateurs.

Uniquement compatible avec les applications de chat en réponse à des clics sur des boutons figurant dans les messages de fiches.

Non compatibles avec les modules complémentaires Google Workspace. Si elle est spécifiée pour un module complémentaire, la totalité de la carte est supprimée et rien n'apparaît dans le client.

Indicateur de charge

Indique l'indicateur de chargement que l'action affiche lorsqu'elle est appelée.

Enums
SPINNER Affiche une icône de chargement pour indiquer que le contenu est en cours de chargement.
NONE Rien ne s'affiche.

Style bordure

Représente le style de bordure complet appliqué aux éléments d'un widget.

Champs
type

BorderType

Type de bordure.

strokeColor

Color

Couleurs à utiliser lorsque le type est BORDER_TYPE_STROKE.

cornerRadius

int32

Rayon de l'angle de la bordure

Type de bordure

Représente les types de bordure appliqués aux widgets.

Enums
BORDER_TYPE_UNSPECIFIED Aucune valeur spécifiée.
NO_BORDER Valeur par défaut. Aucune bordure.
STROKE Contour.

Bouton

Texte, icône ou bouton Texte + icône sur lesquels les utilisateurs peuvent cliquer.

Pour rendre une image un bouton cliquable, spécifiez un Image (et non un ImageComponent) et définissez une action onClick.

Champs
text

string

Texte affiché à l'intérieur du bouton.

icon

Icon

Image de l'icône. Si les options icon et text sont toutes les deux définies, l'icône apparaît à la place du texte.

Une icône et du texte seront bientôt disponibles.

color

Color

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

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

Pour le rouge, le vert et le bleu, la valeur de chaque champ est un nombre float qui peut être exprimé de l'une des deux manières suivantes: sous la forme d'un nombre compris entre 0 et 255 divisé par 255 (153/255), ou d'une valeur comprise entre 0 et 1 (0,6). 0 représente l'absence de couleur et 1 ou 255/255 représente la présence complète de cette couleur sur l'échelle RVB.

Vous pouvez également définir la valeur alpha, qui définit le niveau de transparence à l'aide de l'équation suivante:

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

Pour la valeur alpha, une valeur de 1 correspond à une couleur unie, et une valeur de 0 correspond à une couleur complètement transparente.

Par exemple, la couleur suivante représente un demi-rouge transparent:

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

OnClick

Action à effectuer lorsque l'utilisateur clique sur le bouton, par exemple en ouvrant un lien hypertexte ou en exécutant une fonction personnalisée.

disabled

bool

S'il est défini sur true, le bouton est inactif et ne répond pas aux actions des utilisateurs.

altText

string

Texte alternatif utilisé pour l'accessibilité.

Définissez un texte descriptif permettant aux utilisateurs de connaître la fonction du bouton. Par exemple, si un bouton ouvre un lien hypertexte, vous pouvez indiquer : "Ouvre un nouvel onglet du navigateur et accède à la documentation destinée aux développeurs Google Chat à l'adresse https://developers.google.com/chat.

Aucun effet lorsqu'une icône est définie. Utilisez plutôt icon.alt_text.

Liste des boutons

Liste de boutons disposés horizontalement.

Champs
buttons[]

Button

Tableau de boutons.

Carte

Elles sont compatibles avec une mise en page définie, les éléments interactifs de l'interface utilisateur tels que les boutons et les éléments rich media comme les images. Les fiches permettent de présenter des informations détaillées, de collecter des informations auprès des utilisateurs et de les guider vers la prochaine étape.

Dans Google Chat, les fiches apparaissent à plusieurs endroits:

  • Messages individuels.
  • Accompagné d'un SMS, juste en dessous de celui-ci.
  • En tant que boîte de dialogue

L'exemple JSON suivant crée une "fiche de contact" qui inclut:

  • En-tête contenant le nom du contact, sa fonction et son avatar.
  • Section contenant les coordonnées, y compris le texte mis en forme.
  • Boutons sur lesquels les utilisateurs peuvent cliquer pour partager un contact ou afficher plus ou moins d'informations.

Exemple de fiche de contact

{
  "cardsV2": [
    {
      "cardId": "unique-card-id",
      "card": {
        "header": {
          "title": "Sasha",
          "subtitle": "Software Engineer",
          "imageUrl":
          "https://developers.google.com/chat/images/quickstart-app-avatar.png",
          "imageType": "CIRCLE",
          "imageAltText": "Avatar for Sasha",
        },
        "sections": [
          {
            "header": "Contact Info",
            "collapsible": true,
            "uncollapsibleWidgetsCount": 1,
            "widgets": [
              {
                "decoratedText": {
                  "startIcon": {
                    "knownIcon": "EMAIL",
                  },
                  "text": "sasha@example.com",
                }
              },
              {
                "decoratedText": {
                  "startIcon": {
                    "knownIcon": "PERSON",
                  },
                  "text": "<font color=\"#80e27e\">Online</font>",
                },
              },
              {
                "decoratedText": {
                  "startIcon": {
                    "knownIcon": "PHONE",
                  },
                  "text": "+1 (555) 555-1234",
                }
              },
              {
                "buttonList": {
                  "buttons": [
                    {
                      "text": "Share",
                      "onClick": {
                        "openLink": {
                          "url": "https://example.com/share",
                        }
                      }
                    },
                    {
                      "text": "Edit",
                      "onClick": {
                        "action": {
                          "function": "goToView",
                          "parameters": [
                            {
                              "key": "viewType",
                              "value": "EDIT",
                            }
                          ],
                        }
                      }
                    },
                  ],
                }
              },
            ],
          },
        ],
      },
    }
  ],
}
Champs
header

CardHeader

En-tête de la fiche. Un en-tête contient généralement une image principale et un titre. Les en-têtes apparaissent toujours en haut d'une fiche.

sections[]

Section

Contient une collection de widgets. Chaque section possède son propre en-tête facultatif. Les sections sont séparées visuellement par un séparateur.

cardActions[]

CardAction

Actions de la fiche. Les actions sont ajoutées au menu de la barre d'outils de la fiche.

Les fiches d'application de chat n'ont pas de barre d'outils. Par conséquent, cardActions[] n'est pas compatible avec les applications de chat.

Par exemple, le code JSON suivant construit un menu d'actions de fiche avec les options "Settings" (Paramètres) et "Send Feedback" (Envoyer des commentaires) :

"cardActions": [
  {
    "actionLabel": "Settings",
    "onClick": {
      "action": {
        "functionName": "goToView",
        "parameters": [
          {
            "key": "viewType",
            "value": "SETTING"
         }
        ],
        "loadIndicator": "LoadIndicator.SPINNER"
      }
    }
  },
  {
    "actionLabel": "Send Feedback",
    "onClick": {
      "openLink": {
        "url": "https://example.com/feedback"
      }
    }
  }
]
name

string

Nom de la carte. Utilisé comme identifiant de carte dans la navigation.

Étant donné que les applications de chat ne sont pas compatibles avec la navigation par carte, ils ignorent ce champ.

fixedFooter

CardFixedFooter

Pied de page fixe affiché au bas de cette fiche.

Définir fixedFooter sans spécifier de primaryButton ou secondaryButton entraîne une erreur.

Les applications de chat sont compatibles avec fixedFooter dans les boîtes de dialogue, mais pas dans les messages avec carte.

displayStyle

DisplayStyle

Dans les modules complémentaires Google Workspace, définit les propriétés d'affichage de peekCardHeader.

Non disponible dans les applications de chat.

peekCardHeader

CardHeader

Lors de l'affichage du contenu contextuel, l'en-tête de la fiche d'aperçu fait office d'espace réservé pour permettre à l'utilisateur de naviguer entre les fiches de la page d'accueil et les fiches contextuelles.

Non disponible dans les applications de chat.

Action de la carte

Une action sur une fiche est une action associée à celle-ci. Par exemple, une fiche de facture peut inclure des actions telles que supprimer une facture, l'envoyer par e-mail ou ouvrir la facture dans un navigateur.

Non disponible dans les applications de chat.

Champs
actionLabel

string

Libellé qui s'affiche en tant qu'élément du menu d'actions.

onClick

OnClick

Action onClick pour cette tâche.

Pied Fixe Fiche

Pied de page persistant (fixe) au bas de la fiche.

Définir fixedFooter sans spécifier de primaryButton ou secondaryButton entraîne une erreur.

Les applications de chat sont compatibles avec fixedFooter dans les boîtes de dialogue, mais pas dans les messages avec carte.

Champs
primaryButton

Button

Bouton principal du pied de page fixe. Le bouton doit être un bouton de texte avec un texte et une couleur définis.

secondaryButton

Button

Bouton secondaire du pied de page fixe. Le bouton doit être un bouton de texte avec un texte et une couleur définis. primaryButton doit être défini si secondaryButton est défini.

En-tête de fiche

Représente un en-tête de fiche.

Champs
title

string

Obligatoire. Titre de l'en-tête de la fiche. La hauteur de l'en-tête est fixe. Si un titre et un sous-titre sont spécifiés, ils occupent tous deux une ligne. Si seul le titre est spécifié, il occupe les deux lignes.

subtitle

string

Sous-titre de l'en-tête de la fiche. Si spécifié, apparaît sur sa propre ligne sous title.

imageType

ImageType

Forme utilisée pour recadrer l'image.

imageUrl

string

URL HTTPS de l'image dans l'en-tête de la fiche.

imageAltText

string

Texte alternatif de cette image, utilisé pour l'accessibilité.

Style d'affichage

Dans les modules complémentaires Google Workspace, le mode d'affichage d'une fiche est déterminé.

Non disponible dans les applications de chat.

Enums
DISPLAY_STYLE_UNSPECIFIED Ne l'utilisez pas.
PEEK L'en-tête de la fiche s'affiche en bas de la barre latérale, en masquant partiellement la fiche supérieure actuelle de la pile. Cliquez sur l'en-tête pour insérer la fiche dans la pile. Si la fiche ne comporte pas d'en-tête, un en-tête généré est utilisé à la place.
REPLACE Valeur par défaut. La fiche s'affiche en remplaçant la vue supérieure de la pile.

Section

Une section contient un ensemble de widgets qui s'affichent verticalement dans l'ordre dans lequel ils sont spécifiés.

Champs
header

string

Texte qui apparaît en haut d'une section. Accepte le texte HTML simple.

widgets[]

Widget

Tous les widgets de la section. Doit contenir au moins un widget.

collapsible

bool

Indique si cette section est réductible.

Les sections réductibles masquent une partie ou la totalité des widgets, mais les utilisateurs peuvent développer la section pour afficher les widgets masqués en cliquant sur Afficher plus. Les utilisateurs peuvent de nouveau masquer les widgets en cliquant sur Afficher moins.

Pour déterminer quels widgets sont masqués, indiquez uncollapsibleWidgetsCount.

uncollapsibleWidgetsCount

int32

Nombre de widgets non réductibles qui restent visibles même lorsqu'une section est réduite.

Par exemple, lorsqu'une section contient cinq widgets et que uncollapsibleWidgetsCount est défini sur 2, les deux premiers widgets sont toujours affichés, et les trois derniers sont réduits par défaut. uncollapsibleWidgetsCount n'est pris en compte que lorsque collapsible est true.

Outil de sélection de la date et de l'heure

Permet aux utilisateurs de spécifier une date, une heure ou les deux.

Accepte la saisie de texte des utilisateurs, mais dispose d'un sélecteur de date et d'heure interactif qui aide les utilisateurs à saisir des dates et heures correctement formatées. Si les utilisateurs saisissent une date ou une heure incorrectement, le widget affiche une erreur les invitant à saisir le bon format.

Non disponible dans les applications de chat. Les applis de chat seront bientôt disponibles.

Champs
name

string

Nom utilisé pour identifier le sélecteur de date et d'heure dans un événement de saisie de formulaire.

Pour en savoir plus sur l'utilisation des entrées de formulaire, consultez Recevoir des données de formulaire.

label

string

Texte qui invite les utilisateurs à saisir une date, une heure ou une date et une heure.

Spécifiez un texte qui aide l'utilisateur à saisir les informations dont votre application a besoin. Par exemple, si les utilisateurs prennent rendez-vous, un libellé tel que "Date du rendez-vous" ou "Date et heure du rendez-vous" peut être un bon choix.

type

DateTimePickerType

Type de date et d'heure pris en charge par le sélecteur de date et d'heure.

valueMsEpoch

int64

Valeur affichée par défaut avant l'entrée utilisateur ou précédente, représentée en millisecondes (Temps écoulé).

Pour le type DATE_AND_TIME, la valeur complète de l'époque est utilisée.

Pour le type DATE_ONLY, seule la date de l'époque est utilisée.

Pour le type TIME_ONLY, seule l'heure de l'époque est utilisée. Par exemple, pour représenter 3h du matin, définissez l'heure de l'époque sur 3 * 60 * 60 * 1000.

timezoneOffsetDate

int32

Nombre représentant le décalage horaire par rapport à l'heure UTC, en minutes. Si ce champ est défini, value_ms_epoch s'affiche dans le fuseau horaire spécifié. Si cette règle n'est pas configurée, elle utilise le fuseau horaire de l'utilisateur côté client.

onChangeAction

Action

Déclenchement lorsque l'utilisateur clique sur Enregistrer ou Effacer dans l'interface du sélecteur de date et d'heure.

Type de sélecteur d'heure

Type de date et d'heure pris en charge par le sélecteur de date et d'heure.

Enums
DATE_AND_TIME L'utilisateur peut sélectionner une date et une heure.
DATE_ONLY L'utilisateur ne peut sélectionner qu'une date.
TIME_ONLY L'utilisateur ne peut sélectionner qu'une heure.

Texte_décoré

Un widget qui affiche du texte avec des décorations facultatives, comme un libellé au-dessus ou en dessous du texte, une icône devant le texte, un widget de sélection ou un bouton après le texte.

Champs
icon
(deprecated)

Icon

Obsolète au profit de startIcon.

startIcon

Icon

Icône affichée devant le texte.

topLabel

string

Texte qui s'affiche au-dessus de text. Tronque toujours.

Permet une mise en forme simple. Pour en savoir plus, consultez Mise en forme du texte.

text

string

Obligatoire. Texte principal.

Permet une mise en forme simple. Pour en savoir plus, consultez Mise en forme du texte.

wrapText

bool

Paramètre de retour à la ligne automatique. Si la valeur est true, le texte s'affiche sur plusieurs lignes. Sinon, le texte est tronqué.

S'applique uniquement à text, et non à topLabel et bottomLabel.

bottomLabel

string

Texte qui apparaît sous text. Tronque toujours.

Permet une mise en forme simple. Pour en savoir plus, consultez Mise en forme du texte.

onClick

OnClick

Cette action se déclenche lorsque les utilisateurs cliquent sur topLabel ou sur bottomLabel.

Champ d'union control. Bouton, contacteur, case à cocher ou image qui apparaît à droite du texte dans le widget decoratedText. La control ne peut être qu'un des éléments suivants :
button

Button

Bouton sur lequel une personne peut cliquer pour déclencher une action.

switchControl

SwitchControl

Vous pouvez cliquer sur un widget de commutation pour modifier son état et déclencher une action. Actuellement compatible avec les boîtes de dialogue. Les messages de carte seront bientôt disponibles.

endIcon

Icon

Icône affichée après le texte.

Accepte les icônes standards et personnalisées.

SwitchControl

Bouton d'activation ou de case à cocher dans un widget decoratedText.

Compatible uniquement avec le widget decoratedText.

Actuellement compatible avec les boîtes de dialogue. Les messages de carte seront bientôt disponibles.

Champs
name

string

Nom à l'aide duquel le widget Switch est identifié dans un événement de saisie de formulaire.

Pour en savoir plus sur l'utilisation des entrées de formulaire, consultez Recevoir des données de formulaire.

value

string

Valeur saisie par un utilisateur, renvoyée lors d'un événement de saisie de formulaire.

Pour en savoir plus sur l'utilisation des entrées de formulaire, consultez Recevoir des données de formulaire.

selected

bool

Lorsque true est activé, le bouton est sélectionné.

onChangeAction

Action

Action à effectuer lorsque l'état du commutateur change (par exemple, la fonction à exécuter).

controlType

ControlType

Affichage du bouton dans l'interface utilisateur

Type de contrôle

Affichage du bouton dans l'interface utilisateur

Enums
SWITCH Un bouton bascule.
CHECKBOX Obsolète au profit de CHECK_BOX.
CHECK_BOX Case à cocher.

Séparateur

Affiche une ligne horizontale séparant les widgets.

Par exemple, le code JSON suivant crée un séparateur:

"divider": {
}

GetAutocompletionResponse

Réponse à la saisie semi-automatique du conteneur, qui inclut les éléments nécessaires pour afficher les éléments de saisie semi-automatique pour le champ de texte. Exemple :

{
  "autoComplete": {
    "items": [
      {
        "text": "C++"
      },
      {
        "text": "Java"
      },
      {
        "text": "JavaScript"
      },
      {
        "text": "Python"
      }
    ]
  }
}
Champs
autoComplete

Suggestions

schema

string

Il s'agit d'un champ de schéma no-op qui peut être présent dans le balisage pour la vérification de la syntaxe.

Grille

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

Actuellement compatible avec les boîtes de dialogue. Les messages de carte seront bientôt disponibles.

Par exemple, le code JSON suivant crée une grille à deux colonnes avec un seul élément:

"grid": {
  "title": "A fine collection of items",
  "numColumns": 2,
  "borderStyle": {
    "type": "STROKE",
    "cornerRadius": 4.0
  },
  "items": [
    "image": {
      "imageUri": "https://www.example.com/image.png",
      "cropStyle": {
        "type": "SQUARE"
      },
      "borderStyle": {
        "type": "STROKE"
      }
    },
    "title": "An item",
    "textAlignment": "CENTER"
  ],
  "onClick": {
    "openLink": {
      "url":"https://www.example.com"
    }
  }
}
Champs
title

string

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

items[]

GridItem

Éléments à afficher dans la grille.

borderStyle

BorderStyle

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

columnCount

int32

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 en fonction de l'emplacement de la grille (boîte de dialogue ou création associée).

onClick

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.

Élément de la grille

Représente un seul élément dans la grille.

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 Horween de la grille parente.

image

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

GridItemLayout

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

Disposition en grille

Représente les différentes options de mise en page disponibles pour un élément de grille.

Enums
GRID_ITEM_LAYOUT_UNSPECIFIED Aucune mise en page spécifiée.
TEXT_BELOW Le titre et le sous-titre sont affichés sous l'image de l'élément de la grille.
TEXT_ABOVE Le titre et le sous-titre sont affichés au-dessus de l'image de l'élément de la grille.

Icône

Icône affichée dans un widget sur une fiche.

Accepte les icônes standards et personnalisées.

Champs
altText

string

Facultatif. Description de l'icône d'accessibilité. Si aucune valeur n'est spécifiée, une valeur par défaut est fournie. Nous vous recommandons de définir une description utile. Par exemple, si une icône affiche le portrait d'un compte utilisateur, vous pouvez la décrire comme "Portrait de compte d'un utilisateur".

Si l'icône s'affiche dans un Button, ce texte alternatif est prioritaire et remplace le texte alternatif du bouton. Vous devez donc rédiger un texte alternatif pour le bouton: définissez le texte descriptif pour indiquer aux utilisateurs ce que fait le bouton. Par exemple, si un bouton ouvre un lien hypertexte, vous pouvez indiquer : "Ouvre un nouvel onglet du navigateur et accède à la documentation destinée aux développeurs Google Chat à l'adresse https://developers.google.com/chat.

imageType

ImageType

Style de recadrage appliqué à l'image. Dans certains cas, le recadrage de l'image CIRCLE est plus grand qu'une icône standard.

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

string

Affichez l'une des icônes standards fournies par Google Workspace.

Par exemple, pour afficher l'icône d'un avion, spécifiez AIRPLANE. Pour un bus, indiquez BUS.

Pour obtenir la liste complète des icônes acceptées, consultez les icônes standards.

iconUrl

string

Affichez 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 compatibles sont .png et .jpg.

Images

Une image spécifiée par une URL et pouvant avoir une action onClick.

Champs
imageUrl

string

URL https qui héberge l'image.

Exemple :

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

OnClick

Lorsqu'un utilisateur clique sur l'image, le clic déclenche cette action.

altText

string

Texte alternatif de cette image, utilisé pour l'accessibilité.

Composant Image

Représente une image.

Champs
imageUri

string

URL de l'image.

altText

string

Libellé d'accessibilité pour l'image.

cropStyle

ImageCropStyle

Style de recadrage à appliquer à l'image.

borderStyle

BorderStyle

Style de bordure à appliquer à l'image.

Style de recadrage de l'image

Représente le style de recadrage appliqué à une image.

Par exemple, pour appliquer un format 16:9, procédez comme suit :

cropStyle {
 "type": "RECTANGLE_CUSTOM",
 "aspectRatio": 16/9
}
Champs
type

ImageCropType

Type de recadrage.

aspectRatio

double

Proportions à utiliser si le type de recadrage est RECTANGLE_CUSTOM.

Par exemple, pour appliquer un format 16:9, procédez comme suit :

cropStyle {
 "type": "RECTANGLE_CUSTOM",
 "aspectRatio": 16/9
}

Type d'image recadré

Représente le style de recadrage appliqué à une image.

Enums
IMAGE_CROP_TYPE_UNSPECIFIED Aucune valeur spécifiée. Ne l'utilisez pas.
SQUARE Valeur par défaut. Applique un recadrage carré.
CIRCLE Applique un recadrage circulaire.
RECTANGLE_CUSTOM Applique un recadrage rectangulaire avec un format personnalisé. Définissez le format personnalisé avec aspectRatio.
RECTANGLE_4_3 Application d'un recadrage rectangulaire au format 4:3.

Action de fiche qui manipule la pile de fiches. Exemple :

1) Ajoutez une nouvelle carte à la pile (poursuivez ensuite).

 navigations : {
    pushCard : CARD
  }

2) Mettez la fiche à jour au-dessus de la pile.

  navigations : {
    popCard : true,
  }, {
    pushCard : CARD
  }

3) Revenez à l'étape précédente sans effectuer de mise à jour.

  navigations : {
    popCard : true,
  }

4) Revenez à plusieurs étapes et mettez à jour cette carte.

  navigations : {
    popCard : true,
  }, ... {
    pushCard : CARD
  }

5) Revenez à plusieurs étapes jusqu'à un CARD_NAME défini.

  navigations : {
    popToCardName : CARD_NAME,
  }, {
    pushCard : CARD
  }

6) Revenez à la racine et mettez à jour la carte.

  navigations : {
    popToRoot : true
  }, {
    pushCard : CARD
  }

7) Insérez le pop-up sur la carte spécifiée.

navigations : { popToCardName : CARD_NAME }, { popCard : true, }

8) Remplacez la carte du haut par une nouvelle.

  navigations : {
    updateCard : CARD
  }
Champs

Champ d'union navigate_action.

navigate_action ne peut être qu'un des éléments suivants :

popToRoot

bool

La pile de cartes élimine toutes les cartes, à l'exception de la carte racine.

pop

bool

Une pile de cartes s'affiche.

popToCard

string

La pile de fiches affiche toutes les fiches situées au-dessus de la carte indiquée.

pushCard

Card

Pile de cartes insérée dans une pile.

updateCard

Card

La pile des fiches met à jour la fiche du haut avec une nouvelle fiche et conserve les valeurs des champs remplis. Pour un champ non équivalent, la valeur est supprimée.

Notification

Action de fiche qui affiche une notification dans l'application hôte.

Champs
text

string

Texte brut à afficher pour la notification, sans balises HTML.

OnClick

Indique comment réagir lorsque les utilisateurs cliquent sur un élément interactif d'une fiche, tel qu'un bouton.

Champs

Champ d'union data.

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

action

Action

Si elle est spécifiée, une action est déclenchée par cet élément onClick.

openDynamicLinkAction

Action

Un module complémentaire déclenche cette action lorsqu'elle doit ouvrir un lien. À la différence de open_link, il faut communiquer avec le serveur pour obtenir le lien. Le client Web doit donc effectuer certaines tâches avant que la réponse de l'action d'ouverture du lien ne s'affiche à nouveau.

card

Card

Si vous indiquez une nouvelle fiche, celle-ci est transférée dans la pile.

Compatible avec les modules complémentaires Google Workspace, mais pas avec les applications de chat.

Fermer

Action du client lorsqu'un lien ouvert par une action OnClick est fermé.

La mise en œuvre dépend des capacités de la plate-forme cliente. Par exemple, un navigateur Web peut ouvrir un lien dans une fenêtre pop-up avec un gestionnaire OnClose.

Si les gestionnaires OnOpen et OnClose sont tous les deux définis, et que la plate-forme cliente n'accepte pas ces deux valeurs, OnClose est prioritaire.

Compatible avec les modules complémentaires Google Workspace, mais pas avec les applications de chat.

Enums
NOTHING Valeur par défaut. La carte ne se recharge pas. Rien ne se passe.
RELOAD

Actualise la fiche une fois la fenêtre enfant fermée.

Si elle est utilisée conjointement avec OpenAs.OVERLAY, la fenêtre enfant sert de boîte de dialogue modale, et la fiche parent est bloquée jusqu'à ce que la fenêtre enfant se ferme.

OpenAs

Lorsqu'un utilisateur clique sur un lien, le client peut l'ouvrir dans une fenêtre de taille réelle (s'il s'agit du cadre utilisé par le client) ou en superposition (un pop-up, par exemple). L'implémentation dépend des fonctionnalités de la plate-forme cliente. La valeur sélectionnée peut être ignorée si le client n'est pas compatible. FULL_SIZE est compatible avec tous les clients.

Compatible avec les modules complémentaires Google Workspace, mais pas avec les applications de chat.

Enums
FULL_SIZE Le lien s'ouvre dans une fenêtre en taille réelle (s'il s'agit du cadre utilisé par le client).
OVERLAY Le lien s'ouvre en superposition, par exemple sous forme de pop-up.

Actions de rendu

Ensemble d'instructions d'affichage indiquant à une fiche d'effectuer une action spécifique et/ou demandant à l'application hôte complémentaire d'effectuer une action spécifique à une application.

Champs
action

Action

hostAppAction

HostAppActionMarkup

Actions gérées par les applications hôtes individuelles.

schema

string

Il s'agit d'un champ de schéma no-op qui peut être présent dans le balisage pour la vérification de la syntaxe.

Action

Champs
navigations[]

Navigation

Insérer, afficher ou mettre à jour des fiches.

notification

Notification

Afficher une notification pour l'utilisateur final

Entrée sélectionnée

Widget qui crée un élément d'interface utilisateur que les utilisateurs peuvent sélectionner. Par exemple, un menu déroulant ou une liste de contrôle.

Les applications de chat reçoivent et traitent la valeur du texte saisi lors des événements de saisie de formulaire. Pour en savoir plus sur l'utilisation des entrées de formulaire, consultez Recevoir des données de formulaire.

Lorsque vous devez collecter des données auprès des utilisateurs qui correspondent aux options que vous avez définies, utilisez une entrée de sélection. Pour collecter des données abstraites auprès des utilisateurs, utilisez plutôt le widget de saisie de texte.

Compatible uniquement avec les boîtes de dialogue. Les messages de carte seront bientôt disponibles.

Champs
name

string

Nom à l'origine duquel l'entrée sélectionnée est identifiée dans un événement de saisie de formulaire.

Pour en savoir plus sur l'utilisation des entrées de formulaire, consultez Recevoir des données de formulaire.

label

string

Texte qui apparaît au-dessus du champ de saisie de sélection dans l'interface utilisateur.

Spécifiez un texte qui aide l'utilisateur à saisir les informations dont votre application a besoin. Par exemple, si les utilisateurs sélectionnent le caractère urgent d'un ticket de travail dans un menu déroulant, le libellé peut être "Urgence" ou "Sélectionner le caractère urgent".

type

SelectionType

Mode de présentation de l'option aux utilisateurs. Différentes options sont compatibles avec différents types d'interactions. Par exemple, les utilisateurs peuvent activer plusieurs cases à cocher, mais ne peuvent sélectionner qu'une seule valeur dans un menu déroulant.

Chaque entrée de sélection accepte un type de sélection. Par exemple, vous ne pouvez pas mélanger les cases à cocher ni les contacteurs.

items[]

SelectionItem

Tableau des éléments sélectionnés. Par exemple, toutes les cases sélectionnées

onChangeAction

Action

Si cette option est spécifiée, le formulaire est envoyé lorsque la sélection est modifiée. S'il n'est pas spécifié, vous devez spécifier un bouton distinct qui envoie le formulaire.

Pour en savoir plus sur l'utilisation des entrées de formulaire, consultez Recevoir des données de formulaire.

Élément de sélection

Élément sélectionnable dans une entrée de sélection, comme une case à cocher ou un interrupteur.

Champs
text

string

Texte présenté aux utilisateurs.

value

string

Valeur associée à cet élément. Le client doit l'utiliser comme valeur d'entrée de formulaire.

Pour en savoir plus sur l'utilisation des entrées de formulaire, consultez Recevoir des données de formulaire.

selected

bool

Lorsque true est sélectionné, plusieurs éléments sont sélectionnés. Si plusieurs cases d'option et menus déroulants sont sélectionnées, le premier élément sélectionné est reçu et les suivants sont ignorés.

Type de sélection

Mode de présentation de l'option aux utilisateurs. Différentes options sont compatibles avec différents types d'interactions. Par exemple, les utilisateurs peuvent activer plusieurs cases à cocher, mais ne peuvent sélectionner qu'une seule valeur dans un menu déroulant.

Chaque entrée de sélection accepte un type de sélection. Par exemple, vous ne pouvez pas mélanger les cases à cocher ni les contacteurs.

Actuellement compatible avec les boîtes de dialogue. Les messages de carte seront bientôt disponibles.

Enums
CHECK_BOX

Un ensemble de cases à cocher Les utilisateurs peuvent cocher plusieurs cases par entrée de sélection.

Actuellement compatible avec les boîtes de dialogue. Les messages de carte seront bientôt disponibles.

RADIO_BUTTON

Ensemble de cases d'option. Les utilisateurs peuvent sélectionner une case d'option par entrée de sélection.

Actuellement compatible avec les boîtes de dialogue. Les messages de carte seront bientôt disponibles.

SWITCH

Ensemble de contacteurs. Les utilisateurs peuvent activer plusieurs contacteurs en même temps pour chaque entrée de sélection.

Actuellement compatible avec les boîtes de dialogue. Les messages de carte seront bientôt disponibles.

DROPDOWN

Un menu déroulant Les utilisateurs peuvent sélectionner un élément de menu déroulant par entrée de sélection.

Actuellement compatible avec les boîtes de dialogue. Les messages de carte seront bientôt disponibles.

Envoyer une réponse au formulaire

Réponse à l'envoi d'un formulaire (autre que l'obtention d'un conteneur de saisie semi-automatique, qui contient les actions que la fiche doit effectuer et/ou l'application hôte complémentaire doit être exécutée), et si l'état de la carte a changé. Exemple :

{
  "renderActions": {
    "action": {
      "notification": {
        "text": "Email address is added: salam.heba@example.com"
      }
    },
    "hostAppAction": {
      "gmailAction": {
        "openCreatedDraftAction": {
          "draftId": "msg-a:r-79766936926021702",
          "threadServerPermId": "thread-f:15700999851086004"
        }
      }
    }
  }
}
Champs
renderActions

RenderActions

Ensemble d'instructions d'affichage indiquant à la fiche d'effectuer une action spécifique et/ou demandant à l'application hôte complémentaire d'effectuer une action spécifique à l'application.

stateChanged

bool

Indique si l'état des cartes a changé et si les données des cartes existantes sont obsolètes.

schema

string

Il s'agit d'un champ de schéma no-op qui peut être présent dans le balisage pour la vérification de la syntaxe.

Suggestions

Valeurs suggérées par les utilisateurs. Ces valeurs s'affichent lorsque les utilisateurs cliquent dans le champ de saisie de texte. À mesure que les utilisateurs saisissent du texte, les valeurs suggérées filtrent dynamiquement pour correspondre à ce qu'ils ont saisi.

Par exemple, un champ de saisie de texte pour le langage de programmation peut suggérer Java, JavaScript, Python et C++. Lorsque les utilisateurs commencent à saisir "Jav", la liste des filtres de suggestions affiche uniquement Java et JavaScript.

Les valeurs suggérées aident les utilisateurs à saisir des valeurs que votre application peut interpréter. En JavaScript, certains utilisateurs peuvent saisir "javascript" et d'autres "java script". En suggérant "JavaScript", vous pouvez standardiser la manière dont les utilisateurs interagissent avec votre application.

Si spécifié, TextInput.type est toujours SINGLE_LINE, même s'il est défini sur MULTIPLE_LINE.

Champs
items[]

SuggestionItem

Liste de suggestions utilisées pour la saisie semi-automatique dans les champs de saisie.

Élément de suggestion

Valeur suggérée que les utilisateurs peuvent saisir dans un champ de saisie de texte.

Champs
text

string

Valeur d'une entrée suggérée dans un champ de saisie de texte. Cela correspond à ce que les utilisateurs saisiraient eux-mêmes.

TextInput

Champ dans lequel les utilisateurs peuvent saisir du texte. Compatible avec les suggestions et les actions lors de la modification.

Les applications de chat reçoivent et traitent la valeur du texte saisi lors des événements de saisie de formulaire. Pour en savoir plus sur l'utilisation des entrées de formulaire, consultez Recevoir des données de formulaire.

Lorsque vous devez collecter des données abstraites auprès des utilisateurs, saisissez du texte. Pour collecter les données définies auprès des utilisateurs, utilisez plutôt le widget de saisie de la sélection.

Compatible uniquement avec les boîtes de dialogue. Les messages de carte seront bientôt disponibles.

Champs
name

string

Nom à l'origine duquel la saisie de texte est identifiée dans un événement de saisie de formulaire.

Pour en savoir plus sur l'utilisation des entrées de formulaire, consultez Recevoir des données de formulaire.

label

string

Texte qui apparaît au-dessus du champ de saisie de texte dans l'interface utilisateur.

Spécifiez un texte qui aide l'utilisateur à saisir les informations dont votre application a besoin. Par exemple, si vous demandez le nom d'une personne, mais que vous avez besoin de son nom de famille, saisissez "nom de famille" au lieu de "nom".

Obligatoire si hintText n'est pas spécifié. Sinon, facultatif.

hintText

string

Texte qui s'affiche dans le champ de saisie pour aider les utilisateurs en les invitant à saisir une valeur. Ce texte n'est pas visible une fois que l'utilisateur a commencé à saisir du texte.

Obligatoire si label n'est pas spécifié. Sinon, facultatif.

value

string

Valeur saisie par un utilisateur, renvoyée lors d'un événement de saisie de formulaire.

Pour en savoir plus sur l'utilisation des entrées de formulaire, consultez Recevoir des données de formulaire.

type

Type

Affichage d'un champ de saisie de texte dans l'interface utilisateur Par exemple, si le champ est à une ou plusieurs lignes.

onChangeAction

Action

Que faire lorsqu'une modification se produit dans le champ de saisie de texte ?

Il peut s'agir, par exemple, d'un utilisateur ayant ajouté du champ ou supprimé du texte.

Par exemple, vous pouvez exécuter une fonction personnalisée ou ouvrir une boîte de dialogue dans Google Chat.

initialSuggestions

Suggestions

Valeurs suggérées par les utilisateurs. Ces valeurs s'affichent lorsque les utilisateurs cliquent dans le champ de saisie de texte. À mesure que les utilisateurs saisissent du texte, les valeurs suggérées filtrent dynamiquement pour correspondre à ce qu'ils ont saisi.

Par exemple, un champ de saisie de texte pour le langage de programmation peut suggérer Java, JavaScript, Python et C++. Lorsque les utilisateurs commencent à saisir "Jav", la liste des filtres de suggestions affiche uniquement Java et JavaScript.

Les valeurs suggérées aident les utilisateurs à saisir des valeurs que votre application peut interpréter. En JavaScript, certains utilisateurs peuvent saisir "javascript" et d'autres "java script". En suggérant "JavaScript", vous pouvez standardiser la manière dont les utilisateurs interagissent avec votre application.

Si spécifié, TextInput.type est toujours SINGLE_LINE, même s'il est défini sur MULTIPLE_LINE.

autoCompleteAction

Action

Facultatif. Indiquez l'action à effectuer lorsque le champ de saisie de texte propose des suggestions aux utilisateurs qui interagissent avec l'appareil.

Si aucune valeur n'est spécifiée, les suggestions sont définies par initialSuggestions et traitées par le client.

Si elle est spécifiée, l'application effectue l'action spécifiée ici (par exemple, l'exécution d'une fonction personnalisée).

Compatible avec les modules complémentaires Google Workspace, mais pas avec les applications de chat. Les applis de chat seront bientôt disponibles.

Type

Affichage d'un champ de saisie de texte dans l'interface utilisateur Par exemple, s'il s'agit d'un champ de saisie sur une seule ligne ou d'une entrée multiligne.

Si initialSuggestions est spécifié, type est toujours SINGLE_LINE, même s'il est défini sur MULTIPLE_LINE.

Enums
SINGLE_LINE La hauteur du champ de saisie de texte est d'une ligne.
MULTIPLE_LINE La hauteur du champ de saisie de texte est de plusieurs lignes.

Paragraphe textuel

Paragraphe compatible avec la mise en forme. Pour en savoir plus, consultez Mise en forme du texte.

Champs
text

string

Texte affiché dans le widget.

Widget

Chaque fiche est constituée de widgets.

Un widget est un objet composite qui peut représenter du texte, des images, des boutons et d'autres types d'objets.

Champs
Champ d'union data. Un widget ne peut contenir qu'un des éléments suivants. Vous pouvez utiliser plusieurs champs de widget pour afficher plus d'éléments. data ne peut être qu'un des éléments suivants :
textParagraph

TextParagraph

Affiche un paragraphe. Accepte le texte HTML simple.

Par exemple, le code JSON suivant crée un texte en gras:

"textParagraph": {
  "text": "  <b>bold text</b>"
}
image

Image

Affiche une image.

Par exemple, le code JSON suivant crée une image avec un texte alternatif:

"image": {
  "imageUrl":
  "https://developers.google.com/chat/images/quickstart-app-avatar.png"
  "altText": "Chat app avatar"
}
decoratedText

DecoratedText

Affiche un élément de texte décoré.

Par exemple, le code JSON suivant crée un widget Texte décoré affichant l'adresse e-mail:

"decoratedText": {
  "icon": {
    "knownIcon": "EMAIL"
  },
  "topLabel": "Email Address",
  "text": "sasha@example.com",
  "bottomLabel": "This is a new Email address!",
  "switchWidget": {
    "name": "has_send_welcome_email_to_sasha",
    "selected": false,
    "controlType": "ControlType.CHECKBOX"
  }
}
buttonList

ButtonList

Liste de boutons.

Par exemple, le code JSON suivant crée deux boutons. Le premier est un bouton de texte bleu et le second un bouton d'image qui ouvre un lien:

"buttonList": {
  "buttons": [
    "button": {
      "text": "Edit",
      "color": {
        "red": 0,
        "green": 0,
        "blue": 1,
        "alpha": 1
       }
      "disabled": true
    },
    "button": {
      "icon": {
        "knownIcon": "INVITE"
        "altText": "check calendar"
      },
      "onClick": {
        "openLink": {
          "url": "https://example.com/calendar"
        }
      }
    },
  ]
}
textInput

TextInput

Affiche une zone de texte dans laquelle les utilisateurs peuvent saisir du texte.

Actuellement compatible avec les boîtes de dialogue. Les messages de carte seront bientôt disponibles.

Par exemple, le code JSON suivant crée une entrée de texte pour une adresse e-mail:

"textInput": {
  "name": "mailing_address",
  "label": "Mailing Address"
}

Autre exemple, le code JSON suivant crée une entrée de texte pour un langage de programmation avec des suggestions statiques:

"textInput": {
  "name": "preferred_programing_language",
  "label": "Preferred Language",
  "initialSuggestions": {
    "items": [
      {
        "text": "C++"
      },
      {
        "text": "Java"
      },
      {
        "text": "JavaScript"
      },
      {
        "text": "Python"
      }
    ]
  }
}
selectionInput

SelectionInput

Affiche une commande de sélection permettant aux utilisateurs de sélectionner des éléments. Les commandes de sélection peuvent être des cases à cocher, des cases d'option, des contacteurs ou des menus déroulants.

Actuellement compatible avec les boîtes de dialogue. Les messages de carte seront bientôt disponibles.

Par exemple, le code JSON suivant crée un menu déroulant permettant aux utilisateurs de choisir une taille:

"selectionInput": {
  "name": "size",
  "label": "Size"
  "type": "SelectionType.DROPDOWN",
  "items": [
    {
      "text": "S",
      "value": "small",
      "selected": false
    },
    {
      "text": "M",
      "value": "medium",
      "selected": true
    },
    {
      "text": "L",
      "value": "large",
      "selected": false
    },
    {
      "text": "XL",
      "value": "extra_large",
      "selected": false
    }
  ]
}
dateTimePicker

DateTimePicker

Affiche un widget de sélection/entrée pour la date, l'heure ou la date et l'heure.

Non disponible dans les applications de chat. L'assistance pour les applications de chat sera bientôt disponible.

Par exemple, le code JSON suivant crée un sélecteur de date et d'heure pour planifier un rendez-vous:

"dateTimePicker": {
  "name": "appointment_time",
  "label": "Book your appointment at:",
  "type": "DateTimePickerType.DATE_AND_TIME",
  "valueMsEpoch": "796435200000"
}
divider

Divider

Affiche un séparateur de ligne horizontal entre les widgets.

Par exemple, le code JSON suivant crée un séparateur:

"divider": {
}
grid

Grid

Affiche une grille d'éléments.

Une grille accepte un nombre illimité de colonnes et d'éléments. Le nombre de lignes est déterminé par la limite supérieure du nombre d'éléments, divisée 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 comporte 6 lignes.

Actuellement compatible avec les boîtes de dialogue. Les messages de carte seront bientôt disponibles.

Par exemple, le code JSON suivant crée une grille à deux colonnes avec un seul élément:

"grid": {
  "title": "A fine collection of items",
  "numColumns": 2,
  "borderStyle": {
    "type": "STROKE",
    "cornerRadius": 4.0
  },
  "items": [
    "image": {
      "imageUri": "https://www.example.com/image.png",
      "cropStyle": {
        "type": "SQUARE"
      },
      "borderStyle": {
        "type": "STROKE"
      }
    },
    "title": "An item",
    "textAlignment": "CENTER"
  ],
  "onClick": {
    "openLink": {
      "url":"https://www.example.com"
    }
  }
}

Type d'image

Forme utilisée pour recadrer l'image.

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