Package google.apps.card.v1

Índice

Acción

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

Campos
function

string

Es una función personalizada que se invoca cuando se hace clic en el elemento contenedor o se activa de otro modo.

Para ver ejemplos de uso, consulta Cómo crear tarjetas interactivas.
parameters[]

ActionParameter

Lista de parámetros de acción.
loadIndicator

LoadIndicator

Especifica el indicador de carga que muestra la acción mientras se realiza la llamada a la acción.
persistValues

bool

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 tarjetas en las apps de Chat, también debes establecer el ResponseType de la acción en UPDATE_MESSAGE y usar el mismo card_id de la tarjeta que la contenía.

Si es false, los valores del formulario se borran cuando se activa la acción. Para evitar que el usuario haga cambios mientras se procesa la acción, establece LoadIndicator en SPINNER.
interaction

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 en un mensaje de tarjeta.

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

Cuando se especifica un interaction, la app puede responder de maneras 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.

Son compatibles con las apps de Chat, pero no los complementos de Google Workspace. Si se especifica para un complemento, se quitará toda la tarjeta y no se mostrará nada en el cliente.

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 próxima semana. Puedes usar action method = snooze() y pasar el tipo de posponer y el tiempo de posposición en la lista de parámetros de cadena.

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

Campos
key

string

El nombre del parámetro de la secuencia de comandos de acción.
value

string

El valor del parámetro.

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 en un mensaje de tarjeta.

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

Cuando se especifica un interaction, la app puede responder de maneras 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.

Son compatibles con las apps de Chat, pero no los complementos de Google Workspace. Si se especifica para un complemento, se quitará toda la tarjeta y no se mostrará nada en el cliente.

Enumeradores
INTERACTION_UNSPECIFIED Valor predeterminado action se ejecuta con normalidad.
OPEN_DIALOG

Abre un diálogo, una interfaz con ventanas basada en tarjetas que usan las apps de Chat para interactuar con los usuarios.

Solo es compatible con apps de Chat en respuesta a clics en botones en mensajes de tarjetas.

No es compatible con los complementos de Google Workspace. Si se especifica para un complemento, se quitará toda la tarjeta y no se mostrará nada en el cliente.

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.

BorderStyle

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

Campos
type

BorderType

Es el tipo de borde.
strokeColor

Color

Los colores que se usarán cuando el tipo sea BORDER_TYPE_STROKE.
cornerRadius

int32

Radio de esquina del borde.

BorderType

Representa los tipos de bordes aplicados a los widgets.

Enumeradores
BORDER_TYPE_UNSPECIFIED No utilizar. No se especifica.
NO_BORDER Valor predeterminado Sin borde
STROKE Esquema

Botón

Un texto, un icono o un texto y un botón de icono en el que los usuarios pueden hacer clic. Para ver un ejemplo en las apps de Google Chat, consulta la Lista de botones.

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

Campos
text

string

Es el texto que se muestra dentro del botón.
icon

Icon

La imagen del ícono Si se configuran tanto icon como text, el ícono aparecerá antes del texto.
color

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 el rojo, el verde y el azul, el valor de cada campo es un número float que puedes expresar de una de estas dos formas: 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 con 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

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

bool

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 un texto descriptivo que informe a los usuarios lo que hace el botón. Por ejemplo, si un botón abre un hipervínculo, podrías escribir: "Abre una nueva pestaña del navegador y navega a la documentación para desarrolladores de Google Chat en https://developers.google.com/chat".

ButtonList

Una lista de botones dispuestos horizontalmente. Para ver un ejemplo en las apps de Google Chat, consulta la Lista de botones.

Campos
buttons[]

Button

Un array de botones.

Tarjeta

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

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

Si deseas obtener información para compilar tarjetas, consulta la siguiente documentación:

Ejemplo: Mensaje de tarjeta para una app de Google Chat

