Cards v2

Fiche

Interface sous forme de fiche affichée dans un message Google Chat ou un module complémentaire Google Workspace

Les fiches sont compatibles avec une mise en page définie, des éléments interactifs d'interface utilisateur (comme des boutons) et des contenus 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 guider vers l'étape suivante.

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

Ouvrir Card Builder

Pour savoir comment créer des fiches, consultez la documentation suivante:

Exemple: Message de fiche pour une application Google Chat

Exemple de fiche de contact

Pour créer l'exemple de message de fiche dans Google Chat, utilisez le fichier 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 (CardHeader)
  },
  "sections": [
    {
      object (Section)
    }
  ],
  "sectionDividerStyle": enum (DividerStyle),
  "cardActions": [
    {
      object (CardAction)
    }
  ],
  "name": string,
  "fixedFooter": {
    object (CardFixedFooter)
  },
  "displayStyle": enum (DisplayStyle),
  "peekCardHeader": {
    object (CardHeader)
  }
}
Champs
header

object (CardHeader)

En-tête de la carte. Un en-tête contient généralement une image de début et un titre. Les en-têtes apparaissent toujours en haut des fiches.

sections[]

object (Section)

Contient un ensemble de widgets. Chaque section possède son propre en-tête facultatif. Les sections sont séparées visuellement par un séparateur de lignes. Pour voir un exemple dans les applications Google Chat, consultez Définir une section d'une fiche

sectionDividerStyle

enum (DividerStyle)

Style de séparation entre les sections.

cardActions[]

object (CardAction)

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

Disponible avec les modules complémentaires Google Workspace et non disponible dans les applications Google Chat.

Par exemple, le code JSON suivant construit un menu d'actions de carte avec Settings et Send Feedback options:

"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 par carte.

Disponible avec les modules complémentaires Google Workspace et non disponible dans les applications Google Chat.

displayStyle

enum (DisplayStyle)

Dans les modules complémentaires Google Workspace, ce paramètre définit les propriétés d'affichage du peekCardHeader

Disponible avec les modules complémentaires Google Workspace et non disponible dans les applications Google Chat.

peekCardHeader

object (CardHeader)

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

Disponible avec les modules complémentaires Google Workspace et non disponible dans les applications Google Chat.

CardHeader

Représente un en-tête de carte. Pour voir un exemple dans les applications Google Chat, consultez Ajoutez 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 (ImageType),
  "imageUrl": string,
  "imageAltText": string
}
Champs
title

string

Obligatoire. Titre de l'en-tête de la fiche. L'en-tête a une hauteur fixe: si un titre et un sous-titre sont tous les deux spécifiés, chacun occupe 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 carte. S'il est spécifié, il apparaît sur sa propre ligne sous la title

imageType

enum (ImageType)

Forme utilisée pour recadrer l'image.

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

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

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 4x3 devient 3x3.
CIRCLE Applique un masque circulaire à l'image. Par exemple, une image 4x3 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 (Widget)
    }
  ],
  "collapsible": boolean,
  "uncollapsibleWidgetsCount": integer,
  "collapseControl": {
    object (CollapseControl)
  }
}
Champs
header

string

Texte affiché en haut d'une section. Accepte les textes 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 le texte dans les modules complémentaires Google Workspace

widgets[]

object (Widget)

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

collapsible

boolean

Indique si cette section peut être réduite.

Les sections réductibles masquent certains ou tous les widgets, mais les utilisateurs peuvent la développer pour afficher les widgets masqués en cliquant sur Plus : Les utilisateurs peuvent à nouveau masquer les widgets en cliquant sur Afficher moins :

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

uncollapsibleWidgetsCount

integer

Nombre de widgets 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. La uncollapsibleWidgetsCount n'est prise en compte collapsible correspond à true

collapseControl

object (CollapseControl)

<ph type="x-smartling-placeholder">

Facultatif. Définissez les boutons d'expansion et de réduction de la section. Ce bouton ne s'affiche que si la section peut être réduite. Si ce champ n'est pas défini, le bouton par défaut est utilisé. Disponible pour les applications Google Chat et non disponible pour les modules complémentaires Google Workspace.

Widget

Chaque fiche est composée de widgets.

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

Représentation JSON
{
  "horizontalAlignment": enum (HorizontalAlignment),

  // Union field data can be only one of the following:
  "textParagraph": {
    object (TextParagraph)
  },
  "image": {
    object (Image)
  },
  "decoratedText": {
    object (DecoratedText)
  },
  "buttonList": {
    object (ButtonList)
  },
  "textInput": {
    object (TextInput)
  },
  "selectionInput": {
    object (SelectionInput)
  },
  "dateTimePicker": {
    object (DateTimePicker)
  },
  "divider": {
    object (Divider)
  },
  "grid": {
    object (Grid)
  },
  "columns": {
    object (Columns)
  },
  "chipList": {
    object (ChipList)
  }
  // End of list of possible types for union field data.
}
Champs
horizontalAlignment

enum (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 que l'un des éléments suivants. Vous pouvez utiliser plusieurs champs de widget pour afficher plus d'éléments. data ne peut être que l'un des éléments suivants:
textParagraph

object (TextParagraph)

Affiche un paragraphe de texte. Accepte les textes 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 le texte dans les modules complémentaires Google Workspace

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

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

object (Image)

Affiche une image.

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

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

object (DecoratedText)

Affiche un élément textuel décoré.

Par exemple, le fichier JSON suivant crée un widget de 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!",
  "switchControl": {
    "name": "has_send_welcome_email_to_sasha",
    "selected": false,
    "controlType": "CHECKBOX"
  }
}
buttonList

object (ButtonList)

Liste de boutons.

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

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

object (TextInput)

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

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

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

Dans cet autre exemple, le code JSON suivant crée une entrée de texte pour un langage de programmation à l'aide de suggestions statiques:

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

object (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 boutons bascules 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:

"selectionInput": {
  "name": "size",
  "label": "Size"
  "type": "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

object (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:

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

object (Divider)

Affiche une ligne de séparation horizontale entre les widgets.

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

"divider": {
}
grid

object (Grid)

Affiche une grille avec une collection d'éléments.

Une grille peut comporter 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é par le nombre de colonnes. Une grille de 10 éléments et 2 colonnes contient 5 lignes. Une grille de 11 éléments et 2 colonnes contient 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"
    }
  }
}
columns

