Texto decorado

El widget DecoratedText muestra texto con diseño opcional y funciones de funcionalidad. Por ejemplo:

  • Muestra un icon delante del texto con startIcon.
  • Muestra un título antes del texto con topLabel.
  • Agrega un botón en el que se puede hacer clic con button o un botón de activación conmutable con switchControl.

Usa el widget DecoratedText cuando necesites presentar información de una manera interactiva y fácil de consumir. El widget es perfecto para tarjetas de contacto, actualizaciones del estado de pedidos y notificaciones de tickets de trabajo.

La siguiente es una tarjeta que consta de un widget DecoratedText que se usa para mostrar detalles de contacto, como la dirección de correo electrónico, el estado en línea, el número de teléfono y el sitio web:

Dale formato al texto en un widget DecoratedText

El widget DecoratedText admite el formato HTML de texto simple. Cuando configures el contenido de texto de estos widgets, solo incluye las etiquetas HTML correspondientes. Para obtener más información sobre las etiquetas HTML compatibles, consulta Formato del texto de la tarjeta.

Representación y campos JSON

Representación 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.
}
Campos
icon
(deprecated)

object (Icon)

Se dio de baja y se reemplazó por startIcon.

startIcon

object (Icon)

El ícono que se muestra delante del texto.

topLabel

string

Es el texto que aparece sobre text. Siempre trunca.

text

string

Obligatorio. Es el texto principal.

Admite un formato simple. Para obtener más información sobre cómo dar formato al texto, consulta Da formato al texto en apps de Google Chat y Da formato al texto en complementos de Google Workspace.

wrapText

boolean

El parámetro de configuración Ajustar texto Si es true, el texto se ajusta y se muestra en varias líneas. De lo contrario, el texto se trunca.

Solo se aplica a text, no a topLabel ni bottomLabel.

bottomLabel

string

El texto que aparece debajo de text Ajustar siempre.

onClick

object (OnClick)

Esta acción se activa cuando los usuarios hacen clic en topLabel o bottomLabel.

Campo de unión control. Un botón, interruptor, casilla de verificación o imagen que aparece en el lado derecho del texto en el widget decoratedText control solo puede ser una de las siguientes opciones:
button

object (Button)

Es un botón en el que un usuario puede hacer clic para activar una acción.

switchControl

object (SwitchControl)

Es un widget de interruptor en el que un usuario puede hacer clic para cambiar su estado y activar una acción.

endIcon

object (Icon)

Un ícono que aparece después del texto.

Admite íconos integrados y personalizados.

Ícono

Un ícono que se muestra en un widget en una tarjeta. Para ver un ejemplo en las apps de Google Chat, consulta Ícono.

Admite íconos integrados y personalizados.

Representación 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.
}
Campos
altText

string

Opcional. Es una descripción del ícono que se usa con fines de accesibilidad. Si no se especifica, se proporciona el valor predeterminado Button. Como práctica recomendada, debes establecer una descripción útil de lo que muestra el ícono y, si corresponde, de lo que hace. Por ejemplo, A user's account portrait o Opens a new browser tab and navigates to the Google Chat developer documentation at https://developers.google.com/chat.

Si se establece el ícono en una Button, el altText aparece como texto auxiliar cuando el usuario coloca el cursor sobre el botón. Sin embargo, si el botón también configura text, se ignora el altText del ícono.

imageType

enum (ImageType)

El estilo de recorte aplicado a la imagen. En algunos casos, aplicar un recorte CIRCLE hace que la imagen se dibuje más grande que un ícono integrado.

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

string

Muestra uno de los íconos integrados que proporciona Google Workspace.

Por ejemplo, para mostrar un ícono de avión, especifica AIRPLANE. Para un autobús, especifica BUS.

Para obtener una lista completa de los íconos compatibles, consulta íconos integrados.

iconUrl

string

Muestra un ícono personalizado alojado en una URL HTTPS.

Por ejemplo: 

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

Entre los tipos de archivo admitidos, se incluyen .png y .jpg.

Tipo de imagen

La forma que se usa para recortar la imagen.

Enumeradores
SQUARE Valor predeterminado Aplica una máscara cuadrada a la imagen. Por ejemplo, una imagen de 4 × 3 se convierte en 3 × 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.

Al hacer clic

Representa cómo responder cuando los usuarios hacen clic en un elemento interactivo en una tarjeta, como un botón.

Representación 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.
}
Campos

Campo de unión data.

data solo puede ser una de las siguientes opciones:

action

object (Action)

Si se especifica, este onClick activa una acción.

card

object (Card)

Si se especifica, se envía una nueva tarjeta a la pila de tarjetas después de hacer clic.

Compatible con los complementos de Google Workspace, pero no con las apps de Google Chat.

Acción

Una acción que describe el comportamiento cuando se envía el formulario. Por ejemplo, puedes invocar una secuencia de comandos de Apps Script para controlar el formulario. Si se activa la acción, los valores del formulario se envían al servidor.

Representación JSON 
{
  "function": string,
  "parameters": [
    {
      object (ActionParameter)
    }
  ],
  "loadIndicator": enum (LoadIndicator),
  "persistValues": boolean,
  "interaction": enum (Interaction)
}
Campos
function