Ejemplo de tarjeta de contacto

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/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": "sasha@example.com",
                }
              },
              {
                "decoratedText": {
                  "startIcon": {
                    "knownIcon": "PERSON",
                  },
                  "text": "<font color=\"#80e27e\">Online</font>",
                },
              },
              {
                "decoratedText": {
                  "startIcon": {
                    "knownIcon": "PHONE",
                  },
                  "text": "+1 (555) 555-1234",
                }
              },
              {
                "buttonList": {
                  "buttons": [
                    {
                      "text": "Share",
                      "onClick": {
                        "openLink": {
                          "url": "https://example.com/share",
                        }
                      }
                    },
                    {
                      "text": "Edit",
                      "onClick": {
                        "action": {
                          "function": "goToView",
                          "parameters": [
                            {
                              "key": "viewType",
                              "value": "EDIT",
                            }
                          ],
                        }
                      }
                    },
                  ],
                }
              },
            ],
          },
        ],
      },
    }
  ],
}
Campos
header

CardHeader

Es el encabezado de la tarjeta. Por lo general, un encabezado contiene una imagen principal y un título. Los encabezados siempre aparecen en la parte superior de una tarjeta.
sections[]

Section

Contiene una colección de widgets. Cada sección tiene su propio encabezado opcional. Las secciones están separadas visualmente por una línea divisoria. Para ver un ejemplo de las apps de Google Chat, consulta la sección de tarjetas.
sectionDividerStyle

DividerStyle

El estilo divisor entre las secciones
cardActions[]

CardAction

Las acciones de la tarjeta. Las acciones se agregan al menú de la barra de herramientas de la tarjeta.

Como las tarjetas de la app de Chat no tienen una barra de herramientas, cardActions[] no es compatible con las apps de Chat.

Por ejemplo, el siguiente JSON construye un menú de acciones con tarjetas 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

Es el nombre de la tarjeta. Se usa como identificador de tarjeta en la navegación con tarjetas.

Dado que las apps de Chat no admiten la navegación por tarjetas, ignoran este campo.
fixedFooter

CardFixedFooter

Es el pie de página fijo que se muestra en la parte inferior de esta tarjeta.

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

Es compatible con los complementos de Google Workspace y las apps de Chat. En el caso de las apps de Chat, puedes usar pies de página fijos en los diálogos, pero no los mensajes de tarjetas.
displayStyle

DisplayStyle

En los complementos de Google Workspace, establece las propiedades de visualización de peekCardHeader.

No es compatible con las apps de Chat.
peekCardHeader

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.

No es compatible con las apps de Chat.

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.

No es compatible con las apps de Chat.

Campos
actionLabel

string

Etiqueta que se muestra como elemento del menú de acciones.
onClick

OnClick

Es la acción onClick para este elemento de acción.

CardFixedFooter

Un pie de página persistente (adhesivo) que aparece en la parte inferior de la tarjeta Para ver un ejemplo de las apps de Google Chat, consulta Pie de página de tarjetas.

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

Es compatible con los complementos de Google Workspace y las apps de Chat. En el caso de las apps de Chat, puedes usar pies de página fijos en los diálogos, pero no los mensajes de tarjetas.

Campos
primaryButton

Button

El botón principal del pie de página fijo. El botón debe ser de texto con texto y colores establecidos.
secondaryButton

Button

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

CardHeader

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

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

El subtítulo del encabezado de la tarjeta. Si se especifica, aparece en su propia línea debajo de title.
imageType

ImageType

Forma que se usa para recortar la imagen.
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 usa con fines de accesibilidad.

DisplayStyle

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

No es compatible con las apps de 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 y 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 La tarjeta se muestra reemplazando la vista de la tarjeta superior en la pila de tarjetas.

DividerStyle

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

Enumeradores
DIVIDER_STYLE_UNSPECIFIED No utilizar. No se especifica.
SOLID_DIVIDER Opción predeterminada. Renderiza una división sólida entre las secciones.
NO_DIVIDER Si se establece, no se renderiza ningún divisor entre las secciones.

Sección

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

Campos
header

string

Texto que aparece en la parte superior de una sección. Admite texto simple en formato HTML. Para obtener más información sobre cómo dar formato al texto, consulta Dar formato al texto en las apps de Google Chat y Dar formato al texto en complementos de Google Workspace.
widgets[]

Widget

Todos los widgets de la sección. Debe contener al menos un widget.
collapsible

bool

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

int32

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 uncollapsibleWidgetsCount se configura como 2, los primeros dos widgets se muestran siempre y los últimos tres se contraen de forma predeterminada. El uncollapsibleWidgetsCount solo se tiene en cuenta cuando collapsible es true.

Columnas

