Lista de botones

El widget ButtonList muestra un conjunto de botones. Los botones pueden mostrar texto, un ícono o ambos.

Cada Button admite una acción OnClick que se produce cuando los usuarios hacen clic en el botón. Por ejemplo:

  • Abre un hipervínculo con OpenLink, como un hipervínculo a la documentación para desarrolladores de Google Chat, https://developers.google.com/chat.
  • Ejecutar una acción que ejecute una función personalizada, como llamar a una API

Puedes evitar que los usuarios hagan clic en un botón configurando "disabled": "true".

Para mejorar la accesibilidad, los botones admiten texto alternativo.

Ejemplos

La siguiente es una tarjeta que consta de un widget ButtonList que consta de dos Button. Con un botón, se abre la documentación para desarrolladores de Google Chat en una pestaña nueva. El otro botón ejecuta una función personalizada llamada goToView() y pasa un parámetro: viewType="Bird Eye View".

Ejemplo 2: Un botón con un color personalizado y uno desactivado

A continuación, se muestra una tarjeta que consta de un widget ButtonList que consta de dos Button. Un botón usa el campo Color para personalizar el color de fondo del botón. El otro botón se desactiva con el campo Disabled, lo que evita que el usuario haga clic en el botón y ejecute la función.

Ejemplo 3: Botones que muestran íconos

A continuación, se muestra una tarjeta que consta de un widget ButtonList con dos widgets de ícono Button. Un botón usa el campo knownIcon para mostrar el ícono de correo electrónico integrado de Google Chat. El otro botón usa el campo iconUrl para mostrar un widget de ícono personalizado.

Ejemplo 4: Botones con un ícono y texto

A continuación, se muestra una tarjeta que contiene un widget ButtonList que le pide al usuario que envíe un correo electrónico. El primer botón muestra un ícono de correo electrónico y el segundo muestra texto. El usuario puede hacer clic en el ícono o el botón de texto para ejecutar la función sendEmail.

Representación y campos JSON

Representación JSON
{
  "buttons": [
    {
      object (Button)
    }
  ]
}
Campos
buttons[]

object (Button)

Array de botones.

Botón

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”.

Í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.

Color

Representación JSON
{
  "red": number,
  "green": number,
  "blue": number,
  "alpha": number
}
Campos
red

number

La cantidad de rojo en el color como un valor en el intervalo [0, 1].

green

number

La cantidad de verde en el color como un valor en el intervalo [0, 1].

blue

number

La cantidad de azul en el color como un valor en el intervalo [0, 1].

alpha

number

La fracción de este color que se debe aplicar al píxel. Es decir, el color del píxel final se define mediante la siguiente ecuación:

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

Esto significa que el valor 1.0 corresponde a un color sólido, mientras que el valor 0.0 corresponde a un color completamente transparente. Esto utiliza un mensaje de wrapper en lugar de un escalar flotante simple, para que sea posible distinguir entre un valor predeterminado y el valor que no se configura. Si se omite, este objeto de color se representa como un color sólido (como si al valor alfa se le hubiera asignado explícitamente un valor de 1.0).

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.

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.