Texto adornado

El widget DecoratedText muestra texto con funciones de diseño y funcionalidad opcionales. 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 pueda hacer clic con button o un botón que se pueda cambiar con switchControl.

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.

Figura 1: Mensaje de una tarjeta en Google Chat que representa un widget de "DecoratedText".

Este es el JSON de la tarjeta:

JSON

{
  "cardsV2": [
    {
      "cardId": "exampleCard",
      "card": {
        "sections": [
          {
            "widgets": [
              {
                "decoratedText": {
                  "startIcon": {
                    "knownIcon": "EMAIL",
                  },
                  "text": "[e-mail]",
                }
              },
              {
                "decoratedText": {
                  "startIcon": {
                    "knownIcon": "PERSON",
                  },
                  "text": "<font color=\"#80e27e\">Online</font>",
                },
              },
              {
                "decoratedText": {
                  "startIcon": {
                    "knownIcon": "PHONE",
                  },
                  "text": "[phone]",
                }
              },
              {
                "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>	test
Color de la fuente	<font color="#ea9999">test</font>	test
Hipervínculo	<a href="https://www.google.com">google</a>	google
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 (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 ) Este elemento es obsoleto. Dejó de estar disponible y se reemplazó por startIcon .
startIcon	object ( Icon ) El ícono que se muestra delante del texto.
topLabel	string El texto que aparece arriba de text Siempre se trunca. Admite formatos simples. Consulta Formato de texto para obtener detalles sobre el formato.
text	string Obligatorio. El texto principal. Admite formatos simples. Consulta Formato de texto para obtener detalles sobre el formato.
wrapText	boolean La configuración de ajuste de texto. Si es true , el texto se ajusta y se muestra en varias líneas. De lo contrario, el texto estará truncado. Solo se aplica a text , no a topLabel ni a bottomLabel .
bottomLabel	string El texto que aparece debajo de text Siempre se trunca. Admite formatos simples. Consulta Formato de texto para obtener detalles sobre el formato.
onClick	object ( OnClick ) Cuando los usuarios hacen clic en topLabel o bottomLabel , se activa esta acción.
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	object ( Button ) Un botón en el que se puede hacer clic para activar una acción.
switchControl	object ( 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	object ( Icon ) 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 (Icon) }, "color": { object (Color) }, "onClick": { object (OnClick) }, "disabled": boolean, "altText": string }

Campos
text	string 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 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 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 completa de ese color en la escala RGB. Opcionalmente, establece alfa, que establece un nivel de transparencia usando esta ecuación: pixel color = alpha * (this color) + (1.0 - alpha) * (background color) 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: "color": { "red": 1, "green": 0, "blue": 0, "alpha": 0.5 }
onClick	object ( 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	boolean Si es true , el botón se muestra en un estado inactivo y no responde a las acciones del usuario.
altText	string 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 (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 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, 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 el ícono se configura en un objeto Button , el objeto altText aparece como texto de ayuda cuando el usuario se desplaza sobre el botón. Sin embargo, si el botón también establece text , se ignora el altText del ícono.
imageType	enum ( ImageType ) El estilo de recorte aplicado a la imagen. En algunos casos, aplicar un recorte de CIRCLE hace que la imagen se dibuje más grande que un ícono estándar.
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 estándar 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 estándar.
iconUrl	string Mostrar un ícono personalizado alojado en una URL HTTPS. Por ejemplo: "iconUrl": "https://developers.google.com/chat/images/quickstart-app-avatar.png" Los tipos de archivo admitidos incluyen .png y .jpg .

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 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, onClick activa una acción.
openLink	object ( OpenLink ) Si se especifica, este onClick activa una acción de vínculo abierto.
openDynamicLinkAction	object ( Action ) Un complemento activa esta acción cuando la acción necesita abrir un vínculo. Se diferencia del openLink anterior en que necesita comunicarse con el servidor para obtener el vínculo. Por lo tanto, el cliente debe realizar un trabajo de preparación antes de que regrese la respuesta de acción de vínculo abierto.
card	object ( 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 (ActionParameter) } ], "loadIndicator": enum (LoadIndicator), "persistValues": boolean, "interaction": enum (Interaction) }

Campos
function	string 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[]	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. Cuando se usa LoadIndicator.NONE para las acciones, se recomienda persistValues = true , ya que garantiza que la respuesta no reemplace los cambios realizados por el usuario después del formulario o las acciones de cambio. Si es false , los valores del formulario se borran cuando se activa la acción. Cuando se configura persistValues como false , se recomienda que la tarjeta use LoadIndicator.SPINNER para todas las acciones, ya que esto bloquea la IU a fin de garantizar que el usuario no realice cambios mientras se procesa la acción. No es compatible con apps de chat.
interaction	enum ( 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.

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	string El nombre del parámetro para la secuencia de comandos de la acción.
value	string 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 (OpenAs), "onClose": enum (OnClose) }

Campos
url	string La URL que se abrirá.
openAs	enum ( OpenAs ) Cómo abrir un vínculo No es compatible con apps de chat.
onClose	enum ( 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.