El widget Columns muestra hasta 2 columnas en un mensaje o diálogo de tarjeta. 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 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 misma 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 en paralelo. Puedes personalizar el ancho de cada columna con el campo HorizontalSizeStyle. Si el ancho de la pantalla del usuario es demasiado angosto, la segunda columna se ajusta 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.

Son compatibles con las apps de Chat, pero no los complementos de Google Workspace.

Campos
columnItems[]

Column

Un array de columnas. Puedes incluir hasta 2 columnas en una tarjeta o un diálogo.

Columna

Una columna.

Campos
horizontalSizeStyle

HorizontalSizeStyle

Especifica cómo una columna completa el ancho de la tarjeta.
horizontalAlignment

HorizontalAlignment

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

VerticalAlignment

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

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 completa el ancho de la tarjeta. El ancho de cada columna depende del HorizontalSizeStyle y del ancho de los widgets dentro de la columna.

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 en FILL_AVAILABLE_SPACE, cada columna ocupa 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.

VerticalAlignment

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

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.

Campos

Campo de unión data.

data puede ser una de las siguientes opciones:
textParagraph

TextParagraph

TextParagraph widget
image

Image

Image widget
decoratedText

DecoratedText

DecoratedText widget
buttonList

ButtonList

ButtonList widget
textInput

TextInput

TextInput widget
selectionInput

SelectionInput

SelectionInput widget
dateTimePicker

DateTimePicker

DateTimePicker widget

DateTimePicker

Permite que los usuarios ingresen una fecha, una hora o ambas. Para ver un ejemplo en las apps de Google Chat, consulta Selector de 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.

Campos
name

string

Es el nombre con el que se identifica el DateTimePicker en un evento de entrada de formulario.

Para obtener información detallada sobre cómo trabajar con entradas de formularios, consulta Recibe datos de formularios.
label

string

Es el texto que solicita a los usuarios que ingresen una fecha, una hora o una fecha y hora. Por ejemplo, si los usuarios están programando una cita, usa una etiqueta como Appointment date o Appointment date and time.
type

DateTimePickerType

Indica si el widget admite ingresar una fecha, una hora o la fecha y hora.
valueMsEpoch

int64

Es el valor predeterminado que se muestra en el widget, expresado en milisegundos desde la época Unix.

Especifica el valor según el tipo de selector (DateTimePickerType):

  • DATE_AND_TIME: 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: Una hora en UTC. Por ejemplo, para representar las 12:00 p.m., usa 43200000 (o 12 * 60 * 60 * 1000).
timezoneOffsetDate

int32

El número que representa el desplazamiento de zona horaria desde UTC, en minutos. Si se configura, value_ms_epoch se muestra en la zona horaria especificada. Si no la estableces, el valor se establecerá de forma predeterminada en la configuración de zona horaria del usuario.
onChangeAction

Action

Se activa cuando el usuario hace clic en Guardar o Borrar en la interfaz de 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.

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

DecoratedText

Un widget que muestra texto con decoraciones opcionales, como una etiqueta encima 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 Texto decorado.

Campos
icon
(deprecated)

Icon

Se dio de baja y se reemplazó por startIcon.
startIcon

Icon

El ícono que se muestra delante del texto.
topLabel

string

El texto que aparece sobre text. Siempre trunca.
text

string

Obligatorio. Es el texto principal.

Admite formatos simples. Para obtener más información sobre cómo dar formato al texto, consulta Dar formato al texto en las apps de Google Chat y Dar formato al texto en complementos de Google Workspace.
wrapText

bool

La 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 a bottomLabel.
bottomLabel

string

El texto que aparece debajo de text. Siempre se ajusta.
onClick

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 uno de los siguientes:
button

Button

Es un botón en el que un usuario puede hacer clic para activar una acción.
switchControl

SwitchControl

Un widget de interruptor en el que un usuario puede hacer clic para cambiar su estado y activar una acción
endIcon

Icon

Un ícono que se muestra después del texto.

Admite íconos integrados y personalizados.

SwitchControl

Un interruptor de estilo de activación o una casilla de verificación dentro de un widget decoratedText

Solo es compatible con el widget decoratedText.

Campos
name

string

Es el nombre con el que se identifica el widget de interruptor en un evento de entrada de formulario.

Para obtener información detallada sobre cómo trabajar con entradas de formularios, consulta Recibe datos de formularios.
value

string

Es el valor ingresado por un usuario que se muestra como parte de un evento de entrada de formulario.

