Fiche
Interface sous forme de fiche dans un message Google Chat ou un module complémentaire Google Workspace.
Les cartes sont compatibles avec une mise en page définie, des éléments d'interface utilisateur interactifs comme des boutons et des éléments rich media comme des images. Utilisez des fiches pour présenter des informations détaillées, recueillir des informations auprès des utilisateurs et les inciter à passer à l'étape suivante.
Créez et prévisualisez des fiches avec Card Builder.
Ouvrir l'outil de création de cartes
Pour apprendre à créer des fiches, consultez la documentation suivante:
- Pour les applications Google Chat, consultez Concevoir les composants d'une carte ou d'une boîte de dialogue.
- Pour les modules complémentaires Google Workspace, consultez la section Interfaces basées sur des cartes.
Exemple: Message sous forme de fiche pour une application Google Chat
Pour créer l'exemple de message de fiche dans Google Chat, utilisez le code JSON suivant:
{
"cardsV2": [
{
"cardId": "unique-card-id",
"card": {
"header": {
"title": "Sasha",
"subtitle": "Software Engineer",
"imageUrl":
"https://developers.google.com/workspace/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"
}
]
}
}
}
]
}
}
]
}
]
}
}
]
}
Représentation JSON |
---|
{ "header": { object ( |
Champs | |
---|---|
header
|
En-tête de la carte. Un en-tête contient généralement une image d'introduction et un titre. Les en-têtes apparaissent toujours en haut d'une fiche. |
sections[]
|
Contient une collection de widgets. Chaque section a son propre en-tête facultatif. Les sections sont séparées visuellement par un séparateur. Pour obtenir un exemple dans les applications Google Chat, consultez Définir une section d'une carte. |
sectionDividerStyle
|
Style de séparation entre les sections. |
cardActions[]
|
Actions de la fiche. Les actions sont ajoutées au menu de la barre d'outils de la fiche. Disponible pour les modules complémentaires Google Workspace et indisponible pour les applications Google Chat.
Par exemple, le code JSON suivant construit un menu d'actions sur la fiche avec les options
|
name
|
Le nom de la carte. Utilisé comme identifiant de carte lors de la navigation dans les cartes. Disponible pour les modules complémentaires Google Workspace et indisponible pour les applications Google Chat. |
fixedFooter
|
Pied de page fixe affiché au bas de cette fiche.
Définir Disponible pour les applications Google Chat et les modules complémentaires Google Workspace. |
displayStyle
|
Dans les modules complémentaires Google Workspace, définit les propriétés d'affichage de Disponible pour les modules complémentaires Google Workspace et indisponible pour les applications Google Chat. |
peekCardHeader
|
Lors de l'affichage du contenu contextuel, l'en-tête de la fiche d'aperçu sert d'espace réservé afin que l'utilisateur puisse naviguer entre les fiches de la page d'accueil et les fiches contextuelles. Disponible pour les modules complémentaires Google Workspace et indisponible pour les applications Google Chat. |
CardHeader
Représente un en-tête de carte. Pour obtenir un exemple dans les applications Google Chat, consultez Ajouter un en-tête.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace.
Représentation JSON |
---|
{
"title": string,
"subtitle": string,
"imageType": enum (
|
Champs | |
---|---|
title
|
Obligatoire. Titre de l'en-tête de la carte. L'en-tête a une hauteur fixe: si un titre et un sous-titre sont spécifiés, chacun d'eux occupe une ligne. Si seul le titre est spécifié, il occupe les deux lignes. |
subtitle
|
Sous-titre de l'en-tête de la carte. Si spécifié, apparaît sur une ligne distincte sous |
imageType
|
Forme utilisée pour recadrer l'image. Disponible pour les applications Google Chat et les modules complémentaires Google Workspace. |
imageUrl
|
URL HTTPS de l'image dans l'en-tête de la carte. |
imageAltText
|
Texte alternatif de cette image utilisé pour l'accessibilité. |
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. |
Section
Une section contient un ensemble de widgets affichés verticalement dans l'ordre dans lequel ils sont spécifiés.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace.
Représentation JSON |
---|
{
"header": string,
"widgets": [
{
object (
|
Champs | |
---|---|
header
|
Texte qui apparaît en haut d'une section. Accepte le texte au format HTML simple. Pour en savoir plus sur la mise en forme du texte, consultez Mettre en forme du texte dans les applications Google Chat et Mettre en forme du texte dans les modules complémentaires Google Workspace. |
widgets[]
|
Tous les widgets de la section Doit contenir au moins un widget. |
collapsible
|
Indique si cette section peut être réduite. Les sections réductibles masquent tout ou partie des widgets, mais les utilisateurs peuvent développer la section pour faire apparaître les widgets masqués en cliquant sur Afficher plus. Les utilisateurs peuvent à nouveau masquer les widgets en cliquant sur Afficher moins.
Pour déterminer quels widgets sont masqués, spécifiez |
uncollapsibleWidgetsCount
|
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 |
Widget
Chaque fiche est composée de widgets.
Un widget est un objet composite qui peut représenter du texte, des images, des boutons ou d'autres types d'objets.
Représentation JSON |
---|
{ "horizontalAlignment": enum ( |
Champs | |
---|---|
horizontalAlignment
|
Indique si les widgets sont alignés à gauche, à droite ou au centre d'une colonne. |
Champ d'union data . Un widget ne peut contenir qu'un seul des éléments suivants. Vous pouvez utiliser plusieurs champs de widget pour afficher davantage d'éléments.
data ne peut être que l'un des éléments suivants:
|
|
textParagraph
|
Affiche un paragraphe de texte. Accepte le texte au format HTML simple. Pour en savoir plus sur la mise en forme du texte, consultez Mettre en forme du texte dans les applications Google Chat et Mettre en forme du texte dans les modules complémentaires Google Workspace. Par exemple, le code JSON suivant crée un texte en gras:
|
image
|
Affiche une image. Par exemple, le code JSON suivant crée une image avec un texte alternatif:
|
decoratedText
|
Affiche un élément textuel décoré. Par exemple, le code JSON suivant crée un widget de texte décoré indiquant l'adresse e-mail:
|
buttonList
|
Une liste de boutons Par exemple, le code JSON suivant crée deux boutons. Le premier est un bouton de texte bleu et le second est un bouton d'image qui ouvre un lien:
|
textInput
|
Affiche une zone de texte dans laquelle les utilisateurs peuvent saisir du texte. Par exemple, le code JSON suivant crée une entrée de texte pour une adresse e-mail:
Dans cet autre exemple, le code JSON suivant crée une entrée de texte pour un langage de programmation avec des suggestions statiques:
|
selectionInput
|
Affiche une commande de sélection qui permet aux utilisateurs de sélectionner des éléments. Les commandes de sélection peuvent être des cases à cocher, des cases d'option, des commutateurs ou des menus déroulants. Par exemple, le code JSON suivant crée un menu déroulant qui permet aux utilisateurs de choisir une taille:
|
dateTimePicker
|
Affiche un widget qui permet aux utilisateurs de saisir une date, une heure, ou une date et une heure. Par exemple, le code JSON suivant crée un sélecteur de date et d'heure pour planifier un rendez-vous:
|
divider
|
Affiche une ligne de séparation horizontale entre les widgets. Par exemple, le code JSON suivant crée un séparateur:
|
grid
|
Affiche une grille avec une collection 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 a 6 lignes. Disponible pour les applications Google Chat et les modules complémentaires Google Workspace. Par exemple, le code JSON suivant crée une grille à deux colonnes avec un seul élément:
|
columns
|
Affiche jusqu'à deux colonnes.
Pour inclure plus de deux colonnes ou utiliser des lignes, utilisez le widget Par exemple, le code JSON suivant crée deux colonnes contenant chacune des paragraphes de texte:
|
TextParagraph
Paragraphe de texte compatible avec la mise en forme. Pour obtenir un exemple dans les applications Google Chat, consultez Ajouter un paragraphe de texte mis en forme. Pour en savoir plus sur la mise en forme du texte, consultez Mettre en forme du texte dans les applications Google Chat et Mettre en forme du texte dans les modules complémentaires Google Workspace.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace.
Représentation JSON |
---|
{ "text": string } |
Champs | |
---|---|
text
|
Texte affiché dans le widget. |
Images
Image spécifiée par une URL et pouvant avoir une action onClick
. Pour obtenir un exemple, consultez la section Ajouter une image.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace.
Représentation JSON |
---|
{
"imageUrl": string,
"onClick": {
object (
|
Champs | |
---|---|
imageUrl
|
URL HTTPS qui héberge l'image. Exemple :
|
onClick
|
Lorsqu'un utilisateur clique sur l'image, le clic déclenche cette action. |
altText
|
Texte alternatif de cette image utilisé pour l'accessibilité. |
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 |
Champs | |
---|---|
Champ d'union
|
|
action
|
Si cette valeur est spécifiée, une action est déclenchée par ce |
openLink
|
Si cet élément |
openDynamicLinkAction
|
Un module complémentaire déclenche cette action lorsqu'elle doit ouvrir un lien. Cette méthode diffère du Disponible pour les modules complémentaires Google Workspace et indisponible pour les applications Google Chat. |
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 ( |
Champs | |
---|---|
function
|
Fonction personnalisée à invoquer lorsque l'utilisateur clique sur l'élément conteneur ou est activé. Pour obtenir un exemple d'utilisation, consultez la section Lire les données de formulaire. |
parameters[]
|
Liste des paramètres d'action. |
loadIndicator
|
Spécifie l'indicateur de chargement que l'action affiche lors de l'appel à l'action. |
persistValues
|
Indique si les valeurs du formulaire sont conservées après l'action. La valeur par défaut est
Si la valeur est
Si la valeur est |
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
Si vous spécifiez un Disponible pour les applications Google Chat et indisponible pour les modules complémentaires Google Workspace. |
requiredWidgets[]
|
Facultatif. Remplissez cette liste avec les noms des widgets dont cette action a besoin pour une soumission valide.
Si aucune valeur n'est associée aux widgets répertoriés ici lorsque cette action est appelée, l'envoi du formulaire est annulé. Disponible pour les applications Google Chat et les modules complémentaires Google Workspace. |
allWidgetsAreRequired
|
Facultatif. Si c'est le cas, tous les widgets sont considérés comme obligatoires par cette action.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace. |
ActionParameter
Liste des paramètres de chaîne à fournir lorsque la méthode d'action est appelée. Prenons l'exemple de trois boutons Répéter: Répéter maintenant, Répéter un jour ou Répéter la semaine suivante. Vous pouvez utiliser action method = snooze()
pour transmettre le type et la durée de mise en pause dans la liste des paramètres de chaîne.
Pour en savoir plus, consultez CommonEventObject
.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace.
Représentation JSON |
---|
{ "key": string, "value": string } |
Champs | |
---|---|
key
|
Nom du paramètre du script d'action. |
value
|
Valeur du paramètre. |
LoadIndicator
Spécifie l'indicateur de chargement que l'action affiche lors de l'appel à l'action.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace.
Enums | |
---|---|
SPINNER
|
Affiche une icône de chargement pour indiquer que le contenu est en cours de chargement. |
NONE
|
Rien ne s'affiche. |
Interactions
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.
Enums | |
---|---|
INTERACTION_UNSPECIFIED
|
Valeur par défaut. Le action s'exécute normalement.
|
OPEN_DIALOG
|
Ouvre une boîte de dialogue, une interface fenêtre sous forme de fiches, que les applications Chat utilisent pour interagir avec les utilisateurs. Uniquement compatible avec les applications Chat en réponse à des clics sur des boutons dans les messages des fiches. 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. |
OpenLink
Représente un événement onClick
qui ouvre un lien hypertexte.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace.
Représentation JSON |
---|
{ "url": string, "openAs": enum ( |
Champs | |
---|---|
url
|
URL à ouvrir. |
openAs
|
Ouvrir un lien Disponible pour les modules complémentaires Google Workspace et indisponible pour les applications Google Chat. |
onClose
|
Indique si le client oublie un lien après l'avoir ouvert ou l'observe jusqu'à ce que la fenêtre se ferme. Disponible pour les modules complémentaires Google Workspace et indisponible pour les applications Google Chat. |
OpenAs
Lorsqu'une action OnClick
ouvre un lien, le client peut l'ouvrir en tant que fenêtre en taille réelle (s'il s'agit du cadre utilisé par le client) ou en superposition (telle qu'une fenêtre pop-up). L'implémentation dépend des fonctionnalités de la plate-forme cliente, et la valeur sélectionnée risque d'être ignorée si le client ne la prend pas en charge.
FULL_SIZE
est compatible avec tous les clients.
Disponible pour les modules complémentaires Google Workspace et indisponible pour les applications Google Chat.
Enums | |
---|---|
FULL_SIZE
|
Le lien s'ouvre en taille réelle (s'il s'agit du cadre utilisé par le client). |
OVERLAY
|
Le lien s'ouvre en superposition, par exemple une fenêtre pop-up. |
OnClose
Que fait le client lorsqu'un lien ouvert par une action OnClick
est fermé ?
L'implémentation 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 définis et que la plate-forme cliente ne peut pas accepter les deux valeurs, OnClose
est prioritaire.
Disponible pour les modules complémentaires Google Workspace et indisponible pour les applications Google Chat.
Enums | |
---|---|
NOTHING
|
Valeur par défaut. La carte ne se recharge pas. Rien ne se passe. |
RELOAD
|
Recharge la fiche après la fermeture de la fenêtre enfant.
Si elle est utilisée avec |
DecoratedText
Widget affichant 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. Pour obtenir un exemple dans les applications Google Chat, consultez Afficher le texte avec du texte décoratif.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace.
Représentation JSON |
---|
{ "icon": { object ( |
Champs | |
---|---|
icon
|
Obsolète au profit de |
startIcon
|
Icône affichée devant le texte. |
topLabel
|
Texte affiché au-dessus de |
text
|
Obligatoire. Texte principal. Permet une mise en forme simple. Pour en savoir plus sur la mise en forme du texte, consultez Mettre en forme du texte dans les applications Google Chat et Mettre en forme du texte dans les modules complémentaires Google Workspace. |
wrapText
|
Paramètre de retour à la ligne automatique. Si la valeur est
S'applique uniquement à |
bottomLabel
|
Texte qui s'affiche sous |
onClick
|
Cette action est déclenchée lorsque l'utilisateur clique sur |
Champ d'union control . Bouton, commutateur, case à cocher ou image qui s'affiche à droite du texte dans le widget decoratedText .
control ne peut être que l'un des éléments suivants:
|
|
button
|
Bouton sur lequel un utilisateur peut cliquer pour déclencher une action. |
switchControl
|
Widget de commutateur sur lequel un utilisateur peut cliquer pour modifier son état et déclencher une action. |
endIcon
|
Icône affichée après le texte Compatible avec les icônes intégrées et personnalisées. |
Icon
Icône affichée dans un widget sur une carte. Pour obtenir un exemple dans les applications Google Chat, consultez Ajouter une 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 ( |
Champs | |
---|---|
altText
|
Facultatif. Description de l'icône utilisée pour l'accessibilité. Si aucune valeur n'est spécifiée, la valeur par défaut
Si l'icône est définie dans un |
imageType
|
Style de recadrage appliqué à l'image. Dans certains cas, si vous appliquez un recadrage |
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
|
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 Pour obtenir la liste complète des icônes compatibles, consultez la section Icônes intégrées. |
iconUrl
|
afficher une icône personnalisée hébergée sur une URL HTTPS ; Exemple :
Les types de fichiers |
materialIcon
|
Affichez l'une des icônes Material de Google. Par exemple, pour afficher une icône de case à cocher, utilisez
Disponible pour les applications Google Chat et indisponible pour les modules complémentaires Google Workspace. |
MaterialIcon
Une icône Google Material qui comprend plus de 2 500 options
Par exemple, pour afficher une icône de case à cocher avec une épaisseur et un niveau personnalisés, écrivez la commande suivante:
{
"name": "check_box",
"fill": true,
"weight": 300,
"grade": -25
}
Disponible pour les applications Google Chat et indisponible pour les modules complémentaires Google Workspace.
Représentation JSON |
---|
{ "name": string, "fill": boolean, "weight": integer, "grade": integer } |
Champs | |
---|---|
name
|
Nom de l'icône défini dans l'icône Material Google, par exemple |
fill
|
Indique si l'icône s'affiche comme remplie. La valeur par défaut est "false". Pour prévisualiser différents paramètres d'icône, accédez à Icônes de polices Google et ajustez les paramètres sous Personnaliser. |
weight
|
Épaisseur de trait de l'icône. Choisissez parmi {100, 200, 300, 400, 500, 600, 700}. Si aucune valeur n'est spécifiée, la valeur par défaut est 400. Si une autre valeur est spécifiée, la valeur par défaut est utilisée. Pour prévisualiser différents paramètres d'icône, accédez à Icônes de polices Google et ajustez les paramètres sous Personnaliser. |
grade
|
Le poids et le niveau affectent l’épaisseur d’un symbole. Les ajustements de notation sont plus précis que les ajustements de pondération et ont un faible impact sur la taille du symbole. Choisissez parmi {-25, 0, 200}. Si aucune valeur n'est spécifiée, la valeur par défaut est 0. Si une autre valeur est spécifiée, la valeur par défaut est utilisée. Pour prévisualiser différents paramètres d'icône, accédez à Icônes de polices Google et ajustez les paramètres sous Personnaliser. |
Bouton
Texte, icône, ou texte et bouton d'icône sur lesquels les utilisateurs peuvent cliquer. Pour obtenir un exemple dans les applications Google Chat, consultez la section Ajouter un bouton.
Pour transformer une image en bouton cliquable, spécifiez une
(et non une Image
) et définissez une action ImageComponent
onClick
.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace.
Représentation JSON |
---|
{ "text": string, "icon": { object ( |
Champs | |
---|---|
text
|
Texte affiché dans le bouton. |
icon
|
Image de l'icône. Si |
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
Vous pouvez également définir
Pour Par exemple, la couleur suivante représente un rouge à moitié transparent:
|
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
|
Si la valeur est |
altText
|
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/workspace/chat". |
Couleur
Représente une couleur dans l'espace colorimétrique RVBA. Cette représentation est conçue pour simplifier la conversion vers et depuis des représentations de couleurs dans différentes langues, par rapport à un format compact. Par exemple, les champs de cette représentation peuvent être facilement fournis au constructeur de java.awt.Color
en Java. Ils peuvent également être fournis facilement à la méthode +colorWithRed:green:blue:alpha
d'UIColor sous iOS. Et, avec un petit effort, il peut être facilement formaté en une chaîne CSS rgba()
en JavaScript.
Cette page de référence ne contient pas d'informations sur l'espace colorimétrique absolu à utiliser pour interpréter la valeur RVB (par exemple, sRVB, Adobe RVB, DCI-P3 et BT.2020). Par défaut, les applications doivent utiliser l'espace colorimétrique sRVB.
Lorsque l'égalité des couleurs doit être décidée, les implémentations, sauf indication contraire, traitent deux couleurs comme égales si toutes leurs valeurs de rouge, vert, bleu et alpha diffèrent chacune de 1e-5
au maximum.
Exemple (Java) :
import com.google.type.Color;
// ...
public static java.awt.Color fromProto(Color protocolor) {
float alpha = protocolor.hasAlpha()
? protocolor.getAlpha().getValue()
: 1.0;
return new java.awt.Color(
protocolor.getRed(),
protocolor.getGreen(),
protocolor.getBlue(),
alpha);
}
public static Color toProto(java.awt.Color color) {
float red = (float) color.getRed();
float green = (float) color.getGreen();
float blue = (float) color.getBlue();
float denominator = 255.0;
Color.Builder resultBuilder =
Color
.newBuilder()
.setRed(red / denominator)
.setGreen(green / denominator)
.setBlue(blue / denominator);
int alpha = color.getAlpha();
if (alpha != 255) {
result.setAlpha(
FloatValue
.newBuilder()
.setValue(((float) alpha) / denominator)
.build());
}
return resultBuilder.build();
}
// ...
Exemple (iOS/Obj-C) :
// ...
static UIColor* fromProto(Color* protocolor) {
float red = [protocolor red];
float green = [protocolor green];
float blue = [protocolor blue];
FloatValue* alpha_wrapper = [protocolor alpha];
float alpha = 1.0;
if (alpha_wrapper != nil) {
alpha = [alpha_wrapper value];
}
return [UIColor colorWithRed:red green:green blue:blue alpha:alpha];
}
static Color* toProto(UIColor* color) {
CGFloat red, green, blue, alpha;
if (![color getRed:&red green:&green blue:&blue alpha:&alpha]) {
return nil;
}
Color* result = [[Color alloc] init];
[result setRed:red];
[result setGreen:green];
[result setBlue:blue];
if (alpha <= 0.9999) {
[result setAlpha:floatWrapperWithValue(alpha)];
}
[result autorelease];
return result;
}
// ...
Exemple (JavaScript) :
// ...
var protoToCssColor = function(rgb_color) {
var redFrac = rgb_color.red || 0.0;
var greenFrac = rgb_color.green || 0.0;
var blueFrac = rgb_color.blue || 0.0;
var red = Math.floor(redFrac * 255);
var green = Math.floor(greenFrac * 255);
var blue = Math.floor(blueFrac * 255);
if (!('alpha' in rgb_color)) {
return rgbToCssColor(red, green, blue);
}
var alphaFrac = rgb_color.alpha.value || 0.0;
var rgbParams = [red, green, blue].join(',');
return ['rgba(', rgbParams, ',', alphaFrac, ')'].join('');
};
var rgbToCssColor = function(red, green, blue) {
var rgbNumber = new Number((red << 16) | (green << 8) | blue);
var hexString = rgbNumber.toString(16);
var missingZeros = 6 - hexString.length;
var resultBuilder = ['#'];
for (var i = 0; i < missingZeros; i++) {
resultBuilder.push('0');
}
resultBuilder.push(hexString);
return resultBuilder.join('');
};
// ...
Représentation JSON |
---|
{ "red": number, "green": number, "blue": number, "alpha": number } |
Champs | |
---|---|
red
|
Quantité de rouge dans la couleur en tant que valeur dans l'intervalle [0, 1]. |
green
|
Quantité de vert dans la couleur en tant que valeur dans l'intervalle [0, 1]. |
blue
|
Quantité de bleu dans la couleur en tant que valeur dans l'intervalle [0, 1]. |
alpha
|
Fraction de cette couleur à appliquer au pixel. En d'autres termes, la couleur finale du pixel est définie par l'équation :
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). |
SwitchControl
Bouton bascule ou case à cocher dans un widget decoratedText
.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace.
Uniquement disponible dans le widget decoratedText
.
Représentation JSON |
---|
{ "name": string, "value": string, "selected": boolean, "onChangeAction": { object ( |
Champs | |
---|---|
name
|
Nom par lequel le widget de commutateur 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
|
Valeur saisie par un utilisateur, renvoyée dans le cadre 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
|
Lorsque |
onChangeAction
|
Action à effectuer lorsque l'état du commutateur est modifié (par exemple, la fonction à exécuter). |
controlType
|
Affichage du bouton dans l'interface utilisateur. Disponible pour les applications Google Chat et les modules complémentaires Google Workspace. |
ControlType
Affichage du bouton dans l'interface utilisateur.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace.
Enums | |
---|---|
SWITCH
|
Bouton bascule |
CHECKBOX
|
Obsolète au profit de CHECK_BOX .
|
CHECK_BOX
|
Case à cocher. |
ButtonList
Liste de boutons disposés horizontalement. Pour obtenir un exemple dans les applications Google Chat, consultez la section Ajouter un bouton.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace.
Représentation JSON |
---|
{
"buttons": [
{
object (
|
Champs | |
---|---|
buttons[]
|
Tableau de boutons. |
TextInput
Champ dans lequel les utilisateurs peuvent saisir du texte. Ils sont compatibles avec les suggestions et les actions en cas de modification. Pour obtenir un exemple dans les applications Google Chat, consultez Ajouter un champ dans lequel un utilisateur peut saisir du texte.
Les applications de chat reçoivent et peuvent traiter 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 non définies ou extraites des utilisateurs, utilisez une entrée de texte. Pour collecter des données définies ou énumérées auprès des utilisateurs, utilisez le widget SelectionInput
.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace.
Représentation JSON |
---|
{ "name": string, "label": string, "hintText": string, "value": string, "type": enum ( |
Champs | |
---|---|
name
|
Nom par lequel l'entrée de texte est identifiée dans un événement d'entrée de formulaire. Pour en savoir plus sur l'utilisation des entrées de formulaire, consultez Recevoir des données de formulaire. |
label
|
Texte affiché 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 spécifiquement besoin de son nom de famille, écrivez
Obligatoire si |
hintText
|
Texte affiché sous le champ de saisie destiné à aider les utilisateurs en les invitant à saisir une certaine valeur. Ce texte est toujours visible.
Obligatoire si |
value
|
Valeur saisie par un utilisateur, renvoyée dans le cadre 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
|
Affichage d'un champ de saisie de texte dans l'interface utilisateur Par exemple, si le champ comporte une seule ou plusieurs lignes. |
onChangeAction
|
Que faire lorsqu'une modification se produit dans le champ de saisie de texte ? Par exemple, si un utilisateur ajoute du texte au champ ou supprime du texte. Vous pouvez, par exemple, exécuter une fonction personnalisée ou ouvrir une boîte de dialogue dans Google Chat. |
initialSuggestions
|
Suggestions de valeurs que les utilisateurs peuvent saisir. Ces valeurs apparaissent lorsque les utilisateurs cliquent dans le champ de saisie de texte. À mesure que les utilisateurs saisissent du texte, les valeurs suggérées sont filtrées dynamiquement pour correspondre à ce qu'ils ont saisi.
Par exemple, un champ de saisie de texte pour un langage de programmation peut suggérer Java, JavaScript, Python et C++. Lorsque les utilisateurs commencent à saisir
Les valeurs suggérées aident les utilisateurs à saisir des valeurs pertinentes pour votre application. Lorsqu'ils font référence à JavaScript, certains utilisateurs peuvent saisir
Si spécifié, Disponible pour les applications Google Chat et les modules complémentaires Google Workspace. |
autoCompleteAction
|
Facultatif. Spécifiez l'action à effectuer lorsque le champ de saisie de texte fournit des suggestions aux utilisateurs qui interagissent avec lui.
Si elles ne sont pas spécifiées, les suggestions sont définies par S'il est spécifié, l'application effectue l'action spécifiée ici, comme exécuter une fonction personnalisée. Disponible pour les modules complémentaires Google Workspace et indisponible pour les applications Google Chat. |
validation
|
Spécifiez la validation nécessaire pour ce champ de saisie de texte.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace. |
placeholderText
|
Texte qui apparaît dans le champ de saisie de texte lorsqu'il est vide. Utilisez ce texte pour inviter les utilisateurs à saisir une valeur. Exemple : Disponible pour les applications Google Chat et indisponible pour les modules complémentaires Google Workspace. |
Type
Affichage d'un champ de saisie de texte dans l'interface utilisateur Il peut s'agir, par exemple, d'un champ de saisie sur une seule ligne ou sur plusieurs lignes. Si initialSuggestions
est spécifié, type
est toujours SINGLE_LINE
, même s'il est défini sur MULTIPLE_LINE
.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace.
Enums | |
---|---|
SINGLE_LINE
|
Le champ de saisie de texte a une hauteur fixe d'une ligne. |
MULTIPLE_LINE
|
Le champ de saisie de texte a une hauteur fixe composée de plusieurs lignes. |
RenderActions
Ensemble d'instructions d'affichage qui indique à une carte d'effectuer une action, ou qui indique à l'application hôte du module complémentaire ou à l'application Chat d'effectuer une action spécifique à l'application.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace.
Champs | |
---|---|
action |
Action
Champs | |
---|---|
navigations[] |
Transférez ou mettez à jour les cartes affichées. |
Suggestions
Suggestions de valeurs que les utilisateurs peuvent saisir. Ces valeurs apparaissent lorsque les utilisateurs cliquent dans le champ de saisie de texte. À mesure que les utilisateurs saisissent du texte, les valeurs suggérées sont filtrées dynamiquement pour correspondre à ce qu'ils ont saisi.
Par exemple, un champ de saisie de texte pour un langage de programmation peut suggérer Java, JavaScript, Python et C++. Lorsque les utilisateurs commencent à saisir Jav
, la liste des filtres de suggestions affiche Java
et JavaScript
.
Les valeurs suggérées aident les utilisateurs à saisir des valeurs pertinentes pour votre application. Lorsqu'ils font référence à JavaScript, certains utilisateurs peuvent saisir javascript
et d'autres java script
. Suggérer des JavaScript
peut standardiser la façon 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
.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace.
Représentation JSON |
---|
{
"items": [
{
object (
|
Champs | |
---|---|
items[]
|
Liste de suggestions utilisées pour les recommandations de saisie semi-automatique dans les champs de saisie de texte. |
SuggestionItem
Suggestion de valeur que les utilisateurs peuvent saisir dans un champ de saisie de texte.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace.
Représentation JSON |
---|
{ // Union field |
Champs | |
---|---|
Champ d'union
|
|
text
|
Valeur d'une entrée suggérée dans un champ de saisie de texte. Cela équivaut à ce que les utilisateurs saisissent eux-mêmes. |
Validation
Représente les données nécessaires à la validation du widget auquel elle est associée.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace.
Représentation JSON |
---|
{
"characterLimit": integer,
"inputType": enum (
|
Champs | |
---|---|
characterLimit
|
Spécifie le nombre maximal de caractères pour les widgets de saisie de texte. Notez qu'il n'est utilisé que pour la saisie de texte et qu'il est ignoré pour les autres widgets.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace. |
inputType
|
Spécifie le type de widgets d'entrée.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace. |
InputType
Type du widget d'entrée.
Enums | |
---|---|
INPUT_TYPE_UNSPECIFIED
|
Type non spécifié. Ne pas utiliser. |
TEXT
|
Texte normal qui accepte tous les caractères. |
INTEGER
|
Valeur entière. |
FLOAT
|
Une valeur flottante |
EMAIL
|
Adresse e-mail |
EMOJI_PICKER
|
Emoji sélectionné dans le sélecteur d'emoji fourni par le système. |
SelectionInput
Widget qui crée un ou plusieurs éléments d'interface utilisateur que les utilisateurs peuvent sélectionner. Par exemple, un menu déroulant ou des cases à cocher. Vous pouvez utiliser ce widget pour collecter des données pouvant être prédites ou énumérées. Pour obtenir un exemple dans les applications Google Chat, consultez Ajouter des éléments d'interface utilisateur sélectionnables.
Les applications de chat peuvent traiter la valeur des éléments que les utilisateurs sélectionnent ou saisissent. Pour en savoir plus sur l'utilisation des entrées de formulaire, consultez Recevoir des données de formulaire.
Pour collecter des données non définies ou abstraites auprès des utilisateurs, utilisez le widget TextInput
.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace.
Représentation JSON |
---|
{ "name": string, "label": string, "type": enum ( |
Champs | |
---|---|
name
|
Nom qui identifie l'entrée de sélection 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
|
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 l'urgence d'une demande d'assistance dans un menu déroulant, le libellé peut être "Urgence" ou "Sélectionner l'urgence". |
type
|
Type d'éléments affichés aux utilisateurs dans un widget |
items[]
|
Tableau d'éléments sélectionnables. Par exemple, un tableau de cases d'option ou de cases à cocher. Jusqu'à 100 éléments acceptés. |
onChangeAction
|
Si cette option est spécifiée, le formulaire est envoyé lorsque la sélection change. S'il n'est pas spécifié, vous devez spécifier un bouton distinct pour envoyer le formulaire. Pour en savoir plus sur l'utilisation des entrées de formulaire, consultez Recevoir des données de formulaire. |
multiSelectMaxSelectedItems
|
Pour les menus à plusieurs sélections, nombre maximal d'éléments qu'un utilisateur peut sélectionner. La valeur minimale est de 1 article. Si aucune valeur n'est spécifiée, la valeur par défaut est trois. |
multiSelectMinQueryLength
|
Pour les menus multi-sélection, il s'agit du nombre de caractères de texte qu'un utilisateur saisit avant que l'application ne demande la saisie semi-automatique et affiche les éléments suggérés dans le menu. Si aucune valeur n'est spécifiée, la valeur par défaut est 0 caractère pour les sources de données statiques et 3 caractères pour les sources de données externes. |
validation
|
Pour les menus déroulants, validation du champ de saisie de la sélection.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace. |
Champ d'union
Disponible pour les applications Google Chat et indisponible pour les modules complémentaires Google Workspace.
|
|
externalDataSource
|
une source de données externe, telle qu'une base de données relationnelles ; |
platformDataSource
|
Une source de données Google Workspace |
SelectionType
Format des éléments que les utilisateurs peuvent sélectionner. Les différentes options dépendent du type d'interaction. Par exemple, les utilisateurs peuvent cocher plusieurs cases, mais ne peuvent sélectionner qu'un seul élément dans un menu déroulant.
Chaque entrée de sélection prend en charge un type de sélection. Il n'est pas possible, par exemple, de combiner des cases à cocher et des commutateurs.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace.
Enums | |
---|---|
CHECK_BOX
|
Une série de cases à cocher. Les utilisateurs peuvent cocher une ou plusieurs cases. |
RADIO_BUTTON
|
Ensemble de cases d'option. Les utilisateurs peuvent sélectionner une case d'option. |
SWITCH
|
Un ensemble d'interrupteurs. Les utilisateurs peuvent activer un ou plusieurs interrupteurs. |
DROPDOWN
|
Un menu déroulant Les utilisateurs peuvent sélectionner un élément dans le menu. |
MULTI_SELECT
|
Menu multi-sélection pour les données statiques ou dynamiques Dans la barre de menu, les utilisateurs sélectionnent un ou plusieurs éléments. Les utilisateurs peuvent également saisir des valeurs pour insérer des données dynamiques. Par exemple, les utilisateurs peuvent commencer à saisir le nom d'un espace Google Chat, et le widget suggère automatiquement cet espace. Pour renseigner les éléments d'un menu à sélection multiple, vous pouvez utiliser l'un des types de sources de données suivants:
Pour obtenir des exemples d'implémentation de menus à sélection multiple, consultez la section Ajouter un menu multi-sélection. Disponible pour les applications Google Chat et les modules complémentaires Google Workspace. La sélection multiple pour les modules complémentaires Google Workspace est en Preview développeur. |
SelectionItem
Élément que les utilisateurs peuvent sélectionner dans une entrée de sélection, comme une case à cocher ou un commutateur.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace.
Représentation JSON |
---|
{ "text": string, "value": string, "selected": boolean, "startIconUri": string, "bottomText": string } |
Champs | |
---|---|
text
|
Texte qui identifie ou décrit l'élément pour les utilisateurs. |
value
|
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
|
Indique si l'élément est sélectionné par défaut. Si le champ de sélection n'accepte qu'une seule valeur (pour les cases d'option ou les menus déroulants, par exemple), ne définissez ce champ que pour un seul élément. |
startIconUri
|
Pour les menus à sélection multiple, URL de l'icône affichée à côté du champ |
bottomText
|
Pour les menus multi-sélection, une description textuelle ou un libellé affiché sous le champ |
PlatformDataSource
Pour un widget
utilisant un menu multi-sélection, source de données Google Workspace. Permet de renseigner les éléments d'un menu multi-sélection.
SelectionInput
Disponible pour les applications Google Chat et indisponible pour les modules complémentaires Google Workspace.
Représentation JSON |
---|
{ // Union field |
Champs | |
---|---|
Champ d'union data_source . La source de données.
data_source ne peut être que l'un des éléments suivants:
|
|
commonDataSource
|
Source de données partagée par toutes les applications Google Workspace (par exemple, les utilisateurs d'une organisation Google Workspace). |
hostAppDataSource
|
Source de données propre à une application hôte Google Workspace, comme les espaces dans Google Chat. |
CommonDataSource
Une source de données partagée par toutes les applications Google Workspace.
Disponible pour les applications Google Chat et indisponible pour les modules complémentaires Google Workspace.
Enums | |
---|---|
UNKNOWN
|
Valeur par défaut. Ne pas utiliser. |
USER
|
pour les utilisateurs de Google Workspace. L'utilisateur peut uniquement afficher et sélectionner les utilisateurs de son organisation Google Workspace. |
HostAppDataSourceMarkup
Pour un widget
utilisant un menu multi-sélection, source de données provenant d'une application Google Workspace. La source de données renseigne les éléments de sélection pour le menu de sélection multiple.
SelectionInput
Disponible pour les applications Google Chat et indisponible pour les modules complémentaires Google Workspace.
Représentation JSON |
---|
{ // Union field |
Champs | |
---|---|
Champ d'union data_source . Application Google Workspace qui renseigne les éléments d'un menu multi-sélection.
data_source ne peut être que l'un des éléments suivants:
|
|
chatDataSource
|
Source de données Google Chat |
ChatClientDataSourceMarkup
Pour un widget
utilisant un menu multi-sélection, source de données Google Chat. La source de données renseigne les éléments de sélection pour le menu de sélection multiple. Par exemple, un utilisateur peut sélectionner des espaces Google Chat dont il est membre.
SelectionInput
Disponible pour les applications Google Chat et indisponible pour les modules complémentaires Google Workspace.
Représentation JSON |
---|
{ // Union field |
Champs | |
---|---|
Champ d'union source . Source de données Google Chat.
source ne peut être que l'un des éléments suivants:
|
|
spaceDataSource
|
Espaces Google Chat dont l'utilisateur est membre. |
SpaceDataSource
Source de données qui remplit les espaces Google Chat en tant qu'éléments de sélection pour un menu multi-sélection. N'insère que les espaces dont l'utilisateur est membre.
Disponible pour les applications Google Chat et indisponible pour les modules complémentaires Google Workspace.
Représentation JSON |
---|
{ "defaultToCurrentSpace": boolean } |
Champs | |
---|---|
defaultToCurrentSpace
|
S'il est défini sur |
DateTimePicker
Permet aux utilisateurs de saisir une date, une heure ou les deux. Pour obtenir un exemple dans les applications Google Chat, consultez Permettre à un utilisateur de choisir une date et une heure.
Les utilisateurs peuvent saisir du texte ou utiliser le sélecteur pour sélectionner des dates et des heures. Si les utilisateurs saisissent une date ou une heure non valide, le sélecteur affiche une erreur qui les invite à saisir correctement les informations.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace.
Représentation JSON |
---|
{ "name": string, "label": string, "type": enum ( |
Champs | |
---|---|
name
|
Nom par lequel Pour en savoir plus sur l'utilisation des entrées de formulaire, consultez Recevoir des données de formulaire. |
label
|
Texte qui invite les utilisateurs à saisir une date, une heure, ou une date et une heure. Par exemple, si les utilisateurs planifient un rendez-vous, utilisez un libellé tel que |
type
|
Indique si le widget prend en charge la saisie d'une date, d'une heure, ou d'une date et d'une heure. |
valueMsEpoch
|
Valeur par défaut affichée dans le widget, en millisecondes depuis l'heure de l'epoch Unix.
Spécifiez la valeur en fonction du type de sélecteur (
|
timezoneOffsetDate
|
Nombre représentant le décalage de fuseau horaire par rapport à l'UTC, en minutes. S'il est défini, |
onChangeAction
|
Déclenché lorsque l'utilisateur clique sur Enregistrer ou Effacer dans l'interface |
validation
|
Facultatif. Spécifiez la validation requise pour ce sélecteur de date et heure.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace. |
DateTimePickerType
Format de la date et de l'heure dans le widget DateTimePicker
. Détermine si les utilisateurs peuvent saisir une date, une heure ou les deux.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace.
Enums | |
---|---|
DATE_AND_TIME
|
Les utilisateurs saisissent une date et une heure. |
DATE_ONLY
|
Les utilisateurs saisissent une date. |
TIME_ONLY
|
Les utilisateurs saisissent une heure. |
Séparateur
Ce type ne comporte aucun champ.
Affiche un séparateur entre les widgets sous la forme d'une ligne horizontale. Pour obtenir un exemple dans les applications Google Chat, consultez Ajouter un séparateur horizontal entre les widgets.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace.
Par exemple, le code JSON suivant crée un séparateur:
"divider": {}
GRid
Affiche une grille avec une collection d'éléments. Les articles ne peuvent inclure que du texte ou des images. Pour les colonnes responsives, ou pour inclure plus que du texte ou des images, utilisez
. Pour obtenir un exemple dans les applications Google Chat, consultez Afficher une grille avec une collection d'éléments.
Columns
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 a 6 lignes.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace.
Par exemple, le code JSON suivant crée une grille à deux colonnes avec un seul élément:
"grid": {
"title": "A fine collection of items",
"columnCount": 2,
"borderStyle": {
"type": "STROKE",
"cornerRadius": 4
},
"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"
}
}
}
Représentation JSON |
---|
{ "title": string, "items": [ { object ( |
Champs | |
---|---|
title
|
Texte qui s'affiche dans l'en-tête de la grille. |
items[]
|
Éléments à afficher dans la grille. |
borderStyle
|
Style de bordure à appliquer à chaque élément de la grille. |
columnCount
|
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
|
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ésente un élément sous forme de grille. Les éléments peuvent contenir du texte, une image, ou les deux.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace.
Représentation JSON |
---|
{ "id": string, "image": { object ( |
Champs | |
---|---|
id
|
Identifiant spécifié par l'utilisateur pour cet élément de grille. Cet identifiant est renvoyé dans les paramètres de rappel |
image
|
Image qui s'affiche dans l'élément de la grille. |
title
|
Titre de l'élément de la grille. |
subtitle
|
Sous-titre de l'élément de la grille. |
layout
|
Mise en page à utiliser pour l'élément de la grille. |
ImageComponent
Représente une image.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace.
Représentation JSON |
---|
{ "imageUri": string, "altText": string, "cropStyle": { object ( |
Champs | |
---|---|
imageUri
|
URL de l'image |
altText
|
Libellé d'accessibilité de l'image. |
cropStyle
|
Style de recadrage à appliquer à l'image. |
borderStyle
|
Style de bordure à appliquer à l'image. |
ImageCropStyle
Représente le style de recadrage appliqué à une image.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace.
Par exemple, voici comment appliquer le format 16:9:
cropStyle {
"type": "RECTANGLE_CUSTOM",
"aspectRatio": 16/9
}
Représentation JSON |
---|
{
"type": enum (
|
Champs | |
---|---|
type
|
Type de recadrage. |
aspectRatio
|
Format à utiliser si le type de recadrage est Par exemple, voici comment appliquer le format 16:9:
|
ImageCropType
Représente le style de recadrage appliqué à une image.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace.
Enums | |
---|---|
IMAGE_CROP_TYPE_UNSPECIFIED
|
Ne pas utiliser. URL indéterminée. |
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
|
Applique un recadrage rectangulaire au format 4:3. |
BorderStyle
Options de style pour la bordure d'une carte ou d'un widget, y compris le type de bordure et la couleur.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace.
Représentation JSON |
---|
{ "type": enum ( |
Champs | |
---|---|
type
|
Type de bordure. |
strokeColor
|
Couleurs à utiliser lorsque le type est |
cornerRadius
|
Rayon de l'angle de la bordure. |
BorderType
Représente les types de bordures appliqués aux widgets.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace.
Enums | |
---|---|
BORDER_TYPE_UNSPECIFIED
|
Ne pas utiliser. URL indéterminée. |
NO_BORDER
|
Valeur par défaut. Aucune bordure |
STROKE
|
Contours. |
GridItemLayout
Représente les différentes options de mise en page disponibles pour un élément de grille.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace.
Enums | |
---|---|
GRID_ITEM_LAYOUT_UNSPECIFIED
|
Ne pas utiliser. URL indéterminé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. |
Colonne
Le widget Columns
affiche jusqu'à deux colonnes dans une fiche ou une boîte de dialogue. Vous pouvez ajouter des widgets à chaque colonne ; ceux-ci apparaissent dans l'ordre dans lequel ils ont été spécifiés. Pour obtenir un exemple dans les applications Google Chat, consultez Afficher les cartes et les boîtes de dialogue dans des colonnes.
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 auront 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.
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 à la ligne un retour à la ligne si la largeur de l'écran est inférieure ou égale à 480 pixels.
- Sur les appareils iOS, la deuxième colonne est renvoyée à la ligne si la largeur de l'écran est inférieure ou égale à 300 points.
- Sur les appareils Android, la deuxième colonne est encapsulée si la largeur de l'écran est inférieure ou égale à 320 dp.
Pour inclure plus de deux colonnes ou utiliser des lignes, utilisez le widget
.
Grid
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace. Les colonnes des modules complémentaires Google Workspace se trouvent dans la version Preview développeur.
Représentation JSON |
---|
{
"columnItems": [
{
object (
|
Champs | |
---|---|
columnItems[]
|
Tableau de colonnes. Vous pouvez inclure jusqu'à deux colonnes dans une fiche ou une boîte de dialogue. |
Colonne
Une colonne.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace. Les colonnes des modules complémentaires Google Workspace se trouvent dans la version Preview développeur.
Représentation JSON |
---|
{ "horizontalSizeStyle": enum ( |
Champs | |
---|---|
horizontalSizeStyle
|
Spécifie comment une colonne remplit la largeur de la fiche. |
horizontalAlignment
|
Indique si les widgets sont alignés à gauche, à droite ou au centre d'une colonne. |
verticalAlignment
|
Indique si les widgets sont alignés en haut, en bas ou au centre d'une colonne. |
widgets[]
|
Tableau de widgets inclus dans une colonne. Les widgets apparaissent dans l'ordre dans lequel ils sont spécifiés. |
HorizontalSizeStyle
Spécifie comment une colonne remplit la largeur de la fiche. La largeur de chaque colonne dépend à la fois de la HorizontalSizeStyle
et de la largeur des widgets qu'elle contient.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace. Les colonnes des modules complémentaires Google Workspace se trouvent dans la version Preview développeur.
Enums | |
---|---|
HORIZONTAL_SIZE_STYLE_UNSPECIFIED
|
Ne pas utiliser. URL indéterminée. |
FILL_AVAILABLE_SPACE
|
Valeur par défaut. La colonne occupe l'espace disponible jusqu'à 70% de la largeur de la fiche. Si les deux colonnes sont définies sur FILL_AVAILABLE_SPACE , chaque colonne remplit 50% de l'espace.
|
FILL_MINIMUM_SPACE
|
La colonne occupe le moins d'espace possible et ne dépasse pas 30% de la largeur de la fiche. |
HorizontalAlignment
Indique si les widgets sont alignés à gauche, à droite ou au centre d'une colonne.
Disponible pour les applications Google Chat et indisponible pour les modules complémentaires Google Workspace.
Enums | |
---|---|
HORIZONTAL_ALIGNMENT_UNSPECIFIED
|
Ne pas utiliser. URL indéterminée. |
START
|
Valeur par défaut. Aligne les widgets sur la position de début de la colonne. Pour les mises en page de gauche à droite, s'aligne sur la gauche. Pour les mises en page de droite à gauche, s'aligne sur la droite. |
CENTER
|
Aligne les widgets sur le centre de la colonne. |
END
|
Aligne les widgets sur la position de fin de la colonne. Pour les mises en page de gauche à droite, aligne les widgets vers la droite. Pour les mises en page de droite à gauche, aligne les widgets sur la gauche. |
VerticalAlignment
Indique si les widgets sont alignés en haut, en bas ou au centre d'une colonne.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace. Les colonnes des modules complémentaires Google Workspace se trouvent dans la version Preview développeur.
Enums | |
---|---|
VERTICAL_ALIGNMENT_UNSPECIFIED
|
Ne pas utiliser. URL indéterminée. |
CENTER
|
Valeur par défaut. Aligne les widgets sur le centre d'une colonne. |
TOP
|
Aligne les widgets en haut d'une colonne. |
BOTTOM
|
Aligne les widgets sur le bas d'une colonne. |
Widgets
Widgets compatibles que vous pouvez inclure dans une colonne.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace. Les colonnes des modules complémentaires Google Workspace se trouvent dans la version Preview développeur.
Représentation JSON |
---|
{ // Union field |
Champs | |
---|---|
Champ d'union
|
|
textParagraph
|
|
image
|
|
decoratedText
|
|
buttonList
|
|
textInput
|
|
selectionInput
|
|
dateTimePicker
|
|
DividerStyle
Style de séparateur d'une carte. Actuellement utilisé uniquement pour les séparateurs entre les sections de la fiche.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace.
Enums | |
---|---|
DIVIDER_STYLE_UNSPECIFIED
|
Ne pas utiliser. URL indéterminée. |
SOLID_DIVIDER
|
Option par défaut. Affichez un séparateur plein entre les sections. |
NO_DIVIDER
|
Si cette option est définie, aucun séparateur n'est affiché entre les sections. |
CardAction
Une action sur la fiche correspond à l'action associée à la fiche. Par exemple, une carte de facturation peut inclure des actions telles que supprimer la facture, envoyer la facture par e-mail ou ouvrir la facture dans un navigateur.
Disponible pour les modules complémentaires Google Workspace et indisponible pour les applications Google Chat.
Représentation JSON |
---|
{
"actionLabel": string,
"onClick": {
object (
|
Champs | |
---|---|
actionLabel
|
Libellé affiché comme élément du menu d'actions. |
onClick
|
Action |
DisplayStyle
Dans les modules complémentaires Google Workspace, détermine la façon dont une fiche s'affiche.
Disponible pour les modules complémentaires Google Workspace et indisponible pour les applications Google Chat.
Enums | |
---|---|
DISPLAY_STYLE_UNSPECIFIED
|
Ne pas utiliser. URL indéterminée. |
PEEK
|
L'en-tête de la carte apparaît au bas de la barre latérale, recouvrant partiellement la première carte actuelle de la pile. Cliquez sur l'en-tête pour faire apparaître la carte dans la pile de cartes. Si la fiche n'a pas d'en-tête, un en-tête généré est utilisé. |
REPLACE
|
Valeur par défaut. La carte est affichée en remplaçant la vue de la première carte dans la pile de cartes. |