object (Columns)

Affiche jusqu'à deux colonnes.

Pour inclure plus de deux colonnes ou utiliser des lignes, utilisez les Grid .

Par exemple, le code JSON suivant crée deux colonnes contenant chacune des paragraphes de texte:

"columns": {
  "columnItems": [
    {
      "horizontalSizeStyle": "FILL_AVAILABLE_SPACE",
      "horizontalAlignment": "CENTER",
      "verticalAlignment": "CENTER",
      "widgets": [
        {
          "textParagraph": {
            "text": "First column text paragraph"
          }
        }
      ]
    },
    {
      "horizontalSizeStyle": "FILL_AVAILABLE_SPACE",
      "horizontalAlignment": "CENTER",
      "verticalAlignment": "CENTER",
      "widgets": [
        {
          "textParagraph": {
            "text": "Second column text paragraph"
          }
        }
      ]
    }
  ]
}
chipList

object (ChipList)

<ph type="x-smartling-placeholder">

Liste de chips.

Par exemple, le code JSON suivant crée deux puces. Le premier est un chip de texte et le second est un chip d'icône qui permet d'ouvrir un lien:

"chipList": {
  "chips": [
    {
      "text": "Edit",
      "disabled": true,
    },
    {
      "icon": {
        "knownIcon": "INVITE",
        "altText": "check calendar"
      },
      "onClick": {
        "openLink": {
          "url": "https://example.com/calendar"
        }
      }
    }
  ]
}

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

TextParagraph

Paragraphe de texte compatible avec la mise en forme. Pour voir 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 le 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,
  "maxLines": integer
}
Champs
text

string

Texte affiché dans le widget.

maxLines

integer

<ph type="x-smartling-placeholder">

Nombre maximal de lignes de texte affichées dans le widget. Si le texte dépasse le nombre maximal de lignes spécifié, le contenu en trop est dissimulé derrière un afficher plus . Si le texte est inférieur ou égal au nombre maximal de lignes spécifié, une afficher plus ne s'affiche pas.

La valeur par défaut est 0, auquel cas tout le contexte est affiché. Les valeurs négatives sont ignorées. Disponible pour les applications Google Chat et non disponible pour les modules complémentaires Google Workspace.

Image

Une image spécifiée par une URL et pouvant avoir une onClick action. Pour voir un exemple, consultez Ajoutez une image.

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

Représentation JSON
{
  "imageUrl": string,
  "onClick": {
    object (OnClick)
  },
  "altText": string
}
Champs
imageUrl

string

URL HTTPS qui héberge l'image.

Exemple :

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

