Package google.apps.card.v1

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

Índice

Acción

Es una acción que describe el comportamiento cuando se envía el formulario. Por ejemplo, se puede invocar una secuencia de comandos de Apps Script para manejar el formulario. Si se activa la acción, los valores del formulario se envían al servidor.

Campos
function

string

Una función personalizada que se invoca cuando se hace clic en el elemento contenedor o cuando se activa de lo contrario.

Para ver un ejemplo 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 como 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 card_id 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 como SPINNER.
interaction

Interaction

Opcional. Obligatorio cuando se abre un diálogo.

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

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

Cuando se especifica un interaction, la app puede responder de formas interactivas especiales. Por ejemplo, si estableces interaction en OPEN_DIALOG, la app podrá abrir un diálogo.

Cuando se especifica, no se muestra un indicador de carga.

Compatible con apps de chat, pero no con complementos de Google Workspace. Si se especifica para un complemento, se quita toda la tarjeta y no se muestra nada en el cliente.

Parámetro de acción

Lista de los parámetros de string que se deben proporcionar cuando se invoca el método de acción. Por ejemplo, considere tres botones para posponer: posponer ahora, posponer 1 día y posponer la próxima semana. Puede utilizar el método de acción = posponer{/0}, pasar el tipo de posposición y el tiempo de posposición en la lista de parámetros de cadena.

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

Campos
key

string

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

string

El valor del parámetro.

Interacción

Opcional. Obligatorio cuando se abre un diálogo.

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

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

Cuando se especifica un interaction, la app puede responder de formas interactivas especiales. Por ejemplo, si estableces interaction en OPEN_DIALOG, la app podrá abrir un diálogo.

Cuando se especifica, no se muestra un indicador de carga.

Compatible con apps de chat, pero no con complementos de Google Workspace. Si se especifica para un complemento, se quita toda la tarjeta y no se muestra nada en el cliente.

Enumeradores
INTERACTION_UNSPECIFIED Valor predeterminado action se ejecuta con normalidad.
OPEN_DIALOG

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

Solo son compatibles con las apps de Chat en respuesta a clics de botones en mensajes de tarjetas.

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

Indicador de carga

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.

Estilo del borde

Representa el estilo de borde completo aplicado a los elementos de un widget.

Campos
type

BorderType

El tipo de borde.
strokeColor

Color

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

int32

El radio de la esquina del borde.

Tipo de borde

Representa los tipos de bordes que se aplican a los widgets.

Enumeradores
BORDER_TYPE_UNSPECIFIED No se especificó ningún valor.
NO_BORDER Valor predeterminado Sin bordes.
STROKE Resumen.

Botón

Un texto, ícono o botón de texto + ícono en el que los usuarios pueden hacer clic.

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

Actualmente, se admiten en las apps de chat (incluidos los diálogos y los mensajes de tarjeta) y los complementos de Google Workspace.

Campos
text

string

El texto que se muestra dentro del botón.
icon

Icon

Imagen del ícono. Si estableces icon y 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 se muestre texto blanco.

Si no estableces la política, el fondo de la imagen es blanco y el color de la fuente es azul.

Para el rojo, el verde y el azul, el valor de cada campo es un número float que se puede expresar de dos maneras: como un número entre 0 y 255 dividido por 255 (153/255) o como un valor entre 0 y 1 (0.6). 0 representa la ausencia de un color y 1 o 255/255 representan la presencia completa de ese color en la escala RGB.

Opcionalmente, establece alfa, que establece un nivel de transparencia usando esta ecuación:

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

Para el alfa, un valor de 1 corresponde a un color sólido, y un valor de 0 a un color completamente transparente.

Por ejemplo, el siguiente color representa un rojo semitransparente:

"color": {
   "red": 1,
   "green": 0,
   "blue": 0,
   "alpha": 0.5
}
onClick

OnClick

Obligatorio. La acción que se realiza cuando se hace clic en el botón, como abrir un hipervínculo o ejecutar una función personalizada.
disabled

bool

Si es true, el botón se muestra en un estado inactivo y no responde a las acciones del usuario.
altText

string

El texto alternativo utilizado para la accesibilidad.

Establecer texto descriptivo que permita a los usuarios saber qué hace el botón. Por ejemplo, si un botón abre un hipervínculo, puedes escribir: "Abre una nueva pestaña del navegador y navega a la documentación para desarrolladores de Google Chat en https://developers.google.com/chat".

