Cards v2

Tarjeta

Una interfaz de tarjeta que se muestra en un mensaje de Google Chat o un complemento de Google Workspace

Las tarjetas admiten un diseño definido, elementos interactivos de la interfaz de usuario (como botones) y rich media (como imágenes). Usa las tarjetas para presentar información detallada, recopilar información de los usuarios y guiarlos para que den el siguiente paso.

Diseña tarjetas y obtén una vista previa de ellas con el Creador de tarjetas.

Abre el Creador de tarjetas

Para obtener información sobre cómo compilar tarjetas, consulta la siguiente documentación:

• Para las apps de Google Chat, consulta Cómo diseñar los componentes de una tarjeta o un diálogo.
• Para los complementos de Google Workspace, consulta Interfaces basadas en tarjetas.

Ejemplo: Mensaje de tarjeta para una app de Google Chat

Para crear el mensaje de tarjeta de muestra en Google Chat, usa el siguiente JSON:

{
  "cardsV2": [
    {
      "cardId": "unique-card-id",
      "card": {
        "header": {
           "title": "Sasha",
           "subtitle": "Software Engineer",
           "imageUrl":
           "https://developers.google.com/workspace/chat/images/quickstart-app-avatar.png",
           "imageType": "CIRCLE",
           "imageAltText": "Avatar for Sasha"
         },
         "sections": [
           {
             "header": "Contact Info",
             "collapsible": true,
             "uncollapsibleWidgetsCount": 1,
             "widgets": [
               {
                 "decoratedText": {
                   "startIcon": {
                     "knownIcon": "EMAIL"
                   },
                   "text": "[e-mail]"
                 }
               },
               {
                 "decoratedText": {
                   "startIcon": {
                     "knownIcon": "PERSON"
                   },
                   "text": "<font color=\"#80e27e\">Online</font>"
                 }
               },
               {
                 "decoratedText": {
                   "startIcon": {
                     "knownIcon": "PHONE"
                   },
                   "text": "[phone]"
                 }
               },
               {
                 "buttonList": {
                   "buttons": [
                     {
                       "text": "Share",
                       "onClick": {
                        "openLink": {
                           "url": "https://example.com/share"
                         }
                       }
                     },
                     {
                       "text": "Edit",
                       "onClick": {
                         "action": {
                           "function": "goToView",
                           "parameters": [
                             {
                               "key": "viewType",
                               "value": "EDIT"
                             }
                           ]
                         }
                       }
                     }
                   ]
                 }
               }
             ]
           }
         ]
       }
    }
  ]
}

Representación JSON
{ "header": { object (CardHeader) }, "sections": [ { object (Section) } ], "sectionDividerStyle": enum (DividerStyle), "cardActions": [ { object (CardAction) } ], "name": string, "fixedFooter": { object (CardFixedFooter) }, "displayStyle": enum (DisplayStyle), "peekCardHeader": { object (CardHeader) } }

Campos
header	object (CardHeader) El encabezado de la tarjeta. Por lo general, un encabezado contiene una imagen inicial y un título. Los encabezados siempre aparecen en la parte superior de una tarjeta.
sections[]	object (Section) Contiene una colección de widgets. Cada sección tiene su propio encabezado opcional. Las secciones están separadas visualmente por un divisor de líneas. Para ver un ejemplo en las apps de Google Chat, consulta Define una sección de una tarjeta.
sectionDividerStyle	enum (DividerStyle) El estilo divisor entre secciones.
cardActions[]	object (CardAction) Las acciones de la tarjeta. Las acciones se agregan al menú de la barra de herramientas de la tarjeta. Está disponible para los complementos de Google Workspace, pero no está disponible para apps de Google Chat. Por ejemplo, el siguiente JSON construye un menú de acciones de tarjeta con las opciones Settings y Send Feedback: "cardActions": [ { "actionLabel": "Settings", "onClick": { "action": { "functionName": "goToView", "parameters": [ { "key": "viewType", "value": "SETTING" } ], "loadIndicator": "LoadIndicator.SPINNER" } } }, { "actionLabel": "Send Feedback", "onClick": { "openLink": { "url": "https://example.com/feedback" } } } ]
name	string Indica el nombre de la tarjeta. Se usa como identificador de tarjeta en la navegación con tarjetas. Está disponible para los complementos de Google Workspace, pero no está disponible para apps de Google Chat.
fixedFooter	object (CardFixedFooter) Es el pie de página fijo que se muestra en la parte inferior de esta tarjeta. Si se configura fixedFooter sin especificar una primaryButton o una secondaryButton, se generará un error. En el caso de las apps de Chat, puedes usar pies de página fijos en diálogos, pero no mensajes de tarjetas. Disponible para apps de Google Chat y complementos de Google Workspace.
displayStyle	enum (DisplayStyle) En los complementos de Google Workspace, configura las propiedades de visualización de peekCardHeader. Está disponible para los complementos de Google Workspace, pero no está disponible para apps de Google Chat.
peekCardHeader	object (CardHeader) Cuando se muestra contenido contextual, el encabezado de la tarjeta de vista previa actúa como un marcador de posición para que el usuario pueda navegar hacia adelante entre las tarjetas de la página principal y las tarjetas contextuales. Está disponible para los complementos de Google Workspace, pero no está disponible para apps de Google Chat.

CardHeader

Representa el encabezado de una tarjeta. Para ver un ejemplo en las apps de Google Chat, consulta Agrega un encabezado.

Disponible para apps de Google Chat y complementos de Google Workspace.

Representación JSON
{ "title": string, "subtitle": string, "imageType": enum (ImageType), "imageUrl": string, "imageAltText": string }

Campos
title	string Obligatorio. Es el título del encabezado de la tarjeta. El encabezado tiene una altura fija: si se especifican un título y un subtítulo, cada uno ocupa una línea. Si solo se especifica el título, este ocupará ambas líneas.
subtitle	string Es el subtítulo del encabezado de la tarjeta. Si se especifica, aparece en su propia línea debajo de title.
imageType	enum (ImageType) La forma que se usa para recortar la imagen. Disponible para apps de Google Chat y complementos de Google Workspace.
imageUrl	string Es la URL HTTPS de la imagen en el encabezado de la tarjeta.
imageAltText	string El texto alternativo de esta imagen que se utiliza con fines de accesibilidad.

ImageType

La forma que se usa para recortar la imagen.

Disponible para apps de Google Chat y complementos de Google Workspace.

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.

Sección

Una sección contiene una colección de widgets que se renderizan verticalmente en el orden en que se especifican.

Disponible para apps de Google Chat y complementos de Google Workspace.

Representación JSON
{ "header": string, "widgets": [ { object (Widget) } ], "collapsible": boolean, "uncollapsibleWidgetsCount": integer }

Campos
header	string Texto que aparece en la parte superior de una sección. Admite texto simple con formato HTML. 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.
widgets[]	object (Widget) Todos los widgets de la sección. Debe contener al menos un widget.
collapsible	boolean Indica si esta sección es contraíble. Las secciones contraíbles ocultan algunos o todos los widgets, pero los usuarios pueden hacer clic en Mostrar más para expandir la sección y mostrar los widgets ocultos. Los usuarios pueden volver a ocultar los widgets haciendo clic en Mostrar menos. Para determinar qué widgets están ocultos, especifica uncollapsibleWidgetsCount.
uncollapsibleWidgetsCount	integer La cantidad de widgets no contraíbles que permanecen visibles incluso cuando se contrae una sección. Por ejemplo, cuando una sección contiene cinco widgets y la uncollapsibleWidgetsCount se establece en 2, los primeros dos widgets se muestran siempre y los tres últimos se contraen de forma predeterminada. El uncollapsibleWidgetsCount solo se tiene en cuenta cuando collapsible es true.

Widget

Cada tarjeta se compone de widgets.

Un widget es un objeto compuesto que puede representar un texto, imágenes, botones y otros tipos de objetos.

Representación JSON