Para obtener información detallada sobre cómo trabajar con entradas de formularios, consulta Recibe datos de formularios.
selected

bool

Cuando es true, se selecciona el interruptor.
onChangeAction

Action

Es la acción que se debe realizar cuando cambia el estado del interruptor, por ejemplo, qué función se debe ejecutar.
controlType

ControlType

Cómo aparece el interruptor en la interfaz de usuario

ControlType

Cómo aparece el interruptor en la interfaz de usuario

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

Divisor

Este tipo no tiene campos.

Muestra un divisor entre los widgets como una línea horizontal. Para ver un ejemplo en las apps de Google Chat, consulta Divisor.

Por ejemplo, el siguiente JSON crea un divisor:

"divider": {}

GetAutocompletionResponse

Una respuesta para obtener un contenedor de autocompletado, que incluye elementos necesarios a fin de mostrar elementos de autocompletado para el campo de texto. Por ejemplo:

{
  "autoComplete": {
    "items": [
      {
        "text": "C++"
      },
      {
        "text": "Java"
      },
      {
        "text": "JavaScript"
      },
      {
        "text": "Python"
      }
    ]
  }
}
Campos
autoComplete

Suggestions
schema

string

Este es un campo de esquema no-ops que podría estar presente en el lenguaje de marcado para la verificación de sintaxis.

Cuadrícula

Muestra una cuadrícula con una colección de elementos. Los elementos solo pueden incluir texto o imágenes. Para las 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 Cuadrícula.

Una cuadrícula admite cualquier cantidad de columnas y elementos. El número de filas se determina por los elementos dividido por 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.

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"
    }
  }
}
Campos
title

string

El texto que se muestra en el encabezado de la cuadrícula.
items[]

GridItem

Los elementos que se mostrarán en la cuadrícula.
borderStyle

BorderStyle

El estilo de borde que se aplicará a cada elemento de la cuadrícula.
columnCount

int32

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 será diferente según el lugar en el que se muestre la cuadrícula (diálogo o complementario).
onClick

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.

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

ImageComponent

Imagen que se muestra en el elemento de la cuadrícula.
title

string

Título del elemento de la cuadrícula.
subtitle

string

Subtítulo del elemento de la cuadrícula.
layout

GridItemLayout

Es el diseño que se usará para el elemento de cuadrícula.

GridItemLayout

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

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.

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

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 para lo que muestra el ícono y, si corresponde, para 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 de ayuda cuando el usuario coloca el cursor sobre el botón. Sin embargo, si el botón también establece text, se ignora el altText del ícono.
imageType

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 integrado.
Campo de unión icons. Es el ícono que se muestra en el widget de la tarjeta. Las direcciones (icons) solo pueden 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

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.

Imagen

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

Campos
imageUrl

string

La URL HTTPS que aloja la imagen.

Por ejemplo:

https://developers.google.com/chat/images/quickstart-app-avatar.png
onClick

OnClick

Cuando un usuario hace clic en la imagen, se activa esta acción.
altText

string

El texto alternativo de esta imagen que se usa con fines de accesibilidad.

ImageComponent

Representa una imagen.

Campos
imageUri

string

La URL de la imagen.
altText

string

Es la etiqueta de accesibilidad de la imagen.
cropStyle

ImageCropStyle

El estilo de recorte que se aplicará a la imagen.
borderStyle

BorderStyle

Estilo de borde que se aplicará a la imagen.

ImageCropStyle

Representa el estilo de recorte aplicado a una imagen.

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
}
Campos
type

ImageCropType

El tipo de recorte.
aspectRatio

double

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.

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. Establece la relación de aspecto personalizada con aspectRatio.
RECTANGLE_4_3 Aplica un recorte rectangular con una relación de aspecto de 4:3.

LinkPreview

Acción de tarjeta que ofrece una vista previa de un vínculo de terceros mostrando una tarjeta y un chip inteligente. Para obtener más información, consulta Cómo obtener una vista previa de vínculos con chips inteligentes.

Por ejemplo, el siguiente JSON muestra un título único para la vista previa del vínculo y su chip inteligente, y una tarjeta de vista previa con un encabezado y una descripción de texto:

{
  "action": {
    "linkPreview": {
      "title": "Smart chip title",
      "linkPreviewTitle": "Link preview title",
      "previewCard": {
        "header": {
          "title": "Preview card header",
        },
        "sections": [
          {
            "widgets": [
              {
                "textParagraph": {
                  "text": "Description of the link."
                }
              }
            ]
          }
        ]
      }
    }
  }
}

En el ejemplo, se muestra la siguiente vista previa del vínculo:

Ejemplo de vista previa del vínculo

Campos
previewCard

Card

Es una tarjeta que muestra información sobre un vínculo de un servicio de terceros.
title

string

Es el título que se muestra en el chip inteligente para la vista previa del vínculo. Si no la estableces, el chip inteligente mostrará el encabezado de preview_card.
linkPreviewTitle

string

Título que se muestra en la vista previa del vínculo. Si no la estableces, la vista previa del vínculo muestra el encabezado de preview_card.

Es una acción de cartas que manipula la pila de cartas. Por ejemplo:

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

 navigations : {
    pushCard : CARD
  }

2) Actualiza la tarjeta en la parte superior de la pila (actualización actual).

  navigations : {
    popCard : true,
  }, {
    pushCard : CARD
  }

3) Retrocede un paso sin actualizar.

  navigations : {
    popCard : true,
  }

4) Regresa a los pasos anteriores y actualiza la tarjeta.

  navigations : {
    popCard : true,
  }, ... {
    pushCard : CARD
  }

5) Regresa varios pasos hasta un CARD_NAME definido.

  navigations : {
    popToCardName : CARD_NAME,
  }, {
    pushCard : CARD
  }

6) Regresa a la raíz y actualiza la tarjeta.

  navigations : {
    popToRoot : true
  }, {
    pushCard : CARD
  }

7) Dirígete a la tarjeta especificada y sácala también.

navigations : { popToCardName : CARD_NAME }, { popCard : true, }

8) Reemplaza la tarjeta superior por una nueva.

  navigations : {
    updateCard : CARD
  }
Campos

Campo de unión navigate_action.

navigate_action puede ser una de las siguientes opciones:
popToRoot

bool

Con la pila de tarjetas, se quitan todas las tarjetas, excepto la raíz.
pop

bool

La pila de tarjetas muestra una tarjeta.
popToCard

string

La pila de tarjetas muestra todas las tarjetas que se encuentran encima de la tarjeta especificada con el nombre de tarjeta determinado.
pushCard

Card

La pila de cartas empuja una carta a la pila de cartas.
updateCard

Card

La pila de tarjetas actualiza la tarjeta superior con una tarjeta nueva y conserva los valores de los campos del formulario completados. Para un campo no equivalente, se descarta el valor.

Notificación

Acción de tarjeta que muestra una notificación en la app host.

Campos
text

string

Texto sin formato para mostrar en la notificación, sin etiquetas HTML.

OnClick

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

Campos

Campo de unión data.

data puede ser una de las siguientes opciones:
action

Action

Si se especifica, esta onClick activa una acción.
openDynamicLinkAction

Action

Un complemento activa esta acción cuando la acción necesita abrir un vínculo. Esto difiere del open_link anterior en que debe comunicarse con el servidor para obtener el vínculo. Por lo tanto, se requiere un poco de trabajo de preparación para que el cliente web lo haga antes de que regrese la respuesta de acción de vínculo abierto. Son compatibles con los complementos de Google Workspace, pero no con las apps de Google Chat.
card

Card

Si se especifica, se envía una nueva tarjeta a la pila de tarjetas después de hacer clic.

Son compatibles con los complementos de Google Workspace, pero no con las apps de Google Chat.

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.

Son compatibles con los complementos de Google Workspace, pero no con las 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 cierra la ventana secundaria.

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 cliente y es posible que se ignore el valor seleccionado si el cliente no lo admite. FULL_SIZE es compatible con todos los clientes.

Son compatibles con los complementos de Google Workspace, pero no con las apps de Google Chat.

Enumeradores
FULL_SIZE El vínculo se abrirá 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.

RenderActions

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

Campos
action

Action
hostAppAction

HostAppActionMarkup

Acciones administradas por apps de host individuales
schema

string

Este es un campo de esquema no-ops que podría estar presente en el lenguaje de marcado para la verificación de sintaxis.

Acción

Campos
navigations[]

Navigation

Enviar, extraer o actualizar las tarjetas que se muestran
notification

Notification

Muestra una notificación al usuario final.
linkPreview