Lista de botones

Una lista de botones dispuestos horizontalmente.

Campos
buttons[]

Button

Un arreglo de botones

Tarjeta

Las tarjetas admiten un diseño definido, elementos de IU interactivos, 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 dar el siguiente paso.

En Google Chat, las tarjetas aparecen en varios lugares:

  • Como mensajes independientes
  • Acompañar un mensaje de texto, debajo del mensaje de texto
  • Como un diálogo

El siguiente JSON de ejemplo crea una "tarjeta de contacto" que presenta:

  • Un encabezado con el nombre del contacto, el cargo y la foto del avatar.
  • Una sección con la información de contacto, incluido el texto con formato.
  • Botones en los que los usuarios pueden hacer clic para compartir el contacto o ver más o menos información

Ejemplo de tarjeta de contacto

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

El encabezado de la tarjeta. Por lo general, un encabezado contiene una imagen al inicio 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 un divisor de línea.
cardActions[]

CardAction

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

Debido a que las tarjetas de la app de Chat no tienen barra de herramientas, cardActions[] no es compatible con las apps de chat.

Por ejemplo, el siguiente JSON crea un menú de acciones de la tarjeta con las opciones de configuración y envío de comentarios:

"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

Nombre de la tarjeta Se usa como identificador de tarjeta en la navegación de la tarjeta.

Como las apps de chat no admiten la navegación con tarjetas, ignoran este campo.
fixedFooter

CardFixedFooter

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

Configurar fixedFooter sin especificar un primaryButton o secondaryButton genera un error.

Las apps de chat admiten fixedFooter en diálogos, pero no en mensajes de tarjeta.
displayStyle

DisplayStyle

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

No es compatible con apps de chat.
peekCardHeader

CardHeader

Cuando se muestra contenido contextual, el encabezado de la tarjeta de vista previa funciona como 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 apps de chat.

Acción de tarjeta

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, enviar una factura por correo electrónico o abrir la factura en un navegador.

No es compatible con apps de chat.

Campos
actionLabel

string

Etiqueta que se muestra como el elemento de menú de acciones
onClick

OnClick

La acción onClick para este elemento de acción.

Pie de página con tarjeta fijada

Un pie de página persistente (fijo) que aparece en la parte inferior de la tarjeta.

Configurar fixedFooter sin especificar un primaryButton o secondaryButton genera un error.

Las apps de chat admiten fixedFooter en diálogos, pero no en mensajes de tarjeta.

Campos
primaryButton

Button

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

Button

El botón secundario del pie de página fijo. El botón debe ser un botón de texto con texto y color establecidos. Se debe establecer primaryButton si se establece secondaryButton.

Encabezado de la tarjeta

Representa el encabezado de una tarjeta.

Campos
title

string

Obligatorio. 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, 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

La forma que se utiliza para recortar la imagen.
imageUrl

string

La URL HTTPS de la imagen en el encabezado de la tarjeta.
imageAltText

string

El texto alternativo de esta imagen que se utiliza para la accesibilidad.

Estilo de visualización

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

No es compatible con apps de chat.

Enumeradores
DISPLAY_STYLE_UNSPECIFIED No lo utilices.
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. Al hacer clic en el encabezado, aparece la tarjeta en la pila. Si la tarjeta no tiene encabezado, se usa uno generado en su lugar.
REPLACE Valor predeterminado La tarjeta se muestra reemplazando la vista de la tarjeta en la pila de tarjetas.

Sección

Una sección contiene un conjunto de widgets que se renderizan de forma vertical en el orden en que se especifican.

Campos
header

string

Texto que aparece en la parte superior de una sección Admite texto HTML simple.
widgets[]

Widget

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

bool

Indica si esta sección se puede contraer.

Las secciones contraíbles ocultan algunos o todos los widgets, pero los usuarios pueden expandir la sección para mostrar los widgets ocultos al hacer clic en Mostrar más. 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 que no se pueden contraer y que permanecen visibles incluso cuando se contrae una sección.

Por ejemplo, cuando una sección contiene cinco widgets y uncollapsibleWidgetsCount se establece en 2, siempre se muestran los dos primeros widgets y los últimos tres están contraídos de forma predeterminada. uncollapsibleWidgetsCount se tiene en cuenta solo cuando collapsible es true.

Selector de fecha y hora