object (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é.

OnClick

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

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

Représentation JSON
{

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

Champ d'union data

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

action

object (Action)

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

card

object (Card)

Si un clic est spécifié, une nouvelle carte est transférée dans la pile de cartes.

Disponible avec les modules complémentaires Google Workspace et non disponible dans les applications Google Chat.

overflowMenu

object (OverflowMenu)

<ph type="x-smartling-placeholder">

Si cet argument est spécifié, onClick ouvre un menu à développer. Disponible pour les applications Google Chat et non disponible pour les modules complémentaires Google Workspace.

Action

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

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

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

string

Fonction personnalisée à invoquer lorsque l'utilisateur clique sur l'élément parent ou est activé d'une autre manière.

Pour un exemple d'utilisation, consultez Lire les données de formulaire

parameters[]

object (ActionParameter)

Liste des paramètres d'action.

loadIndicator

enum (LoadIndicator)

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

persistValues

boolean

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

Si true, les valeurs du formulaire restent après le déclenchement de l'action. Pour permettre à l'utilisateur d'apporter des modifications pendant le traitement de l'action, définissez LoadIndicator à NONE Pour messages des fiches dans les applications Chat, vous devez également définir ResponseType à UPDATE_MESSAGE et utilisent les mêmes cardId de la fiche contenant l'action.

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

interaction

enum (Interaction)

Facultatif. Obligatoire pour ouvrir un dialog.

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

Si aucune valeur n'est spécifiée, l'application répond en exécutant une action (par exemple, en ouvrant un lien ou en exécutant une fonction).

En spécifiant un interaction, l'application peut répondre de manière interactive spéciale. Par exemple, en définissant interaction à OPEN_DIALOG, l'application peut ouvrir boîte de dialogue. Si 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 ne s'affiche dans le client.

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

requiredWidgets[]

string

<ph type="x-smartling-placeholder"> Facultatif. Remplissez cette liste avec les noms des widgets dont cette action a besoin pour un envoi valide.

Si les widgets répertoriés ici n'ont pas de valeur 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

boolean

<ph type="x-smartling-placeholder"> Facultatif. Si c'est le cas, tous les widgets sont considérés comme requis 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 de mise en attente: répéter maintenant, répéter un jour ou répéter la semaine suivante. Vous pourriez utiliser action method = snooze(), en transmettant le type et la durée de la 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

string

Nom du paramètre pour le script d'action.

value

string

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.

Interaction

Facultatif. Obligatoire pour ouvrir un dialog.

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

Si aucune valeur n'est spécifiée, l'application répond en exécutant une action (par exemple, en ouvrant un lien ou en exécutant une fonction).

En spécifiant un interaction, l'application peut répondre de manière interactive spéciale. Par exemple, en définissant interaction à OPEN_DIALOG, l'application peut ouvrir boîte de dialogue.

Si 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 ne s'affiche dans le client.

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

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

Ouvre un dialog : interface fenêtrée sous forme de fiches qui permet aux applications Chat d'interagir avec les utilisateurs.

Compatible uniquement avec les applications Chat lorsque l'utilisateur clique sur un bouton 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 ne s'affiche dans le client.

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

OpenAs

Lorsqu'un OnClick ouvre un lien, le client peut alors l'ouvrir soit en taille réelle (s'il s'agit du cadre utilisé par le client), soit en superposition (comme une fenêtre pop-up). L'implémentation dépend des fonctionnalités de la plate-forme cliente, et la valeur sélectionnée peut être ignorée si le client n'est pas compatible. FULL_SIZE est pris en charge par tous les clients.

Disponible avec les modules complémentaires Google Workspace et non disponible dans les applications Google 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, dans un pop-up par exemple.

OnClose

Que fait le client lorsqu'un lien ouvert par un OnClick est fermée.

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 une OnClose .

Si les OnOpen et OnClose sont définis, et la plate-forme cliente ne peut pas prendre en charge les deux valeurs, OnClose est prioritaire.

Disponible avec les modules complémentaires Google Workspace et non disponible dans les applications Google Chat.

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

La fiche est actualisée une fois la fenêtre enfant fermée.

S'il est utilisé avec OpenAs.OVERLAY, la fenêtre enfant fait office de boîte de dialogue modale, et la fiche parente est bloquée jusqu'à ce que la fenêtre enfant se ferme.

OverflowMenu

<ph type="x-smartling-placeholder">

Widget qui présente un menu pop-up avec une ou plusieurs actions que les utilisateurs peuvent appeler. Par exemple, afficher des actions secondaires dans une fiche. Vous pouvez utiliser ce widget lorsque l'espace disponible est insuffisant pour les actions. Spécifiez ce widget dans le champ OnClick des widgets compatibles. Par exemple, dans un Button

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

Représentation JSON
{
  "items": [
    {
      object (OverflowMenuItem)
    }
  ]
}
Champs
items[]

object (OverflowMenuItem)

Obligatoire. Liste des options du menu.

OverflowMenuItem

<ph type="x-smartling-placeholder"> Option que les utilisateurs peuvent appeler dans un menu à développer.

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

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

object (Icon)

Icône affichée devant le texte.

text

string

Obligatoire. Texte qui identifie ou décrit l'élément pour les utilisateurs.

onClick

object (OnClick)

Obligatoire. Action appelée lorsqu'une option de menu est sélectionnée. Ce OnClick ne peut pas contenir OverflowMenu (valeur spécifiée) OverflowMenu est supprimé et l'élément de menu est désactivé.

disabled

boolean

Indique si l'option de menu est désactivée. Valeur par défaut : "false".

Icône

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

Compatible intégré et personnalisé .

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

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

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

string

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

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

imageType

enum (ImageType)

Style de recadrage appliqué à l'image. Dans certains cas, l'application d'une CIRCLE recadrée rend l'image plus grande qu'une icône intégrée.

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

string

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

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

Pour obtenir la liste complète des icônes prises en charge, consultez icônes intégrées.

iconUrl

string

Affichez une icône personnalisée hébergée sur une URL HTTPS.

Exemple :

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

Types de fichiers compatibles : .png et .jpg

materialIcon

object (MaterialIcon)

Affichez l'un des Icônes Google Material.

Par exemple, pour afficher icône de case à cocher, utilisez

"materialIcon": {
  "name": "check_box"
}

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

MaterialIcon

A Icône Google Material, qui inclut plus de 2 500 options.

Par exemple, pour afficher icône de case à cocher avec un poids et une note personnalisés, écrivez ce qui suit:

{
  "name": "check_box",
  "fill": true,
  "weight": 300,
  "grade": -25
}

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

Représentation JSON
{
  "name": string,
  "fill": boolean,
  "weight": integer,
  "grade": integer
}
Champs
name

string

Nom de l'icône défini dans le Icône Google Material, par exemple, check_box Tous les noms non valides sont abandonnés et remplacés par une chaîne vide, ce qui entraîne l'échec de l'affichage de l'icône.

fill

boolean

Indique si l'icône est remplie ou non. La valeur par défaut est Faux (false).

Pour prévisualiser différents paramètres d'icône, accédez à Icônes Google Fonts et ajustez les paramètres sous Personnaliser :

weight

integer

Épaisseur du trait de l'icône. Choisissez parmi {100, 200, 300, 400, 500, 600, 700}. Si ce champ n'est pas renseigné, 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 Google Fonts et ajustez les paramètres sous Personnaliser :

grade

integer

Le poids et le niveau déterminent l'épaisseur d'un symbole. Les ajustements de note 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 ce champ n'est pas renseigné, 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 Google Fonts et ajustez les paramètres sous Personnaliser :

DecoratedText

Widget affichant du texte avec des décorations facultatives, telles qu'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 voir un exemple dans les applications Google Chat, consultez Afficher le texte avec un texte décoratif :

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

Représentation JSON
{
  "icon": {
    object (Icon)
  },
  "startIcon": {
    object (Icon)
  },
  "topLabel": string,
  "text": string,
  "wrapText": boolean,
  "bottomLabel": string,
  "onClick": {
    object (OnClick)
  },

  // Union field control can be only one of the following:
  "button": {
    object (Button)
  },
  "switchControl": {
    object (SwitchControl)
  },
  "endIcon": {
    object (Icon)
  }
  // End of list of possible types for union field control.
}
Champs
icon
(deprecated)

object (Icon)

Obsolète au profit de startIcon

startIcon

object (Icon)

Icône affichée devant le texte.

topLabel

string

Le texte qui s'affiche au-dessus text Toujours tronquer

text

string

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 le texte dans les modules complémentaires Google Workspace

wrapText

boolean

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

S'applique uniquement aux éléments suivants : text, et non topLabel et bottomLabel

bottomLabel

string

Le texte qui s'affiche en dessous text Encapsule toujours.

onClick

object (OnClick)

Cette action est déclenchée lorsque les utilisateurs cliquent topLabel ou bottomLabel

Champ d'union control Un bouton, un commutateur, une case à cocher ou une image qui apparaît à droite du texte dans la decoratedText . control ne peut être que l'un des éléments suivants:
button

object (Button)

Un bouton sur lequel un utilisateur peut cliquer pour déclencher une action.

switchControl

object (SwitchControl)

Widget de contacteur sur lequel l'utilisateur peut cliquer pour modifier son état et déclencher une action.

endIcon

object (Icon)

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

Compatible intégré et personnalisé .

Bouton

Un texte, une icône ou un bouton de texte et d'icône sur lequel les utilisateurs peuvent cliquer. Pour voir un exemple dans les applications Google Chat, consultez Ajouter un bouton

Pour transformer une image en bouton cliquable, spécifiez une Image (il ne s'agit pas d'une ImageComponent), puis définissez une onClick action.

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

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

string

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

icon

object (Icon)

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

color

object (Color)

S'il est défini, le bouton est rempli d'une couleur d'arrière-plan unie et la couleur de la police change pour maintenir le contraste avec la couleur d'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 une float que vous pouvez exprimer 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 d'une couleur et 1 ou 255/255 représente la présence complète de cette couleur sur l'échelle RVB.

Défini (facultatif) alpha, qui définit un niveau de transparence à l'aide de l'équation suivante:

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

Pour alpha, une valeur de 1 correspond à une couleur unie et à la valeur 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

object (OnClick)

Obligatoire. Action à effectuer lorsqu'un utilisateur clique sur le bouton, par exemple ouvrir un lien hypertexte ou exécuter une fonction personnalisée.

disabled

boolean

Si true, le bouton est affiché comme inactif et ne répond pas aux actions de l'utilisateur.

altText

string

Texte alternatif utilisé pour l'accessibilité.

Définissez un texte descriptif pour indiquer aux utilisateurs à quoi sert le bouton. Par exemple, si un bouton ouvre un lien hypertexte, vous pouvez écrire : "Ouvre un nouvel onglet de navigateur et permet d'accéder à la documentation Google Chat destinée aux développeurs sur https://developers.google.com/workspace/chat&quot;.

type

enum (Type)

<ph type="x-smartling-placeholder">

Détermine le type d'un bouton.

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

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 plutôt que pour être compacte. Par exemple, les champs de cette représentation peuvent être fournis de manière triviale au constructeur de java.awt.Color en Java. il peut également être fourni de manière triviale au +colorWithRed:green:blue:alpha dans iOS. Vous pouvez facilement le formater dans un 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 (sRVB, Adobe RVB, DCI-P3 et BT.2020, par exemple). Par défaut, les applications doivent supposer que l'espace colorimétrique sRVB est utilisé.

Lorsqu'il est nécessaire de décider de l'égalité des couleurs, les implémentations, sauf indication contraire, traitent deux couleurs comme égales si toutes leurs valeurs rouge, vert, bleu et alpha diffèrent au maximum de chacune 1e-5

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

number

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

green

number

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

blue

number

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

alpha

number

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

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

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

Type

<ph type="x-smartling-placeholder">

La d'un bouton.

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

Enums
TYPE_UNSPECIFIED Ne pas utiliser. Non spécifié.
OUTLINED Les boutons avec contours sont des boutons à intensité moyenne. Ils contiennent généralement des actions importantes, mais qui ne correspondent pas à l'action principale dans une application ou un module complémentaire Chat.
FILLED Un bouton plein est un conteneur de couleur unie. Elle a l'impact le plus visuel et est recommandée pour l'action principale et importante dans une application ou un module complémentaire Chat.
FILLED_TONAL Un bouton tonal plein est un autre milieu entre les boutons remplis et les boutons encadrés. Ils sont utiles dans les contextes où un bouton de priorité inférieure nécessite un peu plus d'emphase qu'un bouton de contour.
BORDERLESS Un bouton n'a pas de conteneur invisible dans son état par défaut. Il est souvent utilisé pour les actions les moins prioritaires, en particulier lors de la présentation de plusieurs options.

SwitchControl

Il peut s'agir d'un bouton bascule ou d'une case à cocher à l'intérieur d'un decoratedText .

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

Uniquement disponible dans les decoratedText .

Représentation JSON
{
  "name": string,
  "value": string,
  "selected": boolean,
  "onChangeAction": {
    object (Action)
  },
  "controlType": enum (ControlType)
}
Champs
name

string

Nom par lequel le widget switch est identifié dans un événement d'entrée de formulaire.

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

value

string

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 les données du formulaire

selected

boolean

Quand ? true, le bouton bascule est sélectionné.

onChangeAction

object (Action)

Action à effectuer lorsque l'état du bouton bascule est modifié, par exemple la fonction à exécuter.

controlType

enum (ControlType)

Affichage du bouton bascule dans l'interface utilisateur

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

ControlType

Affichage du bouton bascule 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 Une case à cocher.

ButtonList

Liste de boutons disposés horizontalement. Pour voir un exemple dans les applications Google Chat, consultez Ajouter un bouton

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

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

object (Button)

Tableau de boutons.

TextInput

Champ dans lequel les utilisateurs peuvent saisir du texte. Prise en charge des suggestions et des actions en cas de modification. Pour voir un exemple dans les applications Google Chat, consultez Ajoutez un champ dans lequel l'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 les données du formulaire

Lorsque vous devez collecter des données non définies ou abstraites auprès des utilisateurs, utilisez une saisie de texte. Pour collecter des données définies ou énumérées auprès des utilisateurs, utilisez le 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 (Type),
  "onChangeAction": {
    object (Action)
  },
  "initialSuggestions": {
    object (Suggestions)
  },
  "autoCompleteAction": {
    object (Action)
  },
  "validation": {
    object (Validation)
  },
  "placeholderText": string
}
Champs
name

string

Nom par lequel 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 les données du formulaire

label

string

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

Spécifiez du 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, écrivez surname au lieu de name

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

hintText

string

Texte qui s'affiche sous le champ de saisie pour aider les utilisateurs en les invitant à saisir une certaine valeur. Ce texte est toujours visible.

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

value

string

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 les données du formulaire

type

enum (Type)

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

onChangeAction

object (Action)

Que faire en cas de modification du champ de saisie de texte ? Par exemple, un utilisateur ajoute des éléments au champ ou supprime du texte.

Les exemples d'actions à effectuer incluent l'exécution d'une fonction personnalisée ou l'ouverture d'un boîte de dialogue dans Google Chat.

initialSuggestions

object (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 de manière dynamique 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 du texte Jav, la liste des filtres de suggestions à afficher uniquement 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 autres java script Suggestion JavaScript peuvent 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.

autoCompleteAction

object (Action)

Facultatif. Spécifiez l'action à effectuer lorsque le champ de saisie de texte fournit des suggestions aux utilisateurs qui interagissent avec lui.

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

Si elle est spécifiée, l'application effectue l'action spécifiée ici, comme exécuter une fonction personnalisée.

Disponible avec les modules complémentaires Google Workspace et non disponible dans les applications Google Chat.

validation

object (Validation)

<ph type="x-smartling-placeholder"> 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

string

Texte qui s'affiche dans le champ de saisie lorsque celui-ci est vide. Utilisez ce texte pour inviter les utilisateurs à saisir une valeur. Exemple : Enter a number from 0 to 100.

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

Type

Affichage d'un champ de saisie de texte dans l'interface utilisateur. Par exemple, il peut s'agir d'un champ de saisie sur une seule ligne ou sur plusieurs lignes. Si initialSuggestions est spécifiée, 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 La hauteur du champ de saisie de texte est fixe, à savoir une ligne.
MULTIPLE_LINE Le champ de saisie de texte a une hauteur fixe de plusieurs lignes.

RenderActions

Un ensemble d'instructions d'affichage indiquant à une fiche d'effectuer une action 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

Action

Champs
navigations[]

Navigation

Transférez ou mettez à jour les cartes affichées.

Ajoutez une nouvelle carte à la pile (avancez). Pour les applications Chat, disponible uniquement sur la page Accueil de l'application.

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

navigations: {
  pushCard: CARD
}

Remplacez la première carte par une nouvelle carte. Pour les applications Chat, disponible uniquement sur la page Accueil de l'application.

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

navigations: {
  updateCard: CARD
}

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 de manière dynamique 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 du texte Jav, la liste des filtres de suggestions à afficher 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 autres java script Suggestion JavaScript peuvent 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 (SuggestionItem)
    }
  ]
}
Champs
items[]