LinkPreview

Muestra una vista previa del vínculo al usuario final.

SelectionInput

Es 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 Entrada de selección.

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

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

Campos
name

string

Es el nombre que identifica la entrada de selección en un evento de entrada de formulario.

Para obtener información detallada sobre cómo trabajar con entradas de formularios, consulta Recibe datos de formularios.
label

string

El texto que aparece sobre el campo de entrada de selección en la interfaz de usuario.

Especifica un texto que ayude al usuario a ingresar la información que necesita tu app. 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

SelectionType

Es el tipo de elementos que se muestran a los usuarios en un widget de 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 de un menú desplegable.
items[]

SelectionItem

Es un array de elementos seleccionables. Por ejemplo, un array de botones de selección o casillas de verificación. Admite hasta 100 elementos.
onChangeAction

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 información detallada sobre cómo trabajar con entradas de formularios, consulta Recibe datos de formularios.
multiSelectMaxSelectedItems

int32

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 artículo. Si no se especifica, el valor predeterminado es 3 elementos.
multiSelectMinQueryLength

int32

En los menús de selección múltiple, la cantidad de caracteres de texto que un usuario ingresa antes de que la app de Chat consulte se autocompleta y muestra los elementos sugeridos en el menú.

Si no se especifica, el valor predeterminado es 0 caracteres para las fuentes de datos estáticas y 3 caracteres para las fuentes de datos externas.
Campo de unión multi_select_data_source. Solo para apps de Chat. Para un menú de selección múltiple, es la fuente de datos que propaga los elementos de selección. Las direcciones (multi_select_data_source) solo pueden ser una de las siguientes opciones:
externalDataSource

Action

Una fuente de datos externa, como una base de datos relacional.
platformDataSource

PlatformDataSource

Una fuente de datos de Google Workspace.

PlatformDataSource

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

Campos
Campo de unión data_source. Es la fuente de datos. Las direcciones (data_source) solo pueden ser una de las siguientes opciones:
commonDataSource

CommonDataSource

Una fuente de datos que comparten todas las aplicaciones de Google Workspace, como los usuarios de una organización de Google Workspace.
hostAppDataSource

HostAppDataSourceMarkup

Una fuente de datos exclusiva de una aplicación host de Google Workspace, como los espacios en Google Chat

CommonDataSource

Solo para apps de Chat. Una fuente de datos compartida por todas las aplicaciones de Google Workspace

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

SelectionItem

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

Campos
text

string

Es el texto que identifica o describe el elemento a los usuarios.
value

string

El valor asociado con este elemento. El cliente debe usar esto como un valor de entrada de formulario.

Para obtener información detallada sobre cómo trabajar con entradas de formularios, consulta Recibe datos de formularios.
selected

bool