Permite a los usuarios especificar una fecha, una hora o ambas.

Acepta entradas de texto de los usuarios, pero presenta un selector de fecha y hora interactivo que ayuda a los usuarios a ingresar fechas y horas con el formato correcto. Si los usuarios ingresan una fecha o un horario incorrectos, el widget muestra un error que les indica que ingresen el formato correcto.

No es compatible con apps de chat. Pronto se admitirán las apps de chat.

Campos
name

string

El nombre por el que se identifica el selector de fecha y hora en un evento de entrada del formulario.

Para obtener detalles sobre cómo trabajar con entradas de formularios, consulta Cómo recibir datos de formularios.
label

string

El texto que solicita a los usuarios ingresar una fecha, hora o fecha.

Especifica el texto que ayuda al usuario a ingresar la información que necesita tu app. Por ejemplo, si los usuarios configuran una cita, una etiqueta como "Fecha de la cita" o "Fecha y hora de la cita" podría funcionar bien.
type

DateTimePickerType

Qué tipo de entrada de fecha y hora admite el selector de fecha y hora
valueMsEpoch

int64

Valor que se muestra como valor predeterminado antes de la entrada del usuario o una entrada anterior del usuario, expresado en milisegundos (Tiempo de ciclo de entrenamiento).

Para el tipo DATE_AND_TIME, se usa el valor de ciclo de entrenamiento completo.

Para el tipo DATE_ONLY, solo se usa la fecha de la época.

Para el tipo TIME_ONLY, solo se usa la hora del ciclo de entrenamiento. Por ejemplo, para representar 3:00 a.m., configura el tiempo de época en 3 * 60 * 60 * 1000.
timezoneOffsetDate

int32

El número que representa la diferencia horaria con la zona horaria respecto de UTC. Si se configura, value_ms_epoch se muestra en la zona horaria especificada. Si no se establece, se utiliza la configuración de zona horaria del usuario del cliente.
onChangeAction

Action

Se activa cuando el usuario hace clic en Guardar o Borrar desde la interfaz del selector de fecha y hora.

Tipo de selector de fecha y hora

Qué tipo de entrada de fecha y hora admite el selector de fecha y hora

Enumeradores
DATE_AND_TIME El usuario puede seleccionar una fecha y una hora.
DATE_ONLY El usuario solo puede seleccionar una fecha.
TIME_ONLY El usuario solo puede seleccionar una hora.

Texto Decorado

Un widget que muestra texto con decoraciones opcionales, como una etiqueta arriba o debajo del texto, un ícono delante del texto, un widget de selección o un botón después del texto.

Campos
icon
(deprecated)

Icon

Dejó de estar disponible y se reemplazó por startIcon.
startIcon

Icon

El ícono que se muestra delante del texto.
topLabel

string

El texto que aparece arriba de text Siempre se trunca.
text

string

Obligatorio. El texto principal.

Admite formatos simples. Consulta Formato de texto para obtener detalles sobre el formato.
wrapText

bool

La configuración de ajuste de texto. Si es true, el texto se ajusta y se muestra en varias líneas. De lo contrario, el texto estará truncado.

Solo se aplica a text, no a topLabel ni a bottomLabel.
bottomLabel

string

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

OnClick

Cuando los usuarios hacen clic en topLabel o bottomLabel, se activa esta acción.
Campo de unión control. Un botón, interruptor, casilla de verificación o imagen que aparece a la derecha del texto en el widget decoratedText. control puede ser solo uno de los siguientes:
button

Button

Un botón en el que se puede hacer clic para activar una acción.
switchControl

SwitchControl

Se puede hacer clic en un widget de cambio 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 para cambiar de estilo o una casilla de verificación dentro de un widget decoratedText

Solo se admite en el widget decoratedText.

Campos
name

string

Nombre con el que se identifica el widget de cambio en un evento de entrada del formulario.

Para obtener detalles sobre cómo trabajar con entradas de formularios, consulta Cómo recibir datos de formularios.
value

string

El valor que ingresó un usuario, que se muestra como parte de un evento de entrada del formulario.

Para obtener detalles sobre cómo trabajar con entradas de formularios, consulta Cómo recibir datos de formularios.
selected

bool

Cuando sea true, se seleccionará el interruptor.
onChangeAction

Action

La acción que se realiza cuando se cambia el estado del interruptor, como qué función ejecutar.
controlType

ControlType