object (SuggestionItem)

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

SuggestionItem

Valeur suggérée 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 content can be only one of the following:
  "text": string
  // End of list of possible types for union field content.
}
Champs

Champ d'union content

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

text

string

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

Validation

<ph type="x-smartling-placeholder"> Représente les données nécessaires pour valider le widget auquel il est associé.

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

Représentation JSON
{
  "characterLimit": integer,
  "inputType": enum (InputType)
}
Champs
characterLimit

integer

<ph type="x-smartling-placeholder"> Spécifiez 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

enum (InputType)

<ph type="x-smartling-placeholder"> Spécifiez le type de widgets d'entrée.

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

InputType

Type de widget d'entrée.

Enums
INPUT_TYPE_UNSPECIFIED Type non spécifié. Ne pas utiliser.
TEXT Texte standard qui accepte tous les caractères.
INTEGER Valeur entière.
FLOAT Valeur flottante.
EMAIL Adresse e-mail
EMOJI_PICKER Un 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 qui peuvent être prédites ou énumérées. Pour voir un exemple dans les applications Google Chat, consultez Ajoutez des éléments d'interface utilisateur sélectionnables.

Les applications de chat peuvent traiter la valeur des éléments sélectionnés ou saisis par les utilisateurs. Pour en savoir plus sur l'utilisation des entrées de formulaire, consultez Recevoir les données du formulaire

