Texte décoré

Le widget DecoratedText affiche du texte avec des fonctionnalités de mise en page et de fonctionnalités facultatives. Exemple :

  • Affichez un icon devant le texte avec startIcon.
  • Affichez un titre avant le texte avec topLabel.
  • Ajoutez un bouton cliquable avec button ou un bouton bascule commutable avec switchControl.


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

Ouvrez l'outil de création de cartes

Utilisez le widget DecoratedText lorsque vous devez présenter des informations de manière simple et interactive. Le widget est idéal pour afficher les fiches de contact, les mises à jour de l'état des commandes et les notifications de tickets de travail.

La fiche suivante est constituée d'un widget DecoratedText permettant d'afficher des coordonnées telles que l'adresse e-mail, l'état de connexion, le numéro de téléphone et le site Web:

Mettre en forme le texte d'un widget DecoratedText

Le widget DecoratedText accepte la mise en forme HTML de texte simple. Lorsque vous définissez le contenu textuel de ces widgets, incluez simplement les balises HTML correspondantes. Pour en savoir plus sur les balises HTML acceptées, consultez la section Mise en forme du texte des fiches.

Représentation et champs JSON

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

Texte affiché au-dessus de text. Supprime toujours la lecture.

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

wrapText

boolean

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

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

bottomLabel

string

Texte qui s'affiche sous text. Encapsule toujours.

onClick

object (OnClick)

Cette action est déclenchée lorsque l'utilisateur clique sur topLabel ou bottomLabel.

Champ d'union control. Bouton, commutateur, case à cocher ou image qui s'affiche à droite du texte dans le widget decoratedText. control ne peut être que l'un des éléments suivants:
button

object (Button)

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

switchControl

object (SwitchControl)

Widget de commutateur sur lequel un utilisateur peut cliquer pour modifier son état et déclencher une action.

endIcon

object (Icon)

Icône affichée après le texte

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

Icône

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

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

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

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

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

string

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

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

imageType

enum (ImageType)

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

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

string

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

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

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

iconUrl

string

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

Exemple :

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

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

ImageType

Forme utilisée pour recadrer l'image.

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

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

OnClick

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

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

Représentation JSON
{

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

Champ d'union data.

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

action

object (Action)

Si cette valeur est spécifiée, une action est déclenchée par ce onClick.

card

object (Card)

Une nouvelle carte est insérée dans la pile de cartes après un clic, si spécifié.

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

Action

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

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

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

string

Fonction personnalisée à invoquer lorsque l'utilisateur clique sur l'élément conteneur ou est activé en continu.

Pour obtenir un exemple d'utilisation, consultez la section Créer des fiches interactives.

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 la valeur est true, les valeurs du formulaire restent après le déclenchement de l'action. Pour permettre à l'utilisateur d'effectuer des modifications pendant le traitement de l'action, définissez LoadIndicator sur NONE. Pour les messages sous forme de fiches dans les applications Chat, vous devez également définir ResponseType de l'action sur UPDATE_MESSAGE et utiliser le même cardId que celui figurant sur la fiche contenant l'action.

Si la valeur est 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 sur SPINNER.

interaction

enum (Interaction)

Facultatif. Obligatoire lors de l'ouverture d'une boîte de dialogue.

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

Si aucune valeur n'est spécifiée, l'application répond en exécutant normalement un action (comme l'ouverture d'un lien ou l'exécution d'une fonction).

Si vous spécifiez un interaction, l'application peut répondre de manière interactive spéciale. Par exemple, en définissant interaction sur OPEN_DIALOG, l'application peut ouvrir une boîte de dialogue. Si cet indicateur est spécifié, aucun indicateur de chargement ne s'affiche. Si elle est spécifiée pour un module complémentaire, la fiche entière est supprimée et rien n'est affiché dans le client.

Applications Google Chat :

Bouton

Texte, icône, ou texte et bouton d'icône sur lesquels les utilisateurs peuvent cliquer. Pour obtenir un exemple dans les applications Google Chat, consultez Liste des boutons.

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

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
}
Champs
text

string

Texte affiché dans le bouton.

icon

object (Icon)

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

color

object (Color)

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

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

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

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

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

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

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

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

object (OnClick)

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

disabled

boolean

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

altText

string

Texte alternatif utilisé pour l'accessibilité.

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

SwitchControl

Bouton bascule ou case à cocher dans un widget decoratedText.

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

Uniquement disponible dans le widget decoratedText.

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

string

Nom par lequel le widget de commutateur est identifié dans un événement de saisie de formulaire.

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

value

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 des données de formulaire.

selected

boolean

Lorsque true, le commutateur est sélectionné.

onChangeAction

object (Action)

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

controlType

enum (ControlType)

Affichage du bouton dans l'interface utilisateur.

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

Dépannage

Lorsqu'une application ou une fiche Google Chat renvoie une erreur, l'interface Chat affiche un message indiquant "Un problème est survenu" ou "Impossible de traiter votre demande". Il peut arriver que l'interface Chat n'affiche aucun message d'erreur, mais que l'application ou la fiche Chat génère un résultat inattendu. Par exemple, il est possible qu'un message de fiche ne s'affiche pas.

Bien qu'aucun message d'erreur ne s'affiche dans l'interface Chat, des messages d'erreur descriptifs et des données de journal sont disponibles pour vous aider à corriger les erreurs lorsque la journalisation des erreurs est activée pour les applications Chat. Si vous avez besoin d'aide pour afficher, déboguer et corriger les erreurs, consultez Résoudre les erreurs Google Chat.