El widget DecoratedText
muestra texto con funciones de diseño y funcionalidad opcionales. Por ejemplo:
- Muestra un
icon
delante del texto constartIcon
. - Muestra un título antes del texto con
topLabel
. - Agrega un botón en el que se pueda hacer clic con
button
o un botón que se pueda cambiar conswitchControl
.
Usa el widget DecoratedText
cuando necesites presentar información de manera interactiva y fácil de consumir. El widget es perfecto para tarjetas de contacto, actualizaciones de estado de pedidos y notificaciones de tickets de trabajo.
Ejemplo: tarjeta de contacto
La siguiente imagen muestra una tarjeta que consta de un widget de DecoratedText
que se usa para mostrar los detalles de contacto, como la dirección de correo electrónico, el estado de conexión, el número de teléfono y el sitio web.

Este es el JSON de la tarjeta:
JSON
{
"cardsV2": [
{
"cardId": "exampleCard",
"card": {
"sections": [
{
"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",
}
},
{
"decoratedText": {
"startIcon": {
"knownIcon": "STAR",
},
"text": "<a href=\"https://developers.google.com/chat\">
Google Chat Developer Documentation</a>",
}
}
]
}
]
}
}
]
}
Aplica formato al texto de un widget DecoratedText
El widget DecoratedText
admite formato HTML de texto simple. Cuando configures el contenido de texto de estos widgets, solo debes incluir las etiquetas HTML correspondientes. Se admiten los siguientes formatos:
Formato | Ejemplo | Resultado procesado |
---|---|---|
Negrita | <b>test</b> |
test |
Cursiva | <i>test</i> |
test |
Subrayado | <u>test</u> |
test |
Tachado | <s>test</s> |
|
Color de la fuente | <font color="#ea9999">test</font> |
test |
Hipervínculo | <a href="https://www.google.com">google</a> |
|
Hora | <time>2020-02-16 15:00</time> |
2020-02-16 15:00 |
Nueva línea | test <br> test |
prueba prueba |
Campos y representación JSON DecoratedText
Representación JSON |
---|
{ "icon": { object ( |
Campos | |
---|---|
icon
|
Dejó de estar disponible y se reemplazó por |
startIcon
|
El ícono que se muestra delante del texto. |
topLabel
|
El texto que aparece arriba de Admite formatos simples. Consulta Formato de texto para obtener detalles sobre el formato. |
text
|
Obligatorio. El texto principal. Admite formatos simples. Consulta Formato de texto para obtener detalles sobre el formato. |
wrapText
|
La configuración de ajuste de texto. Si es
Solo se aplica a
|
bottomLabel
|
El texto que aparece debajo de Admite formatos simples. Consulta Formato de texto para obtener detalles sobre el formato. |
onClick
|
Cuando los usuarios hacen clic en |
Campo de unión
control
Un botón, interruptor, casilla de verificación o imagen que aparece a la derecha del texto en el widget
decoratedText
.
control
solo puede ser una de las siguientes opciones:
|
|
button
|
Un botón en el que se puede hacer clic para activar una acción. |
switchControl
|
Se puede hacer clic en un widget de cambio para cambiar su estado y activar una acción. Actualmente se admite en diálogos . Pronto estará disponible la compatibilidad con los mensajes de tarjeta. |
endIcon
|
Un ícono que se muestra después del texto. Admite íconos estándar y personalizados . |
Campos y representación JSON Button
Representación JSON |
---|
{ "text": string, "icon": { object ( |
Campos | |
---|---|
text
|
El texto que se muestra dentro del botón. |
icon
|
Imagen del ícono. Si se configuran |
color
|
Si se configura, el botón se rellena con un color de fondo sólido y el color de la fuente cambia para mantener el contraste con el color de fondo. Por ejemplo, si estableces un fondo azul, es probable que se muestre texto blanco. Si no estableces la política, el fondo de la imagen es blanco y el color de la fuente es azul.
Para rojo, verde y azul, el valor de cada campo es un número Opcionalmente, establece alfa, que establece un nivel de transparencia usando esta ecuación:
Para el alfa, un valor de 1 corresponde a un color sólido, y un valor de 0 a un color completamente transparente. Por ejemplo, el siguiente color representa un rojo semitransparente:
|
onClick
|
Obligatorio. La acción que se realiza cuando se hace clic en el botón, como abrir un hipervínculo o ejecutar una función personalizada. |
disabled
|
Si es |
altText
|
El texto alternativo utilizado para la accesibilidad. Establecer texto descriptivo que permita a los usuarios saber qué hace el botón. Por ejemplo, si un botón abre un hipervínculo, puedes escribir lo siguiente: "Abre una nueva pestaña del navegador y navega a la documentación para desarrolladores de Google Chat en https://developers.google.com/chat". |
Icon
Un ícono que se muestra en un widget de una tarjeta.
Admite íconos estándar y personalizados .
Representación JSON |
---|
{ "altText": string, "imageType": enum ( |
Campos | |
---|---|
altText
|
Opcional. Es una descripción del ícono que se usa para la accesibilidad. Si no se especifica, se proporciona el valor predeterminado "Button". Como práctica recomendada, debes establecer una descripción útil sobre lo que muestra el ícono y, si corresponde, lo que hace. Por ejemplo,
Si el ícono se configura en un objeto |
imageType
|
El estilo de recorte aplicado a la imagen. En algunos casos, aplicar un recorte de |
Campo de unión
icons
El ícono que se muestra en el widget de la tarjeta.
icons
solo puede ser una de las siguientes opciones:
|
|
knownIcon
|
Muestra uno de los íconos estándar que proporciona Google Workspace.
Por ejemplo, para mostrar un ícono de avión, especifica Para obtener una lista completa de los íconos compatibles, consulta íconos estándar. |
iconUrl
|
Mostrar un ícono personalizado alojado en una URL HTTPS. Por ejemplo:
Los tipos de archivo admitidos incluyen
|
ImageType
La forma que se utiliza para recortar la imagen.
Enumeradores | |
---|---|
SQUARE
|
Valor predeterminado Aplica una máscara cuadrada a la imagen. Por ejemplo, una imagen de 4 x 3 se convierte en 3 x 3. |
CIRCLE
|
Aplica una máscara circular a la imagen. Por ejemplo, una imagen de 4 x 3 se convierte en un círculo con un diámetro de 3. |
Onclick
Representa cómo responder cuando los usuarios hacen clic en un elemento interactivo de una tarjeta, como un botón.
Representación JSON |
---|
{ // Union field |
Campos | |
---|---|
Campo de unión
|
|
action
|
Si se especifica, |
openLink
|
Si se especifica, este |
openDynamicLinkAction
|
Un complemento activa esta acción cuando la acción necesita abrir un vínculo. Se diferencia del |
card
|
Se envía una tarjeta nueva a la pila después de hacer clic si se la especifica. Compatible con los complementos de Google Workspace, pero no con las apps de Chat. |
Action
Es una acción que describe el comportamiento cuando se envía el formulario. Por ejemplo, se puede invocar una secuencia de comandos de Apps Script para manejar el formulario.
Representación JSON |
---|
{ "function": string, "parameters": [ { object ( |
Campos | |
---|---|
function
|
Una función personalizada que se invoca cuando se hace clic en el elemento contenedor o cuando se activa de lo contrario. Por ejemplo, consulta Cómo crear tarjetas interactivas. |
parameters[]
|
Lista de parámetros de acción. |
loadIndicator
|
Especifica el indicador de carga que muestra la acción mientras se realiza la llamada a la acción. |
persistValues
|
Indica si los valores del formulario persisten después de la acción. El valor predeterminado es
Si es
Si es No es compatible con apps de chat. |
interaction
|
Opcional. Obligatorio cuando se abre un diálogo. Qué hacer en respuesta a una interacción con un usuario, como cuando un usuario hace clic en el botón de un mensaje de tarjeta.
Si no se especifica, la app responde mediante la ejecución de un
Cuando se especifica un Cuando se especifica, no se muestra un indicador de carga. Compatible con apps de chat, pero no con complementos de Google Workspace. Si se especifica para un complemento, se quita toda la tarjeta y no se muestra nada en el cliente. |
ActionParameter
Lista de los parámetros de string que se deben proporcionar cuando se invoca el método de acción. Por ejemplo, considere tres botones para posponer: posponer ahora, posponer 1 día y posponer la próxima semana. Puede utilizar el método de acción = posponer{/0}, pasar el tipo de posposición y el tiempo de posposición en la lista de parámetros de cadena.
Para obtener más información, consulta CommonEventObject.
Representación JSON |
---|
{ "key": string, "value": string } |
Campos | |
---|---|
key
|
El nombre del parámetro para la secuencia de comandos de la acción. |
value
|
El valor del parámetro. |
LoadIndicator
Especifica el indicador de carga que muestra la acción mientras se realiza la llamada a la acción.
Enumeradores | |
---|---|
SPINNER
|
Muestra un ícono giratorio para indicar que se está cargando el contenido. |
NONE
|
No se muestra nada. |
Interaction
Opcional. Obligatorio cuando se abre un diálogo.
Qué hacer en respuesta a una interacción con un usuario, como cuando un usuario hace clic en el botón de un mensaje de tarjeta.
Si no se especifica, la app responde mediante la ejecución de un
action
, como abrir un vínculo o ejecutar una función, con normalidad.
Cuando se especifica un
interaction
, la app puede responder de formas interactivas especiales. Por ejemplo, si estableces
interaction
en
OPEN_DIALOG
, la app podrá abrir un diálogo.
Cuando se especifica, no se muestra un indicador de carga.
Compatible con apps de chat, pero no con complementos de Google Workspace. Si se especifica para un complemento, se quita toda la tarjeta y no se muestra nada en el cliente.
Enumeradores | |
---|---|
INTERACTION_UNSPECIFIED
|
Valor predeterminado
action
se ejecuta con normalidad.
|
OPEN_DIALOG
|
Abre un diálogo, una interfaz basada en una ventana basada en tarjetas que las apps de chat usan para interactuar con los usuarios. Solo son compatibles con las apps de Chat en respuesta a clics de botones en mensajes de tarjetas. No es compatible con los complementos de Google Workspace. Si se especifica para un complemento, se quita toda la tarjeta y no se muestra nada en el cliente. |
OpenLink
Representa un evento
onClick
que abre un hipervínculo.
Representación JSON |
---|
{ "url": string, "openAs": enum ( |
Campos | |
---|---|
url
|
La URL que se abrirá. |
openAs
|
Cómo abrir un vínculo No es compatible con apps de chat. |
onClose
|
Indica si el cliente olvida un vínculo después de abrirlo o lo observa hasta que se cierra la ventana. No es compatible con apps de chat. |