Pour collecter des données non définies ou abstraites auprès des utilisateurs, utilisez le TextInput .

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

Représentation JSON
{
  "name": string,
  "label": string,
  "type": enum (SelectionType),
  "items": [
    {
      object (SelectionItem)
    }
  ],
  "onChangeAction": {
    object (Action)
  },
  "multiSelectMaxSelectedItems": integer,
  "multiSelectMinQueryLength": integer,
  "validation": {
    object (Validation)
  },

  // Union field multi_select_data_source can be only one of the following:
  "externalDataSource": {
    object (Action)
  },
  "platformDataSource": {
    object (PlatformDataSource)
  }
  // End of list of possible types for union field multi_select_data_source.
}
Champs
name

string

Obligatoire. 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 les données du formulaire

label

string

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

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

type

enum (SelectionType)

Type d'éléments présentés aux utilisateurs dans une SelectionInput . Les types de sélection sont compatibles avec différents types d'interactions. Par exemple, les utilisateurs peuvent cocher une ou plusieurs cases, mais ils ne peuvent sélectionner qu'une seule valeur dans un menu déroulant.

items[]

object (SelectionItem)

Tableau d'éléments sélectionnables. Par exemple, un tableau de cases d'option ou de cases à cocher. Jusqu'à 100 éléments sont acceptés.

onChangeAction

object (Action)

Si une valeur est spécifiée, le formulaire est envoyé lorsque la sélection change. Si aucune valeur n'est spécifiée, vous devez ajouter un bouton distinct pour envoyer le formulaire.

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

multiSelectMaxSelectedItems

integer

Pour les menus à sélection multiple, 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 de 3 éléments.

multiSelectMinQueryLength

integer

Pour les menus à sélection multiple, nombre de caractères de texte saisis par l'utilisateur avant que l'application n'interroge la saisie semi-automatique et affiche des é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

object (Validation)

Pour les menus déroulants, validation de ce champ de saisie de sélection.

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

Champ d'union multi_select_data_source Pour un menu multi-sélection, il s'agit de la source de données qui insère les éléments de sélection.

Disponible pour les applications Google Chat et non disponible pour les modules complémentaires Google Workspace. multi_select_data_source ne peut être que l'un des éléments suivants:

externalDataSource

object (Action)

Une source de données externe, telle qu'une base de données relationnelle.

platformDataSource

object (PlatformDataSource)

Une source de données de Google Workspace

SelectionType

Format des éléments que les utilisateurs peuvent sélectionner. Différentes options permettent différents types d'interactions. 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 accepte un type de sélection. Il n'est pas possible, par exemple, de combiner des cases à cocher et des boutons bascules.

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

Enums
CHECK_BOX Ensemble 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 à sélection multiple 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 renseigner des données dynamiques. Par exemple, les utilisateurs peuvent commencer à saisir le nom d'un espace Google Chat, et le widget suggère automatiquement l'espace.

Pour renseigner les éléments d'un menu multi-sélection, vous pouvez utiliser l'un des types de sources de données suivants:

  • Données statiques: les éléments sont spécifiés en tant que SelectionItem dans le widget. Jusqu'à 100 éléments.
  • Données Google Workspace: les éléments sont renseignés à l'aide des données Google Workspace, telles que les utilisateurs Google Workspace ou les espaces Google Chat.
  • Données externes: les éléments sont renseignés à partir d'une source de données externe en dehors de Google Workspace.

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.

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

