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
Ejemplo 1: Un botón que abre un vínculo y un botón que ejecuta una función personalizada
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 (
|
Campos | |
---|---|
buttons[]
|
Array de botones. |
Botón
Representación JSON |
---|
{ "text": string, "icon": { object ( |
Campos | |
---|---|
text
|
Es 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 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
De manera opcional, configura
Para Por ejemplo, el siguiente color representa un rojo transparente medio:
|
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
|
Si es |
altText
|
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 ( |
Campos | |
---|---|
altText
|
Opcional. Es una descripción del ícono que se usa con fines de accesibilidad. Si no se especifica, se proporciona el valor predeterminado
Si se establece el ícono en una |
imageType
|
El estilo de recorte aplicado a la imagen. En algunos casos, aplicar un recorte |
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 integrados 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 integrados. |
iconUrl
|
Muestra un ícono personalizado alojado en una URL HTTPS. Por ejemplo:
Entre los tipos de archivo admitidos, se incluyen |
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
|
La cantidad de rojo en el color como un valor en el intervalo [0, 1]. |
green
|
La cantidad de verde en el color como un valor en el intervalo [0, 1]. |
blue
|
La cantidad de azul en el color como un valor en el intervalo [0, 1]. |
alpha
|
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:
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 |
Campos | |
---|---|
Campo de unión
|
|
action
|
Si se especifica, este |
openLink
|
Si se especifica, este |
openDynamicLinkAction
|
Un complemento activa esta acción cuando la acción necesita abrir un vínculo. Esto difiere de |
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.