{ "horizontalAlignment": enum (HorizontalAlignment), // Union field data can be only one of the following: "textParagraph": { object (TextParagraph) }, "image": { object (Image) }, "decoratedText": { object (DecoratedText) }, "buttonList": { object (ButtonList) }, "textInput": { object (TextInput) }, "selectionInput": { object (SelectionInput) }, "dateTimePicker": { object (DateTimePicker) }, "divider": { object (Divider) }, "grid": { object (Grid) }, "columns": { object (Columns) } // End of list of possible types for union field data. }

Campos
horizontalAlignment	enum (HorizontalAlignment) Especifica si los widgets se alinean a la izquierda, a la derecha o al centro de una columna.
Campo de unión data. Un widget solo puede tener uno de los siguientes elementos. Puedes usar varios campos de widgets para mostrar más elementos. data puede ser solo una de las siguientes opciones:
textParagraph	object (TextParagraph) Muestra un párrafo de texto. Admite texto simple con formato HTML. 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. Por ejemplo, el siguiente JSON crea un texto en negrita: "textParagraph": { "text": " <b>bold text</b>" }
image	object (Image) Muestra una imagen. Por ejemplo, el siguiente JSON crea una imagen con texto alternativo: "image": { "imageUrl": "https://developers.google.com/workspace/chat/images/quickstart-app-avatar.png", "altText": "Chat app avatar" }
decoratedText	object (DecoratedText) Muestra un elemento de texto decorado. Por ejemplo, el siguiente JSON crea un widget de texto decorado que muestra la dirección de correo electrónico: "decoratedText": { "icon": { "knownIcon": "EMAIL" }, "topLabel": "Email Address", "text": "[e-mail]", "bottomLabel": "This is a new Email address!", "switchControl": { "name": "has_send_welcome_email_to_sasha", "selected": false, "controlType": "CHECKBOX" } }
buttonList	object (ButtonList) Una lista de botones. Por ejemplo, el siguiente JSON crea dos botones. El primero es un botón de texto azul y el segundo es un botón de imagen que abre un enlace: "buttonList": { "buttons": [ { "text": "Edit", "color": { "red": 0, "green": 0, "blue": 1, "alpha": 1 }, "disabled": true, }, { "icon": { "knownIcon": "INVITE", "altText": "check calendar" }, "onClick": { "openLink": { "url": "https://example.com/calendar" } } } ] }
textInput	object (TextInput) Muestra un cuadro de texto en el que los usuarios pueden escribir. Por ejemplo, el siguiente JSON crea una entrada de texto para una dirección de correo electrónico: "textInput": { "name": "mailing_address", "label": "Mailing Address" } En este otro ejemplo, el siguiente JSON crea una entrada de texto para un lenguaje de programación con sugerencias estáticas: "textInput": { "name": "preferred_programing_language", "label": "Preferred Language", "initialSuggestions": { "items": [ { "text": "C++" }, { "text": "Java" }, { "text": "JavaScript" }, { "text": "Python" } ] } }
selectionInput	object (SelectionInput) Muestra un control de selección que permite a los usuarios seleccionar elementos. Los controles de selección pueden ser casillas de verificación, botones de selección, interruptores o menús desplegables. Por ejemplo, el siguiente JSON crea un menú desplegable que permite a los usuarios elegir un tamaño: "selectionInput": { "name": "size", "label": "Size" "type": "DROPDOWN", "items": [ { "text": "S", "value": "small", "selected": false }, { "text": "M", "value": "medium", "selected": true }, { "text": "L", "value": "large", "selected": false }, { "text": "XL", "value": "extra_large", "selected": false } ] }
dateTimePicker	object (DateTimePicker) Muestra un widget que permite a los usuarios ingresar una fecha, hora o fecha y hora. Por ejemplo, el siguiente JSON crea un selector de fecha y hora para programar una cita: "dateTimePicker": { "name": "appointment_time", "label": "Book your appointment at:", "type": "DATE_AND_TIME", "valueMsEpoch": "796435200000" }
divider	object (Divider) Muestra un divisor de línea horizontal entre widgets. Por ejemplo, el siguiente JSON crea un divisor: "divider": { }
grid	object (Grid) Muestra una cuadrícula con una colección de elementos. Una cuadrícula admite cualquier cantidad de columnas y elementos. El número de filas está determinado por los límites superiores de la cantidad de elementos divididos por el número de columnas. Una cuadrícula con 10 elementos y 2 columnas tiene 5 filas. Una cuadrícula con 11 elementos y 2 columnas tiene 6 filas. Disponible para apps de Google Chat y complementos de Google Workspace. Por ejemplo, el siguiente JSON crea una cuadrícula de 2 columnas con un solo elemento: "grid": { "title": "A fine collection of items", "columnCount": 2, "borderStyle": { "type": "STROKE", "cornerRadius": 4 }, "items": [ { "image": { "imageUri": "https://www.example.com/image.png", "cropStyle": { "type": "SQUARE" }, "borderStyle": { "type": "STROKE" } }, "title": "An item", "textAlignment": "CENTER" } ], "onClick": { "openLink": { "url": "https://www.example.com" } } }
columns	object (Columns) Muestra hasta 2 columnas. Para incluir más de 2 columnas o usar filas, usa el widget Grid. Por ejemplo, el siguiente JSON crea 2 columnas, cada una con párrafos de texto: "columns": { "columnItems": [ { "horizontalSizeStyle": "FILL_AVAILABLE_SPACE", "horizontalAlignment": "CENTER", "verticalAlignment": "CENTER", "widgets": [ { "textParagraph": { "text": "First column text paragraph" } } ] }, { "horizontalSizeStyle": "FILL_AVAILABLE_SPACE", "horizontalAlignment": "CENTER", "verticalAlignment": "CENTER", "widgets": [ { "textParagraph": { "text": "Second column text paragraph" } } ] } ] }

TextParagraph

Un párrafo de texto que admite el formato. Para ver un ejemplo en las apps de Google Chat, consulta Agrega un párrafo de texto con formato. 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.

Disponible para apps de Google Chat y complementos de Google Workspace.

Representación JSON
{ "text": string }

Campos
text	string El texto que se muestra en el widget.

De imagen

Una imagen especificada por una URL y que puede tener una acción onClick. Para ver un ejemplo, consulta Agrega una imagen.

Disponible para apps de Google Chat y complementos de Google Workspace.

Representación JSON
{ "imageUrl": string, "onClick": { object (OnClick) }, "altText": string }

Campos
imageUrl	string Es la URL HTTPS que aloja la imagen. Por ejemplo: https://developers.google.com/workspace/chat/images/quickstart-app-avatar.png
onClick	object (OnClick) Cuando un usuario hace clic en la imagen, el clic activa esta acción.
altText	string El texto alternativo de esta imagen que se utiliza con fines de accesibilidad.

OnClick

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

Disponible para apps de Google Chat y complementos de Google Workspace.

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 puede ser solo una de las siguientes opciones:
action	object (Action) Si se especifica, este 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. Esto difiere de openLink anterior en que debe comunicarse con el servidor para obtener el vínculo. Por lo tanto, el cliente web requiere un poco de trabajo de preparación antes de que regrese la respuesta de acción de vínculo abierto. Está disponible para los complementos de Google Workspace, pero no está disponible para apps de Google Chat.
card	object (Card) Si se especifica, se envía una nueva tarjeta a la pila de tarjetas después de hacer clic. Está disponible para los complementos de Google Workspace, pero no está disponible para apps de Google Chat.

Acción

Una acción que describe el comportamiento cuando se envía un 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.

Disponible para apps de Google Chat y complementos de Google Workspace.

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

Campos
function	string Una función personalizada para invocar cuando se hace clic en el elemento contenedor o se activa de alguna otra manera. Para ver ejemplos de uso, consulta Cómo leer datos del formulario.
parameters[]	object (ActionParameter) Lista de parámetros de acción.
loadIndicator	enum (LoadIndicator) Especifica el indicador de carga que muestra la acción mientras 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 realice cambios mientras se procesa la acción, establece LoadIndicator en SPINNER.
interaction	enum (Interaction) Opcional. Es obligatorio al abrir un diálogo. Qué hacer en respuesta a una interacción con un usuario, como cuando un usuario hace clic en un botón de un mensaje de tarjeta Si no se especifica, la app responde con la ejecución normal de un elemento action, como abrir un vínculo o ejecutar una función. 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. Cuando se especifica, no se muestra un indicador de carga. Si se especifica para un complemento, se quita toda la tarjeta y no se muestra nada en el cliente. Está disponible para las apps de Google Chat y no para los complementos de Google Workspace.

ActionParameter

Lista de parámetros de cadena que se deben proporcionar cuando se invoca el método de acción. Por ejemplo, considera tres botones para posponer: Posponer ahora, Posponer un día o Posponer la semana siguiente. Puedes usar action method = snooze() y pasar el tipo y el tiempo de posposición en la lista de parámetros de string.

Para obtener más información, consulta CommonEventObject.

Disponible para apps de Google Chat y complementos de Google Workspace.

Representación JSON
{ "key": string, "value": string }

Campos
key	string Es 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 realiza la llamada a la acción.

Disponible para apps de Google Chat y complementos de Google Workspace.

Enumeradores
SPINNER	Muestra un ícono giratorio para indicar que se está cargando el contenido.
NONE	No se muestra nada.

Interacción

Opcional. Es obligatorio al abrir un diálogo.

Qué hacer en respuesta a una interacción con un usuario, como cuando un usuario hace clic en un botón de un mensaje de tarjeta

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

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.

Cuando se especifica, no se muestra un indicador de carga. Si se especifica para un complemento, se quita toda la tarjeta y no se muestra nada en el cliente.

Está disponible para las apps de Google Chat y no para los complementos de Google Workspace.

Enumeradores
INTERACTION_UNSPECIFIED	Valor predeterminado La action se ejecuta con normalidad.
OPEN_DIALOG	Abre un diálogo, una interfaz con ventanas basada en tarjetas que las apps de Chat usan para interactuar con los usuarios. Solo es compatible con apps de Chat en respuesta a clics en botones de los mensajes de las tarjetas. Si se especifica para un complemento, se quita toda la tarjeta y no se muestra nada en el cliente. Está disponible para las apps de Google Chat y no para los complementos de Google Workspace.

OpenLink

Representa un evento onClick que abre un hipervínculo.

Disponible para apps de Google Chat y complementos de Google Workspace.

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 Está disponible para los complementos de Google Workspace, pero no está disponible para apps de Google Chat.
onClose	enum (OnClose) Si el cliente olvida un vínculo después de abrirlo o si lo observa hasta que se cierra la ventana Está disponible para los complementos de Google Workspace, pero no está disponible para apps de Google Chat.

OpenAs

Cuando una acción OnClick abre un vínculo, el cliente puede abrirlo como una ventana de tamaño completo (si ese es el marco que usa el cliente) o como una superposición (como una ventana emergente). La implementación depende de las capacidades de la plataforma del cliente y el valor seleccionado puede ignorarse si el cliente no lo admite. FULL_SIZE es compatible con todos los clientes.

Está disponible para los complementos de Google Workspace, pero no está disponible para apps de Google Chat.

Enumeradores
FULL_SIZE	El vínculo se abre como una ventana de tamaño completo (si ese es el marco que usa el cliente).
OVERLAY	El vínculo se abre como una superposición, por ejemplo, una ventana emergente.

OnClose

Qué hace el cliente cuando se cierra un vínculo abierto por una acción OnClick

La implementación depende de las capacidades de la plataforma del cliente. Por ejemplo, un navegador web podría abrir un vínculo en una ventana emergente con un controlador OnClose.

Si se configuran los controladores OnOpen y OnClose, y la plataforma cliente no puede admitir ambos valores, OnClose tiene prioridad.

Está disponible para los complementos de Google Workspace, pero no está disponible para apps de Google Chat.

Enumeradores
NOTHING	Valor predeterminado La tarjeta no se vuelve a cargar y no sucede nada.
RELOAD	Vuelve a cargar la tarjeta después de que se cierra la ventana secundaria. Si se usa junto con OpenAs.OVERLAY, la ventana secundaria actúa como un diálogo modal, y la tarjeta superior se bloquea hasta que se cierre la ventana secundaria.

DecoratedText

Un widget que muestra texto con decoraciones opcionales, como una etiqueta arriba o debajo del texto, un ícono frente al texto, un widget de selección o un botón después del texto. Para ver un ejemplo en las apps de Google Chat, consulta Cómo mostrar texto con texto decorativo.

Disponible para apps de Google Chat y complementos de Google Workspace.

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. Se dio de baja y se reemplazó por startIcon.
startIcon	object (Icon) El ícono que aparece delante del texto.
topLabel	string Es el texto que aparece sobre text. Siempre se trunca.
text	string Obligatorio. El texto principal. Admite formatos simples. 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 para 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. Siempre encapsula.
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, un interruptor, una casilla de verificación o una imagen que aparece en el lado derecho del texto en el widget decoratedText control puede ser solo 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) Un widget de interruptor en el que un usuario puede hacer clic para cambiar su estado y activar una acción.
endIcon	object (Icon) Ícono que se muestra después del texto. Admite íconos integrados y personalizados.

