Cette page explique comment ajouter des widgets et des éléments d'interface utilisateur à des fiches ou des messages de boîte de dialogue. afin que les utilisateurs puissent interagir avec votre application Google Chat cliquer sur un bouton ou soumettre des informations.
Utilisez le générateur de cartes pour concevoir et prévisualiser des messages de cartes JSON pour les applications Chat:
Ouvrir Card BuilderPrérequis
Ajouter un bouton
La
Widget ButtonList
affiche un ensemble de boutons. Les boutons peuvent afficher du texte, un
une icône, ou les deux
texte et une icône. Chaque
Button
prend en charge un
Action OnClick
qui se produit lorsque les
utilisateurs cliquent sur le bouton. Exemple :
- Ouvrir un lien hypertexte avec
OpenLink, afin de fournir des informations supplémentaires aux utilisateurs. - Lancez une
actionqui exécute une fonction personnalisée, comme appeler une API.
Pour des raisons d'accessibilité, les boutons acceptent un texte alternatif.
Ajouter un bouton qui exécute une fonction personnalisée
Voici une fiche composée d'un widget ButtonList avec deux boutons.
Un bouton permet d'ouvrir la documentation Google Chat pour les développeurs dans un nouvel onglet. La
L'autre bouton exécute une fonction personnalisée appelée goToView() et transmet la
Paramètre viewType="BIRD EYE VIEW".
Ajoutez un bouton avec une couleur personnalisée et un bouton désactivé
Vous pouvez empêcher les utilisateurs de cliquer sur un bouton en définissant "disabled": "true".
Vous trouverez ci-dessous une fiche composée d'un widget ButtonList avec deux
. L'un des boutons utilise
Champ Color
pour personnaliser l'arrière-plan du bouton
couleur. L'autre bouton est désactivé avec le champ Disabled, qui
empêche l'utilisateur de cliquer sur le bouton et d'exécuter la fonction.
Ajouter un bouton avec une icône
Vous trouverez ci-dessous une fiche composée d'un widget ButtonList avec deux icônes.
Widgets Button. L'un des boutons utilise
knownIcon
pour afficher l'icône d'e-mail intégrée à Google Chat. L'autre bouton utilise
le champ iconUrl pour afficher un
widget d'icône personnalisée.
Ajouter un bouton avec une icône et du texte
Vous trouverez ci-dessous une fiche composée d'un widget ButtonList qui invite
à l'utilisateur d'envoyer un e-mail. Le premier bouton affiche une icône d'e-mail et
le deuxième bouton affiche du texte. L'utilisateur peut cliquer sur l'icône ou le texte
pour exécuter la fonction sendEmail.
Ajouter des éléments d'interface utilisateur sélectionnables
Le widget SelectionInput
propose un ensemble d'éléments sélectionnables, tels que des cases à cocher, des cases d'option, des commutateurs
ou un menu déroulant. Vous pouvez utiliser ce widget
pour collecter des données définies et standardisées auprès des utilisateurs. Pour collecter des données non définies
des utilisateurs, utilisez plutôt le widget TextInput.
Le widget SelectionInput prend en charge les suggestions, qui aident les utilisateurs à saisir des variables uniformes
les données et les actions lors d'une modification, qui sont
Actions
qui s'exécutent lorsqu'une modification se produit dans un champ de saisie de sélection, comme dans le cas d'un
en sélectionnant ou en
désélectionnant un élément.
Les applications de chat peuvent recevoir et traiter la valeur des éléments sélectionnés. Pour en savoir plus sur l'utilisation des entrées de formulaire, consultez Traiter les informations saisies par les utilisateurs.
Cette section fournit des exemples de cartes qui utilisent le widget SelectionInput.
Les exemples utilisent différents types d'entrées de section:
Ajouter une case à cocher
La boîte de dialogue suivante affiche l'invitation à indiquer si une
contact est professionnel, personnel ou les deux, à l'aide d'un widget SelectionInput qui
utilise des cases à cocher:
Ajouter une case d'option
La boîte de dialogue suivante affiche l'invitation à indiquer si une
contact est professionnel ou personnel avec un widget SelectionInput qui utilise
cases d'option:
Ajouter un bouton bascule
La boîte de dialogue suivante affiche l'invitation à indiquer si une
contact est professionnel, personnel ou les deux grâce à un widget SelectionInput qui
utilise des commutateurs:
Ajouter un menu déroulant
La boîte de dialogue suivante affiche l'invitation à indiquer si une
contact est professionnel ou personnel avec un widget SelectionInput qui utilise
un menu déroulant:
Ajouter un menu multi-sélection
Une boîte de dialogue invitant l'utilisateur à sélectionner des contacts s'affiche. dans un menu multi-sélection:
Utiliser des sources de données pour les menus à sélection multiple
La section suivante explique comment utiliser des menus à sélection multiple pour renseigner des données à partir de sources dynamiques, telles qu'une application Google Workspace ou des données externes ; source.
Sources de données de Google Workspace
Vous pouvez insérer des éléments pour un menu multi-sélection à partir des sources de données suivantes dans Google Workspace:
- Utilisateurs de Google Workspace: vous ne pouvez renseigner que les utilisateurs du domaine même organisation Google Workspace.
- Espaces Chat: utilisateur saisissant des éléments dans la sélection multiple peuvent uniquement afficher et sélectionner les espaces auxquels ils appartiennent dans leur organisation Google Workspace.
Pour utiliser les sources de données Google Workspace, vous devez spécifier le
platformDataSource
. Contrairement aux autres types d'entrée de sélection, vous omettez
SectionItem
car ces éléments de sélection sont extraits de manière dynamique
Google Workspace.
Le code suivant montre un menu multi-sélection d'utilisateurs Google Workspace.
Pour renseigner les utilisateurs, l'entrée de sélection définit commonDataSource sur USER:
JSON
{
"selectionInput": {
"name": "contacts",
"type": "MULTI_SELECT",
"label": "Selected contacts",
"multiSelectMaxSelectedItems": 5,
"multiSelectMinQueryLength": 1,
"platformDataSource": {
"commonDataSource": "USER"
}
}
}
Le code suivant montre un menu multi-sélection de Chat
des espaces. Pour remplir les espaces, la sélection spécifie la
hostAppDataSource. Le menu multi-sélection définit également
defaultToCurrentSpace sur true, ce qui fait de l'espace actuel l'espace par défaut
sélection dans le menu:
JSON
{
"selectionInput": {
"name": "spaces",
"type": "MULTI_SELECT",
"label": "Selected contacts",
"multiSelectMaxSelectedItems": 3,
"multiSelectMinQueryLength": 1,
"platformDataSource": {
"hostAppDataSource": {
"chatDataSource": {
"spaceDataSource": {
"defaultToCurrentSpace": true
}
}
}
}
}
}
Sources de données extérieures à Google Workspace
Les menus à sélection multiple peuvent également remplir des éléments à partir de données tierces ou externes source. Par exemple, vous pouvez utiliser des menus à sélection multiple pour aider l'utilisateur à effectuer une sélection Liste des prospects commerciaux à partir d'un système de gestion de la relation client (CRM)
Pour utiliser une source de données externe, utilisez le champ externalDataSource pour :
Spécifiez une fonction qui renvoie des éléments à partir de la source de données.
Pour limiter le nombre de requêtes adressées à une source de données externe, vous pouvez inclure
Suggestions d'éléments qui s'affichent dans le menu multi-sélection avant que les utilisateurs ne saisissent
le menu. Vous pouvez, par exemple, insérer les contacts recherchés récemment pour le
utilisateur. Pour insérer les éléments suggérés à partir d'une source de données externe, spécifiez
SelectionItem
d'objets.
Le code suivant montre un menu multi-sélection d'éléments d'une
ensemble externe de contacts pour l'utilisateur. Le menu affiche un contact par défaut
et exécute la fonction getContacts pour récupérer et remplir les éléments
source de données externe:
JSON
{
"selectionInput": {
"name": "contacts",
"type": "MULTI_SELECT",
"label": "Selected contacts",
"multiSelectMaxSelectedItems": 5,
"multiSelectMinQueryLength": 2,
"externalDataSource": {
"function": "getContacts"
},
"items": [
{
"text": "Contact 3",
"value": "contact-3",
"startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
"bottomText": "Contact three description",
"selected": false
}
]
}
}
Pour les sources de données externes, vous pouvez aussi utiliser la saisie semi-automatique pour les éléments que les utilisateurs lancent
dans le menu multi-sélection. Par exemple, si un utilisateur commence à saisir Atl pour une
qui affiche les villes des États-Unis, votre
L'application de chat peut suggérer automatiquement Atlanta avant l'utilisateur
termine la saisie. Vous pouvez saisir semi-automatiquement jusqu'à 100 éléments.
Pour saisir semi-automatiquement des éléments, vous créez une fonction qui interroge les données externes source et renvoie des éléments chaque fois qu'un utilisateur effectue une saisie dans le menu multi-sélection. La doit effectuer les opérations suivantes:
- Transmettez un objet d'événement qui représente l'interaction de l'utilisateur avec le menu.
- Identifiez que l'événement d'interaction
invokedFunctionvaleur correspond à la fonction du champexternalDataSource. - Lorsque les fonctions correspondent, renvoyer des éléments suggérés à partir des données externes
source. Pour suggérer des éléments en fonction des types de données saisis par l'utilisateur, obtenez la valeur de l'attribut
Clé
autocomplete_widget_query. Cette valeur représente ce que l'utilisateur saisit dans le menu.
Le code suivant permet d'effectuer une saisie semi-automatique pour les éléments d'une ressource de données externe. Avec les
l'exemple précédent, l'application Chat suggère des éléments en fonction
Lorsque la fonction getContacts est déclenchée:
Apps Script ;
Node.js
Ajouter un champ dans lequel un utilisateur peut saisir du texte
Le widget TextInput
fournit un champ dans lequel les utilisateurs peuvent saisir du texte. La
le widget prend en charge les suggestions, qui aident les utilisateurs à saisir des données uniformes, et lors des modifications
actions, qui sont
Actions
qui s'exécutent lorsqu'une modification est apportée au champ de saisie de texte, par exemple lorsqu'un utilisateur ajoute ou
supprimer du texte.
Lorsque vous devez collecter des données abstraites ou inconnues auprès des utilisateurs, utilisez ce
Widget TextInput. Pour collecter des données définies auprès des utilisateurs, utilisez le
SelectionInput
.
Pour traiter le texte saisi par les utilisateurs, consultez Traiter les informations saisies par les utilisateurs.
Voici une fiche composée d'un widget TextInput:
Permettre à l'utilisateur de choisir une date et une heure
La
Widget DateTimePicker
permet aux utilisateurs de saisir une date, une heure ou les deux
à la fois. Les utilisateurs peuvent également 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 invite les utilisateurs à saisir
les informations correctement.
Pour traiter les valeurs de date et d'heure saisies par les utilisateurs, consultez Traiter les informations saisies par les utilisateurs.
Vous trouverez ci-dessous une fiche comportant trois types différents
Widgets DateTimePicker:
Valider les données saisies dans les fiches
Cette page explique comment valider les données saisies dans le action d'une carte
et les widgets.
Par exemple, vous pouvez vérifier qu'un champ de saisie de texte contient du texte saisi par la
ou qu'elle contient un certain nombre de caractères.
Définir les widgets requis pour les actions
Dans le cadre du action de la carte,
ajouter les noms des widgets dont une action a besoin à sa liste requiredWidgets.
Si l'un des widgets listés ici n'a pas de valeur lorsque cette action est appelée, l'envoi de l'action du formulaire est annulé.
Lorsque "all_widgets_are_required": "true" est défini pour une action, tous les widgets
dans la fiche sont requis pour cette action.
Définir une action all_widgets_are_required en mode multi-sélection
JSON
{
"sections": [
{
"header": "Select contacts",
"widgets": [
{
"selectionInput": {
"type": "MULTI_SELECT",
"label": "Selected contacts",
"name": "contacts",
"multiSelectMaxSelectedItems": 3,
"multiSelectMinQueryLength": 1,
"onChangeAction": {
"all_widgets_are_required": true
},
"items": [
{
"value": "contact-1",
"startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
"text": "Contact 1",
"bottomText": "Contact one description",
"selected": false
},
{
"value": "contact-2",
"startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
"text": "Contact 2",
"bottomText": "Contact two description",
"selected": false
},
{
"value": "contact-3",
"startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
"text": "Contact 3",
"bottomText": "Contact three description",
"selected": false
},
{
"value": "contact-4",
"startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
"text": "Contact 4",
"bottomText": "Contact four description",
"selected": false
},
{
"value": "contact-5",
"startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
"text": "Contact 5",
"bottomText": "Contact five description",
"selected": false
}
]
}
}
]
}
]
}
Définir une action all_widgets_are_required dans dateTimePicker
JSON
{
"sections": [
{
"widgets": [
{
"textParagraph": {
"text": "A datetime picker widget with both date and time:"
}
},
{
"divider": {}
},
{
"dateTimePicker": {
"name": "date_time_picker_date_and_time",
"label": "meeting",
"type": "DATE_AND_TIME"
}
},
{
"textParagraph": {
"text": "A datetime picker widget with just date:"
}
},
{
"divider": {}
},
{
"dateTimePicker": {
"name": "date_time_picker_date_only",
"label": "Choose a date",
"type": "DATE_ONLY",
"onChangeAction":{
"all_widgets_are_required": true
}
}
},
{
"textParagraph": {
"text": "A datetime picker widget with just time:"
}
},
{
"divider": {}
},
{
"dateTimePicker": {
"name": "date_time_picker_time_only",
"label": "Select a time",
"type": "TIME_ONLY"
}
}
]
}
]
}
Définissez une action all_widgets_are_required dans le menu déroulant
JSON
{
"sections": [
{
"header": "Section Header",
"collapsible": true,
"uncollapsibleWidgetsCount": 1,
"widgets": [
{
"selectionInput": {
"name": "location",
"label": "Select Color",
"type": "DROPDOWN",
"onChangeAction": {
"all_widgets_are_required": true
},
"items": [
{
"text": "Red",
"value": "red",
"selected": false
},
{
"text": "Green",
"value": "green",
"selected": false
},
{
"text": "White",
"value": "white",
"selected": false
},
{
"text": "Blue",
"value": "blue",
"selected": false
},
{
"text": "Black",
"value": "black",
"selected": false
}
]
}
}
]
}
]
}
Définir la validation d'un widget de saisie de texte
Dans la textInput
de validation du widget, il peut spécifier le nombre maximal de caractères et le type d'entrée pour
ce widget de saisie de texte.
Définir une limite de caractères pour un widget de saisie de texte
JSON
{
"sections": [
{
"header": "Tell us about yourself",
"collapsible": true,
"uncollapsibleWidgetsCount": 2,
"widgets": [
{
"textInput": {
"name": "favoriteColor",
"label": "Favorite color",
"type": "SINGLE_LINE",
"validation": {"character_limit":15},
"onChangeAction":{
"all_widgets_are_required": true
}
}
}
]
}
]
}
Définir le type d'entrée pour un widget de saisie de texte
JSON
{
"sections": [
{
"header": "Validate text inputs by input types",
"collapsible": true,
"uncollapsibleWidgetsCount": 2,
"widgets": [
{
"textInput": {
"name": "mailing_address",
"label": "Please enter a valid email address",
"type": "SINGLE_LINE",
"validation": {
"input_type": "EMAIL"
},
"onChangeAction": {
"all_widgets_are_required": true
}
}
},
{
"textInput": {
"name": "validate_integer",
"label": "Please enter a number",
"type": "SINGLE_LINE",
"validation": {
"input_type": "INTEGER"
}
}
},
{
"textInput": {
"name": "validate_float",
"label": "Please enter a number with a decimal",
"type": "SINGLE_LINE",
"validation": {
"input_type": "FLOAT"
}
}
}
]
}
]
}
Résoudre les problèmes
Lorsqu'une application ou card renvoie une erreur, la L'interface Chat affiche le message "Une erreur s'est produite". ou "Impossible de traiter votre demande." Parfois, l'interface utilisateur de Chat n'affiche aucun message d'erreur, mais que l'application ou la carte produit un résultat inattendu. Par exemple, un message de fiche peut ne pas s'affichent.
Même s'il est possible qu'aucun message d'erreur ne s'affiche dans l'interface utilisateur de Chat, Des messages d'erreur descriptifs et des données de journaux sont disponibles pour vous aider à corriger les erreurs. Lorsque la journalisation des erreurs est activée pour les applications Chat. Pour obtenir de l'aide, le débogage et la correction des erreurs, consultez Résoudre les problèmes liés à Google Chat