Cómo aparece el interruptor en la interfaz de usuario

Tipo de control

Cómo aparece el interruptor en la interfaz de usuario

Enumeradores
SWITCH Un interruptor para cambiar de estilo
CHECKBOX Dejó de estar disponible y se reemplazó por CHECK_BOX.
CHECK_BOX Una casilla de verificación.

Divisor

Muestra un divisor entre los widgets, una línea horizontal.

Por ejemplo, el siguiente JSON crea un divisor:

"divider": {}

Obtener respuesta de autocompletar

Una respuesta para obtener el contenedor de autocompletado, que incluye los 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 puede 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.

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

BorderStyle

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

int32

Número de columnas que se muestran en la cuadrícula Se usa un valor predeterminado si no se especifica este campo, que es diferente según dónde se muestre la cuadrícula (diálogo o complementario).
onClick

OnClick

Cada elemento de la cuadrícula individual 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 del callback.

Cuadrícula

Representa un solo elemento en el diseño de cuadrícula.

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 principal.
image

ImageComponent

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

string

El título del elemento de la cuadrícula
subtitle

string

El subtítulo del elemento de la cuadrícula.
layout

GridItemLayout

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

Diseño del elemento de cuadrícula

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

Enumeradores
GRID_ITEM_LAYOUT_UNSPECIFIED No se especificó un diseño.
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 de una tarjeta.

Admite íconos integrados y personalizados.

Campos
altText

string

Opcional. Es una descripción del ícono que se usa para la accesibilidad. Si no se especifica, se proporciona el valor predeterminado "Button". Como práctica recomendada, debes establecer una descripción útil sobre lo que muestra el ícono y, si corresponde, lo que hace. Por ejemplo, A user's account portrait o Opens a new browser tab and navigates to the Google Chat developer documentation at https://developers.google.com/chat.

Si el ícono se configura en un elemento Button, el elemento altText aparece como texto de ayuda cuando el usuario se desplaza sobre el botón. Sin embargo, si el botón también establece text, se ignora el altText del ícono.
imageType

ImageType

El estilo de recorte aplicado a la imagen. En algunos casos, aplicar un recorte CIRCLE provoca 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. 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 el ícono de un avión, especifica AIRPLANE. En el caso de un autobús, especifica BUS.

Para ver una lista completa de los íconos compatibles, consulta los í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 que se especifica mediante una URL y puede tener una acción onClick.

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, el clic activa esta acción.
altText

string

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

Componente de imagen

Representa una imagen.

Campos
imageUri

string

La URL de la imagen.
altText

string

La etiqueta de accesibilidad de la imagen.
cropStyle

ImageCropStyle

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

BorderStyle

El estilo del borde que se aplicará a la imagen.

Estilo de recorte de imagen

Representa el estilo de recorte que se aplica a una imagen.

Por ejemplo, a continuación se indica 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 debe usar si el tipo de recorte es RECTANGLE_CUSTOM.

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

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

Tipo de recorte de imagen

Representa el estilo de recorte que se aplica a una imagen.

Enumeradores
IMAGE_CROP_TYPE_UNSPECIFIED No se especificó ningún valor. No lo utilices.
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.

Vista previa del vínculo

Acción de la tarjeta que muestra una tarjeta de vista previa del vínculo y un chip inteligente en la app host.

Campos
previewCard

Card

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

string

Título que se muestra en el chip inteligente para la vista previa del vínculo Si no se configura, el chip inteligente muestra el encabezado del preview_card.

Es la acción de la tarjeta que manipula la pila de tarjetas. 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 en el lugar).

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

3) Vuelve un paso atrás sin actualizar.

  navigations : {
    popCard : true,
  }

4) Regresa varios pasos y actualiza la tarjeta.

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

5) Regresa varios pasos a 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) Aparece en la tarjeta especificada y marca también esa.

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

8) Reemplaza la tarjeta de la parte 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

La pila de tarjetas muestra todas las tarjetas, excepto la raíz.
pop

bool

Una pila de tarjetas abre una tarjeta.
popToCard

string

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

Card

La pila de tarjetas envía una tarjeta a la pila.
updateCard

Card

La pila de tarjetas actualiza la tarjeta de arriba con una nueva tarjeta y conserva los valores de los campos de 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 que se mostrará en la notificación, sin etiquetas HTML.

Al hacer clic