Ícono

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

Admite íconos integrados y personalizados.

Disponible para apps de Google Chat y complementos de Google Workspace.

Representación JSON
{ "altText": string, "imageType": enum (ImageType), // Union field icons can be only one of the following: "knownIcon": string, "iconUrl": string, "materialIcon": { object (MaterialIcon) } // 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 icono 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/workspace/chat. Si se configura el ícono en un 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 puede ser solo una de las siguientes opciones:
knownIcon	string Muestra uno de los íconos integrados proporcionados por Google Workspace. Por ejemplo, para mostrar un ícono de avión, especifica AIRPLANE. Para un bus, 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/workspace/chat/images/quickstart-app-avatar.png" Los tipos de archivo admitidos incluyen .png y .jpg.
materialIcon	object (MaterialIcon) Muestra uno de los íconos de material de Google. Por ejemplo, para mostrar un ícono de casilla de verificación, usa "materialIcon": { "name": "check_box" } Está disponible para las apps de Google Chat y no para los complementos de Google Workspace.

MaterialIcon

Un ícono de material de Google, que incluye más de 2,500 opciones

Por ejemplo, para mostrar un ícono de casilla de verificación con peso y calificación personalizados, escribe lo siguiente:

{
  "name": "check_box",
  "fill": true,
  "weight": 300,
  "grade": -25
}

Está disponible para las apps de Google Chat y no para los complementos de Google Workspace.

Representación JSON
{ "name": string, "fill": boolean, "weight": integer, "grade": integer }

Campos
name	string Es el nombre del ícono definido en el ícono de material de Google, por ejemplo, check_box. Cualquier nombre no válido se abandona y se reemplaza con una cadena vacía, y hace que el ícono no se renderice.
fill	boolean Indica si el ícono se muestra como relleno. El valor predeterminado es "falso". Para obtener una vista previa de la configuración de los diferentes íconos, ve a Google Font Icons y ajusta la configuración en Personalizar.
weight	integer El grosor del trazo del ícono. Elige entre {100, 200, 300, 400, 500, 600, 700}. Si no está presente, el valor predeterminado es 400. Si se especifica otro valor, se usa el predeterminado. Para obtener una vista previa de la configuración de los diferentes íconos, ve a Google Font Icons y ajusta la configuración en Personalizar.
grade	integer El peso y la grado afectan el grosor de un símbolo. Los ajustes de calificación son más detallados que los ajustes de peso y tienen un pequeño impacto en el tamaño del símbolo. Elige entre {-25, 0, 200}. Si está ausente, el valor predeterminado es 0. Si se especifica otro valor, se usa el predeterminado. Para obtener una vista previa de la configuración de los diferentes íconos, ve a Google Font Icons y ajusta la configuración en Personalizar.

Botón

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

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

Disponible para apps de Google Chat y complementos de Google Workspace.

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) La 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 texto blanco. Si no la estableces, el fondo de la imagen será blanco y el color de la fuente será 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 total de ese color en la escala RGB. De manera opcional, establece alpha, que establece un nivel de transparencia mediante esta ecuación: pixel color = alpha * (this color) + (1.0 - alpha) * (background color) En el caso de 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 medio transparente: "color": { "red": 1, "green": 0, "blue": 0, "alpha": 0.5 }
onClick	object (OnClick) Obligatorio. Es la acción que se debe realizar 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 Es el texto alternativo que se usa con fines de accesibilidad. Establece texto descriptivo que permita a los usuarios saber lo que hace el botón. Por ejemplo, si un botón abre un hipervínculo, puedes escribir “Abre una nueva pestaña del navegador y navega a la documentación para desarrolladores de Google Chat en https://developers.google.com/workspace/chat".