Indica si el elemento está seleccionado de forma predeterminada. Si la entrada de selección solo acepta un valor (como 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 se muestra junto al campo text del elemento. Admite archivos PNG y JPEG. Debe ser una URL HTTPS. Por ejemplo, https://developers.google.com/chat/images/quickstart-app-avatar.png.
bottomText

string

Para los menús de selección múltiple, una descripción de texto o etiqueta que se muestra debajo del campo text del elemento.

SelectionType

Es el formato de los elementos que pueden seleccionar los usuarios. Las diferentes opciones admiten diferentes 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 admite la combinación de casillas e interruptores.

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

Son compatibles con las apps de Chat, pero no los complementos de Google Workspace.

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 sugerirá automáticamente.

Para propagar los elementos de un menú de selección múltiple, puedes usar 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 a Google Workspace.

Para ver ejemplos de cómo implementar menús de selección múltiple, consulta la página del widget de SelectionInput.

SubmitFormResponse

Una respuesta a un formulario que se envía que no es obtener un contenedor de autocompletado, que contiene las acciones que la tarjeta debe realizar o la app host de complementos, y si cambió el estado de la tarjeta Por ejemplo:

{
  "renderActions": {
    "action": {
      "notification": {
        "text": "Email address is added: salam.heba@example.com"
      }
    },
    "hostAppAction": {
      "gmailAction": {
        "openCreatedDraftAction": {
          "draftId": "msg-a:r-79766936926021702",
          "threadServerPermId": "thread-f:15700999851086004"
        }
      }
    }
  }
}
Campos
renderActions

RenderActions

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

bool

Indica si cambió el estado de las tarjetas y si los datos de las tarjetas existentes están inactivos.
schema

string

Este es un campo de esquema no-op que puede estar presente en el lenguaje de marcado para la verificación de sintaxis.

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 coincidir con lo que escribieron los usuarios.

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 muestra Java y JavaScript.

Los valores sugeridos ayudan a guiar a los usuarios para que ingresen valores que la 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 establece en MULTIPLE_LINE.

Campos
items[]

SuggestionItem

Una lista de sugerencias usadas para las recomendaciones de autocompletar en los campos de entrada de texto.

SuggestionItem

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

Campos

Campo de unión content.

content puede ser 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.

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 Entrada de texto.

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

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

Campos
name

string

El nombre con el que se identifica la entrada de texto en un evento de entrada de formulario.

Para obtener información detallada sobre cómo trabajar con entradas de formularios, consulta Recibe datos de formularios.
label

string

El texto que aparece sobre el campo de entrada de texto en la interfaz de usuario.

Especifica un texto que ayude al usuario a ingresar la información que necesita tu app. Por ejemplo, si solicitas 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 indicándoles que ingresen un valor determinado Este texto siempre es visible.

Es obligatorio si no se especifica label. De lo contrario, es opcional.
value

string

Es el valor ingresado por un usuario que se muestra como parte de un evento de entrada de formulario.

Para obtener información detallada sobre cómo trabajar con entradas de formularios, consulta Recibe datos de formularios.
type

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

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 se pueden realizar incluyen ejecutar una función personalizada o abrir un diálogo en Google Chat.
initialSuggestions

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 coincidir con lo que escribieron los usuarios.

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 para que ingresen valores que la 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 establece en MULTIPLE_LINE.
autoCompleteAction

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.

Son compatibles con los complementos de Google Workspace, pero no con las 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.

Son compatibles con las apps de Google Chat, pero no los complementos de Google Workspace.

Tipo

Cómo aparece un campo de entrada de texto en la interfaz de usuario Por ejemplo, si es 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 establece en MULTIPLE_LINE.

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.

TextParagraph

Un párrafo de texto que admite formato. Para ver un ejemplo en las apps de Google Chat, consulta Párrafo de texto. Para obtener más información sobre cómo dar formato al texto, consulta Dar formato al texto en las apps de Google Chat y Dar formato al texto en complementos de Google Workspace.

Campos
text

string

El texto que se muestra en el widget

Widget

Cada tarjeta está compuesta por widgets.

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

Campos
horizontalAlignment

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. Las direcciones (data) solo pueden ser una de las siguientes opciones:
textParagraph

TextParagraph

Muestra un párrafo de texto. Admite texto simple en formato HTML. Para obtener más información sobre cómo dar formato al texto, consulta Dar formato al texto en las apps de Google Chat y Dar 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

Image

Muestra una imagen.

Por ejemplo, el siguiente JSON crea una imagen con texto alternativo:

"image": {
  "imageUrl":
  "https://developers.google.com/chat/images/quickstart-app-avatar.png",
  "altText": "Chat app avatar"
}
decoratedText

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": "sasha@example.com",
  "bottomLabel": "This is a new Email address!",
  "switchControl": {
    "name": "has_send_welcome_email_to_sasha",
    "selected": false,
    "controlType": "CHECKBOX"
  }
}
buttonList

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 vínculo:

"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

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"
}

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

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

DateTimePicker

Muestra un widget que permite a los usuarios ingresar una fecha, una hora o una y otra 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

Divider

Muestra una línea divisoria horizontal entre los widgets.

Por ejemplo, el siguiente JSON crea un divisor:

"divider": {
}
grid

Grid

Muestra 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 mediante los límites superiores de la cantidad de elementos dividido 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.

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

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 que contienen 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"
          }
        }
      ]
    }
  ]
}

HorizontalAlignment

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

Enumeradores
HORIZONTAL_ALIGNMENT_UNSPECIFIED No utilizar. No se especifica.
START Valor predeterminado Alinea los widgets con la posición inicial de la columna. Para los diseños de izquierda a derecha, se alinea a la izquierda. Para los 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 con la posición final de la columna. Para diseños de izquierda a derecha, alinea los widgets a la derecha. Para los diseños de derecha a izquierda, se alinean los widgets a la izquierda.

ImageType

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.