Representa cómo responder cuando los usuarios hacen clic en un elemento interactivo de 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, este onClick activa una acción.
openDynamicLinkAction

Action

Un complemento activa esta acción cuando la acción necesita abrir un vínculo. Esto se diferencia de la open_link anterior, ya que este necesita comunicarse con el servidor para obtener el vínculo. Por lo tanto, el cliente debe realizar un trabajo de preparación antes de que regrese la respuesta de acción de vínculo abierto.
card

Card

Se envía una tarjeta nueva a la pila después de hacer clic si se la especifica.

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

Cerrar

Lo que hace el cliente cuando se cierra un vínculo que abre una acción de 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 de cliente no admite ambos valores, OnClose tendrá prioridad.

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

Enumeradores
NOTHING Valor predeterminado No se recargará la tarjeta; no sucederá nada.
RELOAD

Vuelve a cargar la tarjeta una vez que se cierra la ventana secundaria.

Si se usa junto con OpenAs.OVERLAY, la ventana secundaria actúa como un cuadro de diálogo modal y la tarjeta superior se bloquea hasta que se cierra la ventana secundaria.

OpenA

Cuando un OnClick abre un vínculo, el cliente puede abrirlo como una ventana de tamaño completo (si es el marco que usa el cliente) o 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.

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

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

RenderActions

Un conjunto de instrucciones de procesamiento que le indica a una tarjeta que realice una acción o que la aplicación host de complemento realice una acción específica de la aplicación.

Campos
action

Action
hostAppAction

HostAppActionMarkup

Acciones controladas por apps host individuales
schema

string

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

Acción

Campos
navigations[]

Navigation

Envía, muestra o actualiza tarjetas mostradas.
notification

Notification

Muestra una notificación al usuario final.
linkPreview

LinkPreview

Mostrar una vista previa de un vínculo al usuario final.

Selección de entrada

Un widget que crea un elemento de IU con opciones para que los usuarios seleccionen. Por ejemplo, un menú desplegable o una lista de verificación.

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

Cuando necesite recopilar datos de los usuarios que coincidan con las opciones que estableció, utilice una entrada de selección. Para recopilar datos abstractos de los usuarios, usa el widget de entrada de texto.

Campos
name

string

El nombre por el que se 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 Cómo recibir datos de formularios.
label

string

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

La forma en que se muestra una opción a los usuarios. Las diferentes opciones admiten diferentes tipos de interacciones. Por ejemplo, los usuarios pueden habilitar varias casillas de verificación, pero solo pueden seleccionar un valor de un menú desplegable.

Cada entrada de selección admite un tipo de selección. Por ejemplo, los interruptores y las casillas de verificación no son compatibles.
items[]

SelectionItem

Un arreglo de los elementos seleccionados. Por ejemplo, todas las casillas de verificación seleccionadas.
onChangeAction

Action

Si se especifica, el formulario se envía cuando cambia la selección. Si no se especifica, debe especificar un botón separado que envíe el formulario.

Para obtener detalles sobre cómo trabajar con entradas de formularios, consulta Cómo recibir datos de formularios.

Elemento de selección

Un elemento seleccionable en una entrada de selección, como una casilla de verificación o un interruptor.

Campos
text

string

Es el texto que se muestra a los usuarios.
value

string

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

Para obtener detalles sobre cómo trabajar con entradas de formularios, consulta Cómo recibir datos de formularios.
selected

bool

Cuando es true, se selecciona más de un elemento. Si se selecciona más de un elemento para los botones de selección y los menús desplegables, se recibe el primer elemento seleccionado y se ignoran los posteriores.

Tipo de selección

La forma en que se muestra una opción a los usuarios. Las diferentes opciones admiten diferentes tipos de interacciones. Por ejemplo, los usuarios pueden habilitar varias casillas de verificación, pero solo pueden seleccionar un valor de un menú desplegable.

Cada entrada de selección admite un tipo de selección. Por ejemplo, los interruptores y las casillas de verificación no son compatibles.

Enumeradores
CHECK_BOX Un conjunto de casillas de verificación. Los usuarios pueden seleccionar varias casillas de verificación por cada entrada de selección.
RADIO_BUTTON Un conjunto de botones de selección Los usuarios pueden seleccionar un botón de selección por entrada de selección.
SWITCH Un conjunto de interruptores Los usuarios pueden activar varios interruptores a la vez por entrada de selección.
DROPDOWN Un menú desplegable. Los usuarios pueden seleccionar un elemento del menú desplegable por entrada de selección.