Color

Representa un color en el espacio de color RGBA. Esta representación está diseñada para simplificar la conversión hacia y desde representaciones de color en varios idiomas sobre la compactación. Por ejemplo, los campos de esta representación se pueden proporcionar trivialmente al constructor de java.awt.Color en Java; también se pueden proporcionar de manera trivial al método +colorWithRed:green:blue:alpha de UIColor en iOS. Con solo un poco de trabajo, se puede formatear fácilmente en una cadena rgba() de CSS en JavaScript.

Esta página de referencia no tiene información sobre el espacio de color absoluto que debe usarse para interpretar el valor RGB, por ejemplo, sRGB, Adobe RGB, DCI-P3 y BT.2020. De forma predeterminada, las aplicaciones deben asumir el espacio de color sRGB.

Cuando se debe decidir la igualdad de color, las implementaciones, a menos que se documente lo contrario, tratan dos colores como iguales si todos sus valores de rojo, verde, azul y alfa difieren como máximo en 1e-5.

Ejemplo (Java):

 import com.google.type.Color;

 // ...
 public static java.awt.Color fromProto(Color protocolor) {
   float alpha = protocolor.hasAlpha()
       ? protocolor.getAlpha().getValue()
       : 1.0;

   return new java.awt.Color(
       protocolor.getRed(),
       protocolor.getGreen(),
       protocolor.getBlue(),
       alpha);
 }

 public static Color toProto(java.awt.Color color) {
   float red = (float) color.getRed();
   float green = (float) color.getGreen();
   float blue = (float) color.getBlue();
   float denominator = 255.0;
   Color.Builder resultBuilder =
       Color
           .newBuilder()
           .setRed(red / denominator)
           .setGreen(green / denominator)
           .setBlue(blue / denominator);
   int alpha = color.getAlpha();
   if (alpha != 255) {
     result.setAlpha(
         FloatValue
             .newBuilder()
             .setValue(((float) alpha) / denominator)
             .build());
   }
   return resultBuilder.build();
 }
 // ...

Ejemplo (iOS / Obj-C):

 // ...
 static UIColor* fromProto(Color* protocolor) {
    float red = [protocolor red];
    float green = [protocolor green];
    float blue = [protocolor blue];
    FloatValue* alpha_wrapper = [protocolor alpha];
    float alpha = 1.0;
    if (alpha_wrapper != nil) {
      alpha = [alpha_wrapper value];
    }
    return [UIColor colorWithRed:red green:green blue:blue alpha:alpha];
 }

 static Color* toProto(UIColor* color) {
     CGFloat red, green, blue, alpha;
     if (![color getRed:&red green:&green blue:&blue alpha:&alpha]) {
       return nil;
     }
     Color* result = [[Color alloc] init];
     [result setRed:red];
     [result setGreen:green];
     [result setBlue:blue];
     if (alpha <= 0.9999) {
       [result setAlpha:floatWrapperWithValue(alpha)];
     }
     [result autorelease];
     return result;
}
// ...

Ejemplo (JavaScript):

// ...

var protoToCssColor = function(rgb_color) {
   var redFrac = rgb_color.red || 0.0;
   var greenFrac = rgb_color.green || 0.0;
   var blueFrac = rgb_color.blue || 0.0;
   var red = Math.floor(redFrac * 255);
   var green = Math.floor(greenFrac * 255);
   var blue = Math.floor(blueFrac * 255);

   if (!('alpha' in rgb_color)) {
      return rgbToCssColor(red, green, blue);
   }

   var alphaFrac = rgb_color.alpha.value || 0.0;
   var rgbParams = [red, green, blue].join(',');
   return ['rgba(', rgbParams, ',', alphaFrac, ')'].join('');
};

var rgbToCssColor = function(red, green, blue) {
  var rgbNumber = new Number((red << 16) | (green << 8) | blue);
  var hexString = rgbNumber.toString(16);
  var missingZeros = 6 - hexString.length;
  var resultBuilder = ['#'];
  for (var i = 0; i < missingZeros; i++) {
     resultBuilder.push('0');
  }
  resultBuilder.push(hexString);
  return resultBuilder.join('');
};

// ...

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 renderiza como un color sólido (como si al valor alfa se le hubiera dado explícitamente un valor de 1.0).

SwitchControl

Puede ser un interruptor de estilo de activación o una casilla de verificación dentro de un widget decoratedText.

Disponible para apps de Google Chat y complementos de Google Workspace.

Solo es compatible con el widget decoratedText.

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

Campos
name	string Es el nombre con el que se identifica el widget de interruptor en un evento de entrada de formulario. Para obtener detalles sobre cómo trabajar con entradas de formularios, consulta Recibe datos de formularios.
value	string El valor ingresado por un usuario, que se muestra como parte de un evento de entrada de formulario. Para obtener detalles 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 debe realizar 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 Disponible para apps de Google Chat y complementos de Google Workspace.

ControlType

Cómo aparece el interruptor en la interfaz de usuario

Disponible para apps de Google Chat y complementos de Google Workspace.

Enumeradores
SWITCH	Un interruptor de estilo de activación o desactivación.
CHECKBOX	Se dio de baja y se reemplazó por CHECK_BOX.
CHECK_BOX	Una casilla de verificación.

ButtonList

Una lista de botones dispuestos horizontalmente. Para ver un ejemplo en las apps de Google Chat, consulta Agrega un botón.

Disponible para apps de Google Chat y complementos de Google Workspace.

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

Campos
buttons[]	object (Button) Un arreglo de botones.

TextInput

Es un campo en el que los usuarios pueden ingresar texto. Admite sugerencias y acciones ante cambios. Para ver un ejemplo en las apps de Google Chat, consulta Agrega un campo en el que un usuario puede ingresar texto.

Las apps de chat reciben y pueden procesar el valor del texto ingresado durante los eventos de entrada de formularios. Para obtener detalles sobre cómo trabajar con entradas de formularios, consulta Recibe datos de formularios.

Cuando necesites recopilar datos abstractos o indefinidos de los usuarios, usa una entrada de texto. Para recopilar datos definidos o enumerados de los usuarios, usa el widget SelectionInput.

Disponible para apps de Google Chat y complementos de Google Workspace.

Representación JSON
{ "name": string, "label": string, "hintText": string, "value": string, "type": enum (Type), "onChangeAction": { object (Action) }, "initialSuggestions": { object (Suggestions) }, "autoCompleteAction": { object (Action) }, "placeholderText": string }

