Texto adornado

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

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.

Un mensaje de tarjeta en Google Chat que muestra un widget DecoratedText.
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": "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> 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 )

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.

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.