Enviar

Una respuesta a un formulario enviado, excepto cuando se recibe un contenedor de autocompletado, que contiene las acciones que debe realizar la tarjeta o la aplicación host complementaria, 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

Un conjunto de instrucciones de procesamiento que le indica a la tarjeta que realice una acción o que la aplicación host de complemento realice una acción específica de la aplicación.
stateChanged

bool

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

string

Este es un campo de esquema no-ops 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 escriben los usuarios.

Por ejemplo, un campo de entrada de texto para el lenguaje de programación puede sugerir Java, JavaScript, Python y C++. Cuando los usuarios comienzan a escribir "Jav", la lista de filtros de sugerencias muestra únicamente Java y JavaScript.

Los valores sugeridos ayudan a los usuarios a ingresar valores que pueden comprender tu app. Cuando hacen 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 la app.

Cuando se especifica, TextInput.type siempre es SINGLE_LINE, incluso si se configura como MULTIPLE_LINE.

Campos
items[]

SuggestionItem

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

Elemento de sugerencia

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 ingresarían.

TextInput

Un campo en el que los usuarios pueden ingresar texto. Admite sugerencias y acciones durante el cambio.

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

Cuando necesites recopilar datos abstractos de los usuarios, usa una entrada de texto. Para recopilar datos definidos de los usuarios, usa el widget de entrada de selección.

Campos
name

string

Nombre con el que se identifica la entrada de texto en un evento de entrada del formulario.

Para obtener detalles sobre cómo trabajar con entradas de formularios, consulta Cómo recibir datos de formularios.
label

string

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 necesita tu app. Por ejemplo, si le solicitas el nombre a alguien, pero necesitas específicamente su apellido, escribe "apellido" en lugar de "nombre".

Obligatorio si no se especifica hintText. De lo contrario, es opcional.
hintText

string

Texto que aparece debajo del campo de entrada de texto con el propósito de ayudar a los usuarios al solicitarles que ingresen un valor determinado. Este texto siempre es visible.

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

string

El valor que ingresó un usuario, que se muestra como parte de un evento de entrada del formulario.

Para obtener detalles sobre cómo trabajar con entradas de formularios, consulta Cómo recibir 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.

Algunos ejemplos de cambios incluyen un usuario que agrega el campo o que borra el 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 escriben los usuarios.

Por ejemplo, un campo de entrada de texto para el lenguaje de programación puede sugerir Java, JavaScript, Python y C++. Cuando los usuarios comienzan a escribir "Jav", la lista de filtros de sugerencias muestra únicamente Java y JavaScript.

Los valores sugeridos ayudan a los usuarios a ingresar valores que pueden comprender tu app. Cuando hacen 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 la app.

Cuando se especifica, TextInput.type siempre es SINGLE_LINE, incluso si se configura como MULTIPLE_LINE.
autoCompleteAction

Action

Opcional. Especifica qué acción realizar cuando el campo de entrada de texto brinda sugerencias a los usuarios que interactúan con él.

Si no se especifica, 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.

Compatible con los complementos de Google Workspace, pero no con las apps de Chat. Pronto se admitirán las apps de chat.

Tipo

Cómo aparece un campo de entrada de texto en la interfaz de usuario Por ejemplo, si se trata de un campo de entrada de una sola línea o de varias líneas.

Si se especifica initialSuggestions, type siempre es SINGLE_LINE, incluso si se configura como 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.

TextoParagraph

Un párrafo de texto que admite formato. Consulta Formato de texto para obtener más información.

Campos
text

string

El texto que se muestra en el widget.

Widget

Cada tarjeta se compone de widgets.

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

Campos
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 HTML simple.

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

Como 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 de selección/entrada para la fecha, la hora o la fecha y la hora.

No es compatible con apps de chat. Pronto se admitirán las apps de chat.

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 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. El número de filas está determinado por los límites superiores del número 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"
    }
  }
}

Tipo de imagen

La forma que se utiliza para recortar la imagen.

Enumeradores
SQUARE Valor predeterminado Aplica una máscara cuadrada a la imagen. Por ejemplo, una imagen de 4 x 3 se convierte en 3 x 3.
CIRCLE Aplica una máscara circular a la imagen. Por ejemplo, una imagen de 4 x 3 se convierte en un círculo con un diámetro de 3.