Campos
name	string El nombre con el que se identifica la entrada de texto en un evento de entrada de formulario. Para obtener detalles sobre cómo trabajar con entradas de formularios, consulta Recibe datos de formularios.
label	string Es el texto que aparece sobre el campo de entrada de texto en la interfaz de usuario. Especifica el texto que ayuda al usuario a ingresar la información que tu app necesita. Por ejemplo, si le preguntas el nombre de una persona, pero necesitas específicamente su apellido, escribe surname en lugar de name. Es obligatorio si no se especifica hintText. De lo contrario, es opcional.
hintText	string Texto que aparece debajo del campo de entrada de texto para ayudar a los usuarios al solicitarles que ingresen un valor determinado. Este texto es siempre visible. Es obligatorio si no se especifica label. De lo contrario, es opcional.
value	string El valor ingresado por un usuario, que se muestra como parte de un evento de entrada de formulario. Para obtener detalles sobre cómo trabajar con entradas de formularios, consulta Recibe datos de formularios.
type	enum (Type) Cómo aparece un campo de entrada de texto en la interfaz de usuario Por ejemplo, si el campo es de una o varias líneas.
onChangeAction	object (Action) Qué hacer cuando se produce un cambio en el campo de entrada de texto Por ejemplo, un usuario que agrega elementos al campo o borra texto. Algunos ejemplos de acciones que puedes realizar incluyen ejecutar una función personalizada o abrir un diálogo en Google Chat.
initialSuggestions	object (Suggestions) Valores sugeridos que los usuarios pueden ingresar. Estos valores aparecen cuando los usuarios hacen clic dentro del campo de entrada de texto. A medida que los usuarios escriben, los valores sugeridos se filtran de forma dinámica para que coincidan con lo que ellos escribieron. Por ejemplo, un campo de entrada de texto para lenguaje de programación podría sugerir Java, JavaScript, Python y C++. Cuando los usuarios comienzan a escribir Jav, la lista de filtros de sugerencias solo muestra Java y JavaScript. Los valores sugeridos ayudan a guiar a los usuarios a ingresar valores que tu app pueda comprender. Cuando se hace referencia a JavaScript, algunos usuarios pueden ingresar javascript y otros java script. Sugerir JavaScript puede estandarizar la forma en que los usuarios interactúan con tu app. Cuando se especifica, TextInput.type siempre es SINGLE_LINE, incluso si se estableció en MULTIPLE_LINE. Disponible para apps de Google Chat y complementos de Google Workspace.
autoCompleteAction	object (Action) Opcional. Especifica qué acción realizar cuando el campo de entrada de texto proporcione sugerencias a los usuarios que interactúan con él. Si no se especifican, initialSuggestions establece las sugerencias, y el cliente las procesa. Si se especifica, la app realiza la acción que se especifica aquí, como ejecutar una función personalizada. Está disponible para los complementos de Google Workspace, pero no está disponible para apps de Google Chat.
placeholderText	string Texto que aparece en el campo de entrada de texto cuando el campo está vacío Usa este texto para solicitar a los usuarios que ingresen un valor. Por ejemplo, Enter a number from 0 to 100. Está disponible para las apps de Google Chat y no para los complementos de Google Workspace.

Tipo

Cómo aparece un campo de entrada de texto en la interfaz de usuario Por ejemplo, ya sea un campo de entrada de una sola línea o una entrada de varias líneas. Si se especifica initialSuggestions, type siempre es SINGLE_LINE, incluso si se estableció en MULTIPLE_LINE.

Disponible para apps de Google Chat y complementos de Google Workspace.

Enumeradores
SINGLE_LINE	El campo de entrada de texto tiene una altura fija de una línea.
MULTIPLE_LINE	El campo de entrada de texto tiene una altura fija de varias líneas.

RenderActions

Es un conjunto de instrucciones de procesamiento que le indican a una tarjeta que realice una acción o a la app host del complemento o a la app de Chat que realicen una acción específica de la app.

Disponible para apps de Google Chat y complementos de Google Workspace.

Campos
action	Action

Acción

Campos
navigations[]	Navigation Envía o actualiza las tarjetas que se muestran.

Navigation

Agrega una tarjeta nueva a la pila (navega hacia adelante).

Está disponible para los complementos de Google Workspace, pero no está disponible para las apps de Google Chat.

navigations: {
  pushCard: CARD
}

Reemplaza la tarjeta superior por una nueva.

Está disponible para los complementos de Google Workspace, pero no está disponible para las apps de Google Chat.

navigations: {
  updateCard: CARD
}

Campos
Campo de unión navigate_action. navigate_action puede ser una de las siguientes opciones:
pushCard	Card La pila de cartas empuja una tarjeta a la pila.
updateCard	Card La pila de tarjetas actualiza la tarjeta superior con una tarjeta nueva y conserva los valores de los campos del formulario completados. En el caso de un campo no equivalente, se descarta el valor.

Sugerencias

Valores sugeridos que los usuarios pueden ingresar. Estos valores aparecen cuando los usuarios hacen clic dentro del campo de entrada de texto. A medida que los usuarios escriben, los valores sugeridos se filtran de forma dinámica para que coincidan con lo que ellos escribieron.

Por ejemplo, un campo de entrada de texto para lenguaje de programación podría sugerir Java, JavaScript, Python y C++. Cuando los usuarios comienzan a escribir Jav, la lista de filtros de sugerencias mostrará Java y JavaScript.

Los valores sugeridos ayudan a guiar a los usuarios a ingresar valores que tu app pueda comprender. Cuando se hace referencia a JavaScript, algunos usuarios pueden ingresar javascript y otros java script. Sugerir JavaScript puede estandarizar la forma en que los usuarios interactúan con tu app.

Cuando se especifica, TextInput.type siempre es SINGLE_LINE, incluso si se estableció en MULTIPLE_LINE.

Disponible para apps de Google Chat y complementos de Google Workspace.

Representación JSON
{ "items": [ { object (SuggestionItem) } ] }

Campos
items[]	object (SuggestionItem) Una lista de sugerencias que se usan para autocompletar recomendaciones en los campos de entrada de texto.

SuggestionItem

Es un valor sugerido que los usuarios pueden ingresar en un campo de entrada de texto.

Disponible para apps de Google Chat y complementos de Google Workspace.