string

Texte qui identifie ou décrit l'élément pour les utilisateurs.

value

string

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

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

selected

boolean

Indique si l'élément est sélectionné par défaut. Si la sélection n'accepte qu'une seule valeur (par exemple, pour des cases d'option ou un menu déroulant), définissez ce champ pour un seul élément.

startIconUri

string

Pour les menus à sélection multiple, l'URL de l'icône affichée à côté de l'icône text . Compatible avec les fichiers PNG et JPEG. Doit être un HTTPS URL. Par exemple : https://developers.google.com/workspace/chat/images/quickstart-app-avatar.png

bottomText

string

Pour les menus à sélection multiple, une description textuelle ou un libellé qui s'affiche sous le nom de l'élément text .

PlatformDataSource

Pour une SelectionInput qui utilise un menu multi-sélection, une source de données de Google Workspace. Permet d'afficher les éléments d'un menu multi-sélection.

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

Représentation JSON
{

  // Union field data_source can be only one of the following:
  "commonDataSource": enum (CommonDataSource),
  "hostAppDataSource": {
    object (HostAppDataSourceMarkup)
  }
  // End of list of possible types for union field data_source.
}
Champs
Champ d'union data_source Source de données. data_source ne peut être que l'un des éléments suivants:
commonDataSource

enum (CommonDataSource)

Source de données partagée par toutes les applications Google Workspace, telles que les utilisateurs d'une organisation Google Workspace.

hostAppDataSource

object (HostAppDataSourceMarkup)

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 tous Applications Google Workspace :

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

Enums
UNKNOWN Valeur par défaut. Ne pas utiliser.
USER d'utilisateurs Google Workspace. L'utilisateur peut uniquement afficher et sélectionner les utilisateurs de son organisation Google Workspace.

HostAppDataSourceMarkup

Pour une SelectionInput widget qui utilise un menu multi-sélection, une source de données provenant d'une application Google Workspace. La source de données insère les éléments de sélection pour le menu multi-sélection.

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

Représentation JSON
{

  // Union field data_source can be only one of the following:
  "chatDataSource": {
    object (ChatClientDataSourceMarkup)
  }
  // End of list of possible types for union field data_source.
}
Champs
Champ d'union data_source Application Google Workspace qui insère les éléments d'un menu multi-sélection. data_source ne peut être que l'un des éléments suivants:
chatDataSource

object (ChatClientDataSourceMarkup)

Source de données de Google Chat

ChatClientDataSourceMarkup

Pour une SelectionInput qui utilise un menu multi-sélection, une source de données de Google Chat. La source de données insère les éléments de sélection pour le menu multi-sélection. Par exemple, un utilisateur peut sélectionner les espaces Google Chat dont il fait partie.

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

Représentation JSON
{

  // Union field source can be only one of the following:
  "spaceDataSource": {
    object (SpaceDataSource)
  }
  // End of list of possible types for union field source.
}
Champs
Champ d'union source Source de données Google Chat. source ne peut être que l'un des éléments suivants:
spaceDataSource

object (SpaceDataSource)

Espaces Google Chat dont l'utilisateur est membre.

SpaceDataSource

Source de données qui renseigne les espaces Google Chat en tant qu'éléments de sélection pour un menu multi-sélection. Ne remplit que les espaces dont l'utilisateur est membre.

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

Représentation JSON
{
  "defaultToCurrentSpace": boolean
}
Champs
defaultToCurrentSpace

boolean

Si défini sur true, le menu multi-sélection sélectionne par défaut l'espace Google Chat actuel comme élément.

DateTimePicker

Permet aux utilisateurs de saisir une date, une heure, ou les deux. Pour voir un exemple dans les applications Google Chat, consultez Laisser l'utilisateur 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 valides, l'outil de sélection 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 (DateTimePickerType),
  "valueMsEpoch": string,
  "timezoneOffsetDate": integer,
  "onChangeAction": {
    object (Action)
  },
  "validation": {
    object (Validation)
  }
}
Champs
name

string

Le nom sous lequel DateTimePicker est identifié dans un événement de saisie de formulaire.

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

label

string

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 une étiquette telle que Appointment date ou Appointment date and time

type

enum (DateTimePickerType)

Indique si le widget prend en charge la saisie d'une date, d'une heure, ou de la date et l'heure.

valueMsEpoch

string (int64 format)

La valeur par défaut affichée dans le widget, en millisecondes depuis Heure de l'epoch Unix.

Spécifiez la valeur en fonction du type de sélecteur ( DateTimePickerType):

  • DATE_AND_TIME : une date et une heure du calendrier au format UTC. Par exemple, pour représenter le 1er janvier 2023 à minuit UTC, utilisez 1672574400000
  • DATE_ONLY : une date du calendrier à 00:00:00 UTC. Par exemple, pour représenter le 1er janvier 2023, utilisez 1672531200000
  • TIME_ONLY : une heure UTC. Par exemple, pour indiquer 12:00, utilisez 43200000 (ou 12 * 60 * 60 * 1000).
timezoneOffsetDate

integer

Nombre représentant le décalage de fuseau horaire par rapport à l'heure UTC, en minutes. S'il est défini, valueMsEpoch s'affiche dans le fuseau horaire spécifié. Si cette règle n'est pas configurée, la valeur par défaut est le fuseau horaire de l'utilisateur.

onChangeAction

object (Action)

Déclenchement lorsque l'utilisateur clique sur Enregistrer ou Effacer à partir de DateTimePicker de commande.

validation

object (Validation)

<ph type="x-smartling-placeholder"> Facultatif. Spécifiez la validation requise pour ce sélecteur de date et d'heure.

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

DateTimePickerType

Le format de la date et de l'heure dans 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 voir un exemple dans les applications Google Chat, consultez Ajoutez une séparation horizontale 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": {}

Grille

Affiche une grille avec une collection d'éléments. Les éléments ne peuvent inclure que du texte ou des images. Pour les colonnes responsives, ou pour inclure plus que du texte ou des images, utilisez Columns Pour voir un exemple dans les applications Google Chat, consultez Afficher une grille contenant une collection d'éléments.