string

Es una función personalizada que se invoca cuando se hace clic en el elemento contenedor o se activa de forma manual.

Para ver ejemplos de uso, consulta Cómo crear tarjetas interactivas.

parameters[]

object (ActionParameter)

Lista de parámetros de acción.

loadIndicator

enum (LoadIndicator)

Especifica el indicador de carga que muestra la acción mientras se realiza la llamada a la acción.

persistValues

boolean

Indica si los valores del formulario persisten después de la acción. El valor predeterminado es false.

Si es true, los valores del formulario permanecen después de que se activa la acción. Para permitir que el usuario realice cambios mientras se procesa la acción, establece LoadIndicator en NONE. Para los mensajes de tarjeta en las apps de chat, también debes establecer el ResponseType de la acción en UPDATE_MESSAGE y usar el mismo cardId de la tarjeta que contenía la acción.

Si es false, los valores del formulario se borran cuando se activa la acción. Para evitar que el usuario haga cambios mientras se procesa la acción, establece LoadIndicator en SPINNER.

interaction

enum (Interaction)

Opcional. Es 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 un botón en un mensaje de tarjeta.

Si no se especifica, la app responde ejecutando un action, como abrir un vínculo o ejecutar una función, de manera normal.

Cuando se especifica un interaction, la app puede responder de maneras interactivas especiales. Por ejemplo, si configuras interaction en OPEN_DIALOG, la app podrá abrir un diálogo. Si se especifica, no se muestra un indicador de carga.

Compatible con las apps de Chat, pero no 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.

Botón

Es un texto, un ícono o un botón de texto y ícono en el que los usuarios pueden hacer clic. Para ver un ejemplo en las apps de Google Chat, consulta la Lista de botones.

Para convertir una imagen en un botón en el que se pueda hacer clic, especifica un Image (no un ImageComponent) y configura una acción onClick.

Representación JSON 
{
  "text": string,
  "icon": {
    object (Icon)
  },
  "color": {
    object (Color)
  },
  "onClick": {
    object (OnClick)
  },
  "disabled": boolean,
  "altText": string
}
Campos
text

string

Es el texto que se muestra dentro del botón.

icon

object (Icon)

Imagen del ícono Si se configuran icon y text, el ícono aparece antes del texto.

color

object (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 el resultado sea un texto blanco.

Si no la estableces, el fondo de la imagen será blanco y el color de la fuente será azul.

Para el rojo, el verde y el azul, el valor de cada campo es un número float que se puede expresar de dos maneras: como un número entre 0 y 255 dividido por 255 (153/255), o como un valor entre 0 y 1 (0.6). 0 representa la ausencia de un color y 1 o 255/255 representan la presencia total de ese color en la escala RGB.

De manera opcional, configura alpha, que establece un nivel de transparencia con esta ecuación: 

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

Para alpha, un valor de 1 corresponde a un color sólido, y un valor de 0 corresponde a un color completamente transparente.

Por ejemplo, el siguiente color representa un rojo transparente medio: 

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

object (OnClick)

Obligatorio. Es la acción que se realiza cuando un usuario hace clic en el botón, como abrir un hipervínculo o ejecutar una función personalizada.

disabled

boolean

Si es true, el botón se muestra en un estado inactivo y no responde a las acciones del usuario.

altText

string

Texto alternativo que se utiliza para la accesibilidad.

Establece un texto descriptivo que informe a los usuarios lo que 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”.

SwitchControl

Un interruptor de estilo de activación o una casilla de verificación dentro de un widget decoratedText

Solo se admite en el widget decoratedText.

Representación JSON 
{
  "name": string,
  "value": string,
  "selected": boolean,
  "onChangeAction": {
    object (Action)
  },
  "controlType": enum (ControlType)
}
Campos
name

string

El nombre con el que se identifica el widget de interruptor en un evento de entrada de formulario.

Para obtener más información sobre cómo trabajar con entradas de formularios, consulta Recibe datos de formularios.

value

string

Es el valor ingresado por un usuario, que se muestra como parte de un evento de entrada de un formulario.

Para obtener más información sobre cómo trabajar con entradas de formularios, consulta Recibe datos de formularios.

selected

boolean

Cuando es true, se selecciona el interruptor.

onChangeAction

object (Action)

La acción que se realiza cuando cambia el estado del interruptor, por ejemplo, qué función se debe ejecutar.

controlType

enum (ControlType)

Cómo aparece el interruptor en la interfaz de usuario

Solución de problemas

Cuando una app de Google Chat o una tarjeta muestran un error, la interfaz de Chat muestra un mensaje que dice “Se produjo un error” o “No se pudo procesar la solicitud”. A veces, la IU de Chat no muestra ningún mensaje de error, pero la app o tarjeta de Chat producen un resultado inesperado; por ejemplo, es posible que no aparezca un mensaje de tarjeta.

Aunque es posible que no se muestre un mensaje de error en la IU de Chat, hay mensajes de error descriptivos y datos de registro disponibles para ayudarte a corregir errores cuando se activa el registro de errores para apps de chat. Si necesitas ayuda para ver, depurar y corregir errores, consulta Cómo solucionar problemas de Google Chat.