Representación JSON
{ // Union field content can be only one of the following: "text": string // End of list of possible types for union field content. }

Campos
Campo de unión content. content puede ser solo una de las siguientes opciones:
text	string El valor de una entrada sugerida para un campo de entrada de texto. Esto equivale a lo que los usuarios ingresan.

SelectionInput

Un widget que crea uno o más elementos de la IU que los usuarios pueden seleccionar. Por ejemplo, un menú desplegable o casillas de verificación. Puedes usar este widget para recopilar datos que se pueden predecir o enumerar. Para ver un ejemplo en las apps de Google Chat, consulta Cómo agregar elementos de IU seleccionables.

Las apps de chat pueden procesar el valor de los elementos que los usuarios seleccionan o ingresan. Para obtener detalles sobre cómo trabajar con entradas de formularios, consulta Recibe datos de formularios.

Para recopilar datos abstractos o indefinidos de los usuarios, usa el widget TextInput.

Disponible para apps de Google Chat y complementos de Google Workspace.

Representación JSON

{ "name": string, "label": string, "type": enum (SelectionType), "items": [ { object (SelectionItem) } ], "onChangeAction": { object (Action) }, "multiSelectMaxSelectedItems": integer, "multiSelectMinQueryLength": integer, // Union field multi_select_data_source can be only one of the following: "externalDataSource": { object (Action) }, "platformDataSource": { object (PlatformDataSource) } // End of list of possible types for union field multi_select_data_source. }

Campos
name	string Es el nombre que identifica la entrada de selección en un evento de entrada de formulario. Para obtener detalles sobre cómo trabajar con entradas de formularios, consulta Recibe datos de formularios.
label	string Es el texto que aparece sobre el campo de entrada de selección en la interfaz de usuario. Especifica el texto que ayuda al usuario a ingresar la información que tu app necesita. Por ejemplo, si los usuarios seleccionan la urgencia de un ticket de trabajo en un menú desplegable, la etiqueta podría ser “Urgencia” o “Seleccionar urgencia”.
type	enum (SelectionType) El tipo de elementos que se muestran a los usuarios en un widget SelectionInput Los tipos de selección admiten diferentes tipos de interacciones. Por ejemplo, los usuarios pueden seleccionar una o más casillas de verificación, pero solo pueden seleccionar un valor en un menú desplegable.
items[]	object (SelectionItem) Un array de elementos seleccionables. Por ejemplo, un array de botones de selección o casillas de verificación. Admite hasta 100 elementos.
onChangeAction	object (Action) Si se especifica, el formulario se envía cuando cambia la selección. Si no se especifica, debes especificar otro botón que envíe el formulario. Para obtener detalles sobre cómo trabajar con entradas de formularios, consulta Recibe datos de formularios.
multiSelectMaxSelectedItems	integer En el caso de los menús de selección múltiple, la cantidad máxima de elementos que puede seleccionar un usuario. El valor mínimo es 1 elemento. Si no se especifica, el valor predeterminado es 3 elementos.
multiSelectMinQueryLength	integer En el caso de los menús de selección múltiple, la cantidad de caracteres de texto que el usuario ingresa antes de que la app consulte se completa automáticamente y muestra los elementos sugeridos en el menú. Si no se especifica, la configuración predeterminada es de 0 caracteres para las fuentes de datos estáticas y de 3 caracteres para las fuentes de datos externas.
Campo de unión multi_select_data_source. Para un menú de selección múltiple, la fuente de datos que propaga los elementos de selección. Está disponible para las apps de Google Chat y no para los complementos de Google Workspace. multi_select_data_source puede ser solo una de las siguientes opciones:
externalDataSource	object (Action) Una fuente de datos externa, como una base de datos relacional
platformDataSource	object (PlatformDataSource) Una fuente de datos de Google Workspace

SelectionType

Es el formato de los elementos que los usuarios pueden seleccionar. Las diferentes opciones admiten distintos tipos de interacciones. Por ejemplo, los usuarios pueden seleccionar varias casillas de verificación, pero solo pueden seleccionar un elemento de un menú desplegable.

Cada entrada de selección admite un tipo de selección. Por ejemplo, no se pueden combinar interruptores y casillas de verificación.

Disponible para apps de Google Chat y complementos de Google Workspace.

Enumeradores
CHECK_BOX	Un conjunto de casillas de verificación. Los usuarios pueden seleccionar una o más casillas de verificación.
RADIO_BUTTON	Un conjunto de botones de selección. Los usuarios pueden elegir un botón de selección.
SWITCH	Un conjunto de interruptores. Los usuarios pueden activar uno o más interruptores.
DROPDOWN	Un menú desplegable Los usuarios pueden seleccionar un elemento del menú.
MULTI_SELECT	Un menú de selección múltiple para datos estáticos o dinámicos. En la barra de menú, los usuarios seleccionan uno o más elementos. Los usuarios también pueden ingresar valores para propagar datos dinámicos. Por ejemplo, los usuarios pueden comenzar a escribir el nombre de un espacio de Google Chat y el widget lo sugiere automáticamente. Para propagar los elementos de un menú de selección múltiple, puedes utilizar uno de los siguientes tipos de fuentes de datos: Datos estáticos: los elementos se especifican como objetos SelectionItem en el widget. Hasta 100 elementos. Datos de Google Workspace: Los elementos se propagan con datos de Google Workspace, como los usuarios de Google Workspace o los espacios de Google Chat. Datos externos: Los elementos se propagan desde una fuente de datos externa fuera de Google Workspace. Para ver ejemplos de cómo implementar menús de selección múltiple, consulta Cómo agregar un menú de selección múltiple. Disponible para apps de Google Chat y complementos de Google Workspace. La selección múltiple de complementos de Google Workspace está disponible en la Versión preliminar para desarrolladores.

SelectionItem

Es un elemento que los usuarios pueden seleccionar en una entrada de selección, como una casilla de verificación o un interruptor.

Disponible para apps de Google Chat y complementos de Google Workspace.

Representación JSON
{ "text": string, "value": string, "selected": boolean, "startIconUri": string, "bottomText": string }

Campos
text	string Es el texto que identifica o describe el elemento a los usuarios.
value	string Es el valor asociado con este elemento. El cliente debería usarlo como un valor de entrada de formulario. Para obtener detalles sobre cómo trabajar con entradas de formularios, consulta Recibe datos de formularios.
selected	boolean Indica si el elemento se selecciona de forma predeterminada. Si la entrada de selección solo acepta un valor (por ejemplo, para los botones de selección o un menú desplegable), establece este campo solo para un elemento.
startIconUri	string En el caso de los menús de selección múltiple, la URL del ícono que se muestra junto al campo text del elemento. Admite archivos PNG y JPEG. Debe ser una URL HTTPS. Por ejemplo, https://developers.google.com/workspace/chat/images/quickstart-app-avatar.png.
bottomText	string Para los menús de selección múltiple, una descripción de texto o una etiqueta que se muestra debajo del campo text del elemento.

PlatformDataSource

Para un widget SelectionInput que usa un menú de selección múltiple, una fuente de datos de Google Workspace. Se usa para propagar elementos en un menú de selección múltiple.

Está disponible para las apps de Google Chat y no para los complementos de Google Workspace.

Representación JSON
{ // Union field data_source can be only one of the following: "commonDataSource": enum (CommonDataSource), "hostAppDataSource": { object (HostAppDataSourceMarkup) } // End of list of possible types for union field data_source. }

Campos
Campo de unión data_source. Es la fuente de datos. data_source puede ser solo una de las siguientes opciones:
commonDataSource	enum (CommonDataSource) Una fuente de datos que comparten todas las aplicaciones de Google Workspace, como los usuarios de una organización de Google Workspace.
hostAppDataSource	object (HostAppDataSourceMarkup) Una fuente de datos que es exclusiva de una aplicación host de Google Workspace, como los espacios en Google Chat

CommonDataSource

Una fuente de datos que comparten todas las aplicaciones de Google Workspace.

Está disponible para las apps de Google Chat y no para los complementos de Google Workspace.

Enumeradores
UNKNOWN	Valor predeterminado No utilizar.
USER	de usuarios de Google Workspace. Los usuarios solo pueden ver y seleccionar usuarios de su organización de Google Workspace.

HostAppDataSourceMarkup

Para un widget SelectionInput que usa un menú de selección múltiple, es una fuente de datos de una aplicación de Google Workspace. La fuente de datos propaga los elementos de selección para el menú de selección múltiple.

Está disponible para las apps de Google Chat y no para los complementos de Google Workspace.

Representación JSON
{ // Union field data_source can be only one of the following: "chatDataSource": { object (ChatClientDataSourceMarkup) } // End of list of possible types for union field data_source. }

Campos
Campo de unión data_source. La aplicación de Google Workspace que propaga elementos para un menú de selección múltiple. data_source puede ser solo una de las siguientes opciones:
chatDataSource	object (ChatClientDataSourceMarkup) Una fuente de datos de Google Chat.

ChatClientDataSourceMarkup

Para un widget SelectionInput que usa un menú de selección múltiple, una fuente de datos de Google Chat. La fuente de datos propaga los elementos de selección para el menú de selección múltiple. Por ejemplo, un usuario puede seleccionar espacios de Google Chat de los que sea miembro.

Está disponible para las apps de Google Chat y no para los complementos de Google Workspace.

Representación JSON
{ // Union field source can be only one of the following: "spaceDataSource": { object (SpaceDataSource) } // End of list of possible types for union field source. }

Campos
Campo de unión source. La fuente de datos de Google Chat source puede ser solo una de las siguientes opciones:
spaceDataSource	object (SpaceDataSource) Espacios de Google Chat de los que es miembro el usuario.

SpaceDataSource

Una fuente de datos que propaga los espacios de Google Chat como elementos de selección para un menú de selección múltiple. Solo completa los espacios de los que es miembro el usuario.

Está disponible para las apps de Google Chat y no para los complementos de Google Workspace.

Representación JSON
{ "defaultToCurrentSpace": boolean }

Campos
defaultToCurrentSpace	boolean Si se establece en true, el menú de selección múltiple selecciona el espacio actual de Google Chat como elemento de forma predeterminada.

DateTimePicker

Permite que los usuarios ingresen una fecha, una hora o ambas. Para ver un ejemplo en las apps de Google Chat, consulta Permite que un usuario elija una fecha y hora.

Los usuarios pueden ingresar texto o usar el selector para seleccionar fechas y horas. Si los usuarios ingresan una fecha o una hora no válidas, el selector mostrará un error que les indicará que ingresen la información correctamente.

Disponible para apps de Google Chat y complementos de Google Workspace.

Representación JSON
{ "name": string, "label": string, "type": enum (DateTimePickerType), "valueMsEpoch": string, "timezoneOffsetDate": integer, "onChangeAction": { object (Action) } }

Campos
name	string Es el nombre con el que se identifica el DateTimePicker en un evento de entrada de formulario. Para obtener detalles sobre cómo trabajar con entradas de formularios, consulta Recibe datos de formularios.
label	string Es el texto que les solicita a los usuarios que ingresen una fecha, hora o fecha y hora. Por ejemplo, si los usuarios programan una cita, usa una etiqueta como Appointment date o Appointment date and time.
type	enum (DateTimePickerType) Si el widget admite ingresar una fecha, una hora o la fecha y hora
valueMsEpoch	string (int64 format) Es el valor predeterminado que se muestra en el widget, en milisegundos desde el época Unix. Especifica el valor según el tipo de selector (DateTimePickerType): DATE_AND_TIME: Es una fecha y hora del calendario en UTC. Por ejemplo, para representar el 1 de enero de 2023 a las 12:00 p.m. UTC, usa 1672574400000. DATE_ONLY: Una fecha del calendario a las 00:00:00 UTC. Por ejemplo, para representar el 1 de enero de 2023, usa 1672531200000. TIME_ONLY: Es una hora en UTC. Por ejemplo, para representar las 12:00 p.m., usa 43200000 (o 12 * 60 * 60 * 1000).
timezoneOffsetDate	integer El número que representa el desplazamiento de zona horaria de UTC, en minutos. Si se configura, valueMsEpoch se muestra en la zona horaria especificada. Si no la estableces, el valor se establecerá de forma predeterminada en la configuración de la zona horaria del usuario.
onChangeAction	object (Action) Se activa cuando el usuario hace clic en Guardar o Borrar en la interfaz DateTimePicker.

DateTimePickerType

El formato para la fecha y la hora en el widget DateTimePicker. Determina si los usuarios pueden ingresar una fecha, una hora o ambas.

Disponible para apps de Google Chat y complementos de Google Workspace.

Enumeradores
DATE_AND_TIME	Los usuarios ingresan una fecha y una hora.
DATE_ONLY	Los usuarios ingresan una fecha.
TIME_ONLY	Los usuarios deben ingresar una hora.

Separador

Este tipo no tiene campos.

Muestra un divisor entre widgets como una línea horizontal. Para ver un ejemplo en las apps de Google Chat, consulta Cómo agregar un divisor horizontal entre widgets.

Disponible para apps de Google Chat y complementos de Google Workspace.

Por ejemplo, el siguiente JSON crea un divisor:

"divider": {}

GRid

Muestra una cuadrícula con una colección de elementos. Los artículos solo pueden incluir texto o imágenes. Para columnas responsivas o para incluir más que solo texto o imágenes, usa Columns. Para ver un ejemplo en las apps de Google Chat, consulta Cómo mostrar una cuadrícula con una colección de elementos.

Una cuadrícula admite cualquier cantidad de columnas y elementos. La cantidad de filas se determina por los elementos divididos por las columnas. Una cuadrícula con 10 elementos y 2 columnas tiene 5 filas. Una cuadrícula con 11 elementos y 2 columnas tiene 6 filas.

Disponible para apps de Google Chat y complementos de Google Workspace.

Por ejemplo, el siguiente JSON crea una cuadrícula de 2 columnas con un solo elemento:

"grid": {
  "title": "A fine collection of items",
  "columnCount": 2,
  "borderStyle": {
    "type": "STROKE",
    "cornerRadius": 4
  },
  "items": [
    {
      "image": {
        "imageUri": "https://www.example.com/image.png",
        "cropStyle": {
          "type": "SQUARE"
        },
        "borderStyle": {
          "type": "STROKE"
        }
      },
      "title": "An item",
      "textAlignment": "CENTER"
    }
  ],
  "onClick": {
    "openLink": {
      "url": "https://www.example.com"
    }
  }
}

Representación JSON
{ "title": string, "items": [ { object (GridItem) } ], "borderStyle": { object (BorderStyle) }, "columnCount": integer, "onClick": { object (OnClick) } }

Campos
title	string El texto que se muestra en el encabezado de la cuadrícula.
items[]	object (GridItem) Los elementos que se mostrarán en la cuadrícula.
borderStyle	object (BorderStyle) El estilo de borde que se aplicará a cada elemento de la cuadrícula.
columnCount	integer El número de columnas que se mostrarán en la cuadrícula. Si no se especifica este campo, se usa un valor predeterminado, que es diferente según dónde se muestre la cuadrícula (diálogo o complementario).
onClick	object (OnClick) Cada elemento individual de la cuadrícula vuelve a usar esta devolución de llamada, pero con el identificador y el índice del elemento en la lista de elementos agregados a los parámetros de la devolución de llamada.

GridItem

Representa un elemento en un diseño de cuadrícula. Los elementos pueden contener texto, una imagen o ambos.

Disponible para apps de Google Chat y complementos de Google Workspace.

Representación JSON
{ "id": string, "image": { object (ImageComponent) }, "title": string, "subtitle": string, "layout": enum (GridItemLayout) }

Campos
id	string Un identificador especificado por el usuario para este elemento de la cuadrícula. Este identificador se muestra en los parámetros de devolución de llamada onClick de la cuadrícula superior.
image	object (ImageComponent) La imagen que se muestra en el elemento de la cuadrícula.
title	string Título del elemento de la cuadrícula.
subtitle	string El subtítulo del elemento de la cuadrícula.
layout	enum (GridItemLayout) El diseño que se usará para el elemento de cuadrícula.

ImageComponent

Representa una imagen.

Disponible para apps de Google Chat y complementos de Google Workspace.

Representación JSON
{ "imageUri": string, "altText": string, "cropStyle": { object (ImageCropStyle) }, "borderStyle": { object (BorderStyle) } }

Campos
imageUri	string La URL de la imagen.
altText	string Es la etiqueta de accesibilidad de la imagen.
cropStyle	object (ImageCropStyle) El estilo de recorte que se aplicará a la imagen.
borderStyle	object (BorderStyle) El estilo de borde que se aplicará a la imagen.

ImageCropStyle

Representa el estilo de recorte aplicado a una imagen.

Disponible para apps de Google Chat y complementos de Google Workspace.

Por ejemplo, a continuación, se muestra cómo aplicar una relación de aspecto de 16:9:

cropStyle {
 "type": "RECTANGLE_CUSTOM",
 "aspectRatio": 16/9
}

Representación JSON
{ "type": enum (ImageCropType), "aspectRatio": number }

Campos
type	enum (ImageCropType) El tipo de recorte.
aspectRatio	number La relación de aspecto que se usará si el tipo de recorte es RECTANGLE_CUSTOM. Por ejemplo, a continuación, se muestra cómo aplicar una relación de aspecto de 16:9: cropStyle { "type": "RECTANGLE_CUSTOM", "aspectRatio": 16/9 }

ImageCropType

Representa el estilo de recorte aplicado a una imagen.

Disponible para apps de Google Chat y complementos de Google Workspace.

Enumeradores
IMAGE_CROP_TYPE_UNSPECIFIED	No utilizar. No se especifica.
SQUARE	Valor predeterminado Aplica un recorte cuadrado.
CIRCLE	Aplica un recorte circular.
RECTANGLE_CUSTOM	Aplica un recorte rectangular con una relación de aspecto personalizada. Configura la relación de aspecto personalizada con aspectRatio.
RECTANGLE_4_3	Aplica un recorte rectangular con una relación de aspecto de 4:3.

BorderStyle

Las opciones de estilo para el borde de una tarjeta o un widget, incluidos el tipo de borde y el color.

Disponible para apps de Google Chat y complementos de Google Workspace.

Representación JSON
{ "type": enum (BorderType), "strokeColor": { object (Color) }, "cornerRadius": integer }

Campos
type	enum (BorderType) Es el tipo de borde.
strokeColor	object (Color) Los colores que se usarán cuando el tipo sea BORDER_TYPE_STROKE.
cornerRadius	integer Radio de esquina del borde.

BorderType

Representa los tipos de bordes aplicados a los widgets.

Disponible para apps de Google Chat y complementos de Google Workspace.

Enumeradores
BORDER_TYPE_UNSPECIFIED	No utilizar. No se especifica.
NO_BORDER	Valor predeterminado Sin margen.
STROKE	Descripción.

GridItemLayout

Representa las diversas opciones de diseño disponibles para un elemento de cuadrícula.

Disponible para apps de Google Chat y complementos de Google Workspace.

Enumeradores
GRID_ITEM_LAYOUT_UNSPECIFIED	No utilizar. No se especifica.
TEXT_BELOW	El título y el subtítulo se muestran debajo de la imagen del elemento de la cuadrícula.
TEXT_ABOVE	El título y el subtítulo se muestran sobre la imagen del elemento de la cuadrícula.

Columna

El widget Columns muestra hasta 2 columnas en una tarjeta o un diálogo. Puedes agregar widgets a cada columna; los widgets aparecen en el orden en que se especifican. Para ver un ejemplo en las apps de Google Chat, consulta Cómo mostrar tarjetas y diálogos en columnas.

La altura de cada columna se determina por la columna más alta. Por ejemplo, si la primera columna es más alta que la segunda, ambas columnas tienen la altura de la primera. Debido a que cada columna puede contener una cantidad diferente de widgets, no puedes definir filas ni alinear widgets entre las columnas.

Las columnas se muestran una al lado de la otra. Puedes personalizar el ancho de cada columna en el campo HorizontalSizeStyle. Si el ancho de la pantalla del usuario es demasiado angosto, la segunda columna se une debajo de la primera:

• En la Web, la segunda columna se ajusta si el ancho de la pantalla es menor o igual que 480 píxeles.
• En dispositivos iOS, la segunda columna se ajusta si el ancho de la pantalla es menor o igual que 300 pt.
• En dispositivos Android, la segunda columna se ajusta si el ancho de la pantalla es menor o igual que 320 dp.

Para incluir más de 2 columnas o usar filas, usa el widget Grid.

Disponible para apps de Google Chat y complementos de Google Workspace. Las columnas de los complementos de Google Workspace se encuentran en la Versión preliminar para desarrolladores.

Representación JSON
{ "columnItems": [ { object (Column) } ] }

Campos
columnItems[]	object (Column) Un array de columnas. Puedes incluir hasta 2 columnas en una tarjeta o un diálogo.

Columna

Una columna.

Disponible para apps de Google Chat y complementos de Google Workspace. Las columnas de los complementos de Google Workspace se encuentran en la Versión preliminar para desarrolladores.

Representación JSON
{ "horizontalSizeStyle": enum (HorizontalSizeStyle), "horizontalAlignment": enum (HorizontalAlignment), "verticalAlignment": enum (VerticalAlignment), "widgets": [ { object (Widgets) } ] }

Campos
horizontalSizeStyle	enum (HorizontalSizeStyle) Especifica cómo una columna cubre el ancho de la tarjeta.
horizontalAlignment	enum (HorizontalAlignment) Especifica si los widgets se alinean a la izquierda, a la derecha o al centro de una columna.
verticalAlignment	enum (VerticalAlignment) Especifica si los widgets se alinean en la parte superior, inferior o central de una columna.
widgets[]	object (Widgets) Un array de widgets incluidos en una columna. Los widgets aparecen en el orden en que se especifican.

HorizontalSizeStyle

Especifica cómo una columna cubre el ancho de la tarjeta. El ancho de cada columna depende del HorizontalSizeStyle y del ancho de los widgets dentro de la columna.

Disponible para apps de Google Chat y complementos de Google Workspace. Las columnas de los complementos de Google Workspace se encuentran en la Versión preliminar para desarrolladores.

Enumeradores
HORIZONTAL_SIZE_STYLE_UNSPECIFIED	No utilizar. No se especifica.
FILL_AVAILABLE_SPACE	Valor predeterminado La columna ocupa el espacio disponible, hasta el 70% del ancho de la tarjeta. Si ambas columnas se configuran como FILL_AVAILABLE_SPACE, cada columna llena el 50% del espacio.
FILL_MINIMUM_SPACE	La columna ocupa la menor cantidad de espacio posible y no más del 30% del ancho de la tarjeta.

HorizontalAlignment

Especifica si los widgets se alinean a la izquierda, a la derecha o al centro de una columna.

Está disponible para las apps de Google Chat y no para los complementos de Google Workspace.

Enumeradores
HORIZONTAL_ALIGNMENT_UNSPECIFIED	No utilizar. No se especifica.
START	Valor predeterminado Alinea los widgets en la posición inicial de la columna. Para diseños de izquierda a derecha, se alinea a la izquierda. Para diseños de derecha a izquierda, se alinea con la derecha.
CENTER	Alinea los widgets en el centro de la columna.
END	Alinea los widgets en la posición final de la columna. Para diseños de izquierda a derecha, alinea los widgets a la derecha. Para diseños de derecha a izquierda, alinea los widgets a la izquierda.

VerticalAlignment

Especifica si los widgets se alinean en la parte superior, inferior o central de una columna.

Disponible para apps de Google Chat y complementos de Google Workspace. Las columnas de los complementos de Google Workspace se encuentran en la Versión preliminar para desarrolladores.

Enumeradores
VERTICAL_ALIGNMENT_UNSPECIFIED	No utilizar. No se especifica.
CENTER	Valor predeterminado Alinea los widgets en el centro de una columna.
TOP	Alinea los widgets en la parte superior de una columna.
BOTTOM	Alinea los widgets en la parte inferior de una columna.

Widgets

Los widgets compatibles que puedes incluir en una columna.

Disponible para apps de Google Chat y complementos de Google Workspace. Las columnas de los complementos de Google Workspace se encuentran en la Versión preliminar para desarrolladores.

Representación JSON

{ // Union field data can be only one of the following: "textParagraph": { object (TextParagraph) }, "image": { object (Image) }, "decoratedText": { object (DecoratedText) }, "buttonList": { object (ButtonList) }, "textInput": { object (TextInput) }, "selectionInput": { object (SelectionInput) }, "dateTimePicker": { object (DateTimePicker) } // End of list of possible types for union field data. }

Campos
Campo de unión data. data puede ser solo una de las siguientes opciones:
textParagraph	object (TextParagraph) TextParagraph.
image	object (Image) Image.
decoratedText	object (DecoratedText) DecoratedText.
buttonList	object (ButtonList) ButtonList.
textInput	object (TextInput) TextInput.
selectionInput	object (SelectionInput) SelectionInput.
dateTimePicker	object (DateTimePicker) DateTimePicker.

DividerStyle

El estilo divisor de una tarjeta. Actualmente, solo se usa para divisores entre las secciones de las tarjetas.

Disponible para apps de Google Chat y complementos de Google Workspace.

Enumeradores
DIVIDER_STYLE_UNSPECIFIED	No utilizar. No se especifica.
SOLID_DIVIDER	Es la opción predeterminada. Representa un divisor sólido entre secciones.
NO_DIVIDER	Si se configura, no se renderiza ningún divisor entre secciones.

CardAction

Una acción de tarjeta es la acción asociada con la tarjeta. Por ejemplo, una tarjeta de factura puede incluir acciones como borrar una factura, una factura por correo electrónico o abrir la factura en un navegador.

Está disponible para los complementos de Google Workspace, pero no está disponible para apps de Google Chat.

Representación JSON
{ "actionLabel": string, "onClick": { object (OnClick) } }

Campos
actionLabel	string La etiqueta que se muestra como el elemento del menú de acciones.
onClick	object (OnClick) La acción onClick para este elemento de acción.

CardFixedFooter

Pie de página persistente que aparece en la parte inferior de la tarjeta.

Si se configura fixedFooter sin especificar una primaryButton o una secondaryButton, se generará un error.

En el caso de las apps de Chat, puedes usar pies de página fijos en diálogos, pero no mensajes de tarjetas. Para ver un ejemplo de las apps de Google Chat, consulta Agrega un pie de página persistente.

Disponible para apps de Google Chat y complementos de Google Workspace.

Representación JSON
{ "primaryButton": { object (Button) }, "secondaryButton": { object (Button) } }

Campos
primaryButton	object (Button) El botón principal del pie de página fijo. El botón debe ser un botón de texto con texto y colores establecidos.
secondaryButton	object (Button) El botón secundario del pie de página fijo. El botón debe ser un botón de texto con texto y colores establecidos. Si se configura secondaryButton, también debes configurar primaryButton.

DisplayStyle

En los complementos de Google Workspace, determina cómo se muestra una tarjeta.

Está disponible para los complementos de Google Workspace, pero no está disponible para apps de Google Chat.

Enumeradores
DISPLAY_STYLE_UNSPECIFIED	No utilizar. No se especifica.
PEEK	El encabezado de la tarjeta aparece en la parte inferior de la barra lateral, lo que cubre parcialmente la tarjeta superior actual de la pila. Cuando haces clic en el encabezado, la tarjeta aparece en la pila de tarjetas. Si la tarjeta no tiene encabezado, se usará uno generado.
REPLACE	Valor predeterminado Para que se muestre la tarjeta, reemplaza la vista de la tarjeta superior en la pila de tarjetas.