Une grille peut comporter un nombre illimité de colonnes et d'éléments. Le nombre de lignes est calculé en divisant le nombre d'éléments par le nombre de colonnes. Une grille de 10 éléments et 2 colonnes contient 5 lignes. Une grille de 11 éléments et 2 colonnes contient 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 (GridItem)
    }
  ],
  "borderStyle": {
    object (BorderStyle)
  },
  "columnCount": integer,
  "onClick": {
    object (OnClick)
  }
}
Champs
title

string

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

items[]

object (GridItem)

Éléments à afficher dans la grille.

borderStyle

object (BorderStyle)

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

columnCount

integer

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

onClick

object (OnClick)

Ce rappel est réutilisé par chaque élément individuel 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 (ImageComponent)
  },
  "title": string,
  "subtitle": string,
  "layout": enum (GridItemLayout)
}
Champs
id

string

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

image

object (ImageComponent)

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

title

string

Titre de l'élément de grille.

subtitle

string

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

layout

enum (GridItemLayout)

Mise en page à utiliser pour l'élément de 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 (ImageCropStyle)
  },
  "borderStyle": {
    object (BorderStyle)
  }
}
Champs
imageUri

string

URL de l'image.

altText

string

Libellé d'accessibilité de l'image.

cropStyle

object (ImageCropStyle)

Style de recadrage à appliquer à l'image.

borderStyle

object (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 un format 16:9:

cropStyle {
 "type": "RECTANGLE_CUSTOM",
 "aspectRatio": 16/9
}
Représentation JSON
{
  "type": enum (ImageCropType),
  "aspectRatio": number
}
Champs
type

enum (ImageCropType)

Type de recadrage.

aspectRatio

number

Le format à utiliser si le type de recadrage est RECTANGLE_CUSTOM

Par exemple, voici comment appliquer un format 16:9:

cropStyle {
 "type": "RECTANGLE_CUSTOM",
 "aspectRatio": 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. Non spécifié.
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 et la couleur de bordure.

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

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

enum (BorderType)

Type de bordure.

strokeColor

object (Color)

Les couleurs à utiliser lorsque le type est BORDER_TYPE_STROKE

cornerRadius

integer

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. Non spécifié.
NO_BORDER Valeur par défaut. Aucune bordure.
STROKE Aperçu.

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. Non spécifié.
TEXT_BELOW Le titre et le sous-titre sont affichés sous l'image de l'élément de grille.
TEXT_ABOVE Le titre et le sous-titre sont affichés au-dessus de l'image de l'élément de grille.

Colonnes

La Columns affiche jusqu'à deux colonnes dans une fiche ou une boîte de dialogue. Vous pouvez ajouter des widgets à chaque colonne ; les widgets apparaissent dans l'ordre dans lequel ils sont spécifiés. Pour voir un exemple dans les applications Google Chat, consultez Afficher les fiches 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 ont la hauteur de la première. Étant donné que chaque colonne peut contenir un nombre différent de widgets, vous ne pouvez pas définir de lignes ni aligner les widgets entre les colonnes.

Les colonnes s'affichent côte à côte. Vous pouvez personnaliser la largeur de chaque colonne à l'aide des HorizontalSizeStyle . Si la largeur de l'écran de l'utilisateur est trop étroite, la deuxième colonne passe à la ligne en dessous de la première:

  • Sur le Web, la deuxième colonne affiche un retour automatique à la ligne si la largeur de l'écran est inférieure ou égale à 480 pixels.
  • Sur les appareils iOS, la deuxième colonne renvoie une valeur si la largeur de l'écran est inférieure ou égale à 300 pt.
  • Sur les appareils Android, la deuxième colonne renvoie un message automatique si la largeur de l'écran est inférieure ou égale à 320 dp.

Pour inclure plus de deux colonnes ou utiliser des lignes, utilisez les Grid .

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

Représentation JSON
{
  "columnItems": [
    {
      object (Column)
    }
  ]
}
Champs
columnItems[]

object (Column)

Tableau de colonnes. Vous pouvez inclure jusqu'à deux colonnes dans une fiche ou une boîte de dialogue.

Colonne

Une colonne.

Modules complémentaires Google Workspace et applications Chat

Représentation JSON
{
  "horizontalSizeStyle": enum (HorizontalSizeStyle),
  "horizontalAlignment": enum (HorizontalAlignment),
  "verticalAlignment": enum (VerticalAlignment),
  "widgets": [
    {
      object (Widgets)
    }
  ]
}
Champs
horizontalSizeStyle

enum (HorizontalSizeStyle)

Spécifie la façon dont une colonne remplit la largeur de la fiche.

horizontalAlignment

enum (HorizontalAlignment)

Indique si les widgets sont alignés à gauche, à droite ou au centre d'une colonne.

verticalAlignment

enum (VerticalAlignment)

Indique si les widgets sont alignés en haut, en bas ou au centre d'une colonne.

widgets[]

object (Widgets)

Tableau de widgets inclus dans une colonne. Les widgets apparaissent dans l'ordre dans lequel ils sont spécifiés.

HorizontalSizeStyle

Spécifie la façon dont une colonne remplit la largeur de la fiche. La largeur de chaque colonne dépend HorizontalSizeStyle et la largeur des widgets dans la colonne.

Modules complémentaires Google Workspace et applications Chat

Enums
HORIZONTAL_SIZE_STYLE_UNSPECIFIED Ne pas utiliser. Non spécifié.
FILL_AVAILABLE_SPACE Valeur par défaut. La colonne remplit 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 non disponible pour les modules complémentaires Google Workspace.

Enums
HORIZONTAL_ALIGNMENT_UNSPECIFIED Ne pas utiliser. Non spécifié.
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, la valeur est alignée sur la gauche. Pour les mises en page de droite à gauche, la ligne est alignée sur la droite.
CENTER Aligne les widgets au 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 sur 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.

Modules complémentaires Google Workspace et applications Chat

Enums
VERTICAL_ALIGNMENT_UNSPECIFIED Ne pas utiliser. Non spécifié.
CENTER Valeur par défaut. Aligne les widgets au centre d'une colonne.
TOP Aligne les widgets en haut d'une colonne.
BOTTOM Aligne les widgets en bas d'une colonne.

Widgets

Widgets compatibles que vous pouvez inclure dans une colonne.

Modules complémentaires Google Workspace et applications Chat

Représentation JSON
{

  // Union field data can be only one of the following:
  "textParagraph": {
    object (TextParagraph)
  },
  "image": {
    object (Image)
  },
  "decoratedText": {
    object (DecoratedText)
  },
  "buttonList": {
    object (ButtonList)
  },
  "textInput": {
    object (TextInput)
  },
  "selectionInput": {
    object (SelectionInput)
  },
  "dateTimePicker": {
    object (DateTimePicker)
  },
  "chipList": {
    object (ChipList)
  }
  // End of list of possible types for union field data.
}
Champs

Champ d'union data

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

textParagraph

object (TextParagraph)

TextParagraph .

image

object (Image)

Image .

decoratedText

object (DecoratedText)

DecoratedText .

buttonList

object (ButtonList)

ButtonList .

textInput

object (TextInput)

TextInput .

selectionInput

object (SelectionInput)

SelectionInput .

dateTimePicker

object (DateTimePicker)

DateTimePicker .

chipList

object (ChipList)

<ph type="x-smartling-placeholder">

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

ChipList

<ph type="x-smartling-placeholder">

Liste de chips disposés horizontalement, qui peuvent défiler horizontalement ou s'étendre à la ligne suivante.

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

Représentation JSON
{
  "layout": enum (Layout),
  "chips": [
    {
      object (Chip)
    }
  ]
}
Champs
layout

enum (Layout)

Mise en page de la liste de chips spécifiée.

chips[]

object (Chip)

Tableau de chips.

Mise en page

Mise en page de la liste de chips.

Enums
LAYOUT_UNSPECIFIED Ne pas utiliser. Non spécifié.
WRAPPED Valeur par défaut. La liste de chips passe à la ligne suivante si l'espace horizontal est insuffisant.
HORIZONTAL_SCROLLABLE Les chips défilent horizontalement s'ils ne tiennent pas dans l'espace disponible.

Puce électronique

<ph type="x-smartling-placeholder">

Texte, icône ou chip de texte et d'icône sur lesquels les utilisateurs peuvent cliquer.

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

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

object (Icon)

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

label

string

Texte affiché dans le chip.

onClick

object (OnClick)

Facultatif. Action à effectuer lorsqu'un utilisateur clique sur le chip, par exemple ouvrir un lien hypertexte ou exécuter une fonction personnalisée.

enabled
(deprecated)

boolean

Indique si la puce est active et répond aux actions de l'utilisateur. La valeur par défaut est true Obsolète. Utilisez disabled à la place.

disabled

boolean

Indique si la puce est inactive et ignore les actions de l'utilisateur. La valeur par défaut est false

altText

string

Texte alternatif utilisé pour l'accessibilité.

Définissez un texte descriptif qui indique aux utilisateurs à quoi sert le chip. Par exemple, si un chip ouvre un lien hypertexte, écrivez : "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&quot;.

CollapseControl

<ph type="x-smartling-placeholder">

Représente une commande d'expansion et de repli. Disponible pour les applications Google Chat et non disponible pour les modules complémentaires Google Workspace.

Représentation JSON
{
  "horizontalAlignment": enum (HorizontalAlignment),
  "expandButton": {
    object (Button)
  },
  "collapseButton": {
    object (Button)
  }
}
Champs
horizontalAlignment

enum (HorizontalAlignment)

Alignement horizontal des boutons "Développer" et "Réduire".

expandButton

object (Button)

Facultatif. Définissez un bouton personnalisable pour développer la section. Les champs "expandButton" et "Réduire" doivent tous les deux être définis. Un seul ensemble de champs ne sera pas pris en compte. Si ce champ n'est pas défini, le bouton par défaut est utilisé.

collapseButton

object (Button)

Facultatif. Définissez un bouton personnalisable pour réduire la section. Les champs "expandButton" et "Réduire" doivent tous les deux être définis. Un seul ensemble de champs ne sera pas pris en compte. Si ce champ n'est pas défini, le bouton par défaut est utilisé.

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. Non spécifié.
SOLID_DIVIDER Option par défaut. Afficher 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 est associée à la fiche. Par exemple, une fiche de facturation peut inclure des actions telles que la suppression de la facture, l'envoi de la facture par e-mail ou l'ouverture de la facture dans un navigateur.

Disponible avec les modules complémentaires Google Workspace et non disponible dans les applications Google Chat.

Représentation JSON
{
  "actionLabel": string,
  "onClick": {
    object (OnClick)
  }
}
Champs
actionLabel

string

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

onClick

object (OnClick)

La onClick pour cette action.

CardFixedFooter

Pied de page persistant qui apparaît au bas de la carte.

Paramètre fixedFooter sans spécifier de primaryButton ou un secondaryButton provoque une erreur.

Pour les applications Chat, vous pouvez utiliser des pieds de page fixes dans dialogs, mais pas messages sous forme de fiches. Pour voir un exemple dans les applications Google Chat, consultez Ajoutez un pied de page persistant.

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

Représentation JSON
{
  "primaryButton": {
    object (Button)
  },
  "secondaryButton": {
    object (Button)
  }
}
Champs
primaryButton

object (Button)

Bouton principal du pied de page fixe. Le bouton doit être de type texte, et les couleurs et le texte doivent être définis.

secondaryButton

object (Button)

Bouton secondaire du pied de page fixe. Le bouton doit être de type texte, et les couleurs et le texte doivent être définis. Si secondaryButton est définie, vous devez également définir primaryButton

DisplayStyle

Dans les modules complémentaires Google Workspace, détermine la façon dont une carte s'affiche.

Disponible avec les modules complémentaires Google Workspace et non disponible dans les applications Google Chat.

Enums
DISPLAY_STYLE_UNSPECIFIED Ne pas utiliser. Non spécifié.
PEEK L'en-tête de la carte apparaît au bas de la barre latérale et couvre partiellement la carte supérieure actuelle de la pile. Cliquez sur l'en-tête pour faire apparaître la carte dans la pile. Si la carte n'a pas d'en-tête, un en-tête généré est utilisé à la place.
REPLACE Valeur par défaut. La carte s'affiche en remplaçant la vue de la carte supérieure dans la pile de cartes.