Tarjeta
Las tarjetas admiten un diseño definido, elementos de IU interactivos, 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 un paso más.
En Google Chat, las tarjetas aparecen en varios lugares:
- Como mensajes independientes
- Acompaña a un mensaje de texto debajo del mensaje.
- Como un diálogo
El siguiente JSON de ejemplo crea una “tarjeta de contacto” que presenta:
- Un encabezado con el nombre, el cargo y la foto de avatar del contacto.
- 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.
{
"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",
}
],
}
}
},
],
}
},
],
},
],
},
}
],
}
Representación JSON |
---|
{ "header": { object ( |
Campos | |
---|---|
header
|
El encabezado de la tarjeta Por lo general, los encabezados contienen una imagen principal y un título. Los encabezados siempre aparecen en la parte superior de una tarjeta. |
sections[]
|
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[]
|
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 app de Chat no tienen barra de herramientas,
Por ejemplo, en el siguiente JSON, se construye un menú de acción de tarjeta con las opciones
|
name
|
Es el nombre de la tarjeta. Se usa como identificador de tarjeta en la navegación de tarjetas. Como las apps de chat no admiten la navegación con tarjetas, ignoran este campo. |
fixedFooter
|
El pie de página fijo que se muestra en la parte inferior de esta tarjeta.
Si se configura Es compatible con los complementos de Google Workspace y las aplicaciones de Chat. En el caso de las apps de Chat, puedes usar pies de página fijos en diálogos, pero no en mensajes de tarjetas. |
displayStyle
|
En los complementos de Google Workspace, establece las propiedades de visualización del No es compatible con las apps de chat. |
peekCardHeader
|
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 entre las tarjetas de la página principal y las contextuales. No es compatible con las apps de chat. |
Encabezado de la tarjeta
Representa un encabezado de tarjeta.
Representación JSON |
---|
{
"title": string,
"subtitle": string,
"imageType": enum (
|
Campos | |
---|---|
title
|
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 de ellos ocupa una línea. Si solo se especifica el título, ocupará ambas líneas. |
subtitle
|
Es el subtítulo del encabezado de la tarjeta. Si se especifica, aparece en su propia línea debajo del elemento |
imageType
|
La forma que se usa para recortar la imagen. |
imageUrl
|
La URL HTTPS de la imagen en el encabezado de la tarjeta. |
imageAltText
|
El texto alternativo de esta imagen que se usa para la accesibilidad. |
Tipo de imagen
La forma que se usa para recortar la imagen.
Enumeradores | |
---|---|
SQUARE
|
Valor predeterminado Aplica una máscara cuadrada a la imagen. Por ejemplo, una imagen de 4 × 3 se convierte en 3 × 3. |
CIRCLE
|
Aplica una máscara circular a la imagen. Por ejemplo, una imagen de 4 × 3 se convierte en un círculo con un diámetro de 3. |
Sección
Una sección contiene un conjunto de widgets que se renderizan de forma vertical, en el orden en que se especifican.
Representación JSON |
---|
{
"header": string,
"widgets": [
{
object (
|
Campos | |
---|---|
header
|
Texto que aparece en la parte superior de una sección Admite texto simple con formato HTML. Si deseas obtener más información sobre cómo dar formato al texto, consulta Da formato al texto en apps de Google Chat y Cómo dar formato al texto en los complementos de Google Workspace. |
widgets[]
|
Todos los widgets de la sección Debe tener al menos un widget. |
collapsible
|
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 a fin de revelar los widgets ocultos si hacen clic en Mostrar más. Los usuarios pueden volver a ocultar los widgets si hacen clic en Mostrar menos.
Para determinar qué widgets están ocultos, especifica |
uncollapsibleWidgetsCount
|
La cantidad de widgets contraíbles que permanecen visibles incluso cuando se contrae una sección.
Por ejemplo, cuando una sección contiene cinco widgets y |
Widget
Cada tarjeta se compone de widgets.
Un widget es un objeto compuesto que puede representar uno de texto, imágenes, botones y otros tipos de objetos.
Representación JSON |
---|
{ "horizontalAlignment": enum ( |
Campos | |
---|---|
horizontalAlignment
|
Especifica si los widgets se alinean a la izquierda, a la derecha o al centro de una columna. |
Campo de unión data . Un widget solo puede tener uno de los siguientes elementos. Puedes usar varios campos de widgets para mostrar más elementos.
data puede ser solo una de las siguientes opciones:
|
|
textParagraph
|
Muestra un párrafo de texto. Admite texto simple con formato HTML. Si deseas obtener más información sobre cómo dar formato al texto, consulta Da formato al texto en apps de Google Chat y Cómo dar formato al texto en los complementos de Google Workspace. Por ejemplo, el siguiente JSON crea un texto en negrita:
|
image
|
Muestra una imagen. Por ejemplo, el siguiente JSON crea una imagen con texto alternativo:
|
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:
|
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:
|
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:
Otro ejemplo: el siguiente JSON crea una entrada de texto para un lenguaje de programación con sugerencias estáticas:
|
selectionInput
|
Muestra un control de selección que les 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:
|
dateTimePicker
|
Muestra un widget que permite a los usuarios ingresar una fecha, una hora o una fecha y hora. Por ejemplo, el siguiente JSON crea un selector de fecha y hora para programar una cita:
|
divider
|
Muestra un divisor de línea horizontal entre los widgets. Por ejemplo, el siguiente JSON crea un divisor:
|
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 según los límites superiores de los elementos divididos por la cantidad 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:
|
columns
|
Muestra hasta 2 columnas.
Para incluir más de 2 columnas o usar filas, usa el widget Por ejemplo, el siguiente JSON crea 2 columnas que contienen párrafos de texto:
|
TextParagraph.
Un párrafo de texto que admite el formato. Si deseas obtener más información sobre cómo dar formato al texto, consulta Da formato al texto en apps de Google Chat y Cómo dar formato al texto en los complementos de Google Workspace.
Representación JSON |
---|
{ "text": string } |
Campos | |
---|---|
text
|
El texto que se muestra en el widget |
Imagen
Es una imagen que se especifica mediante una URL y que puede tener una acción onClick
.
Representación JSON |
---|
{
"imageUrl": string,
"onClick": {
object (
|
Campos | |
---|---|
imageUrl
|
Es la URL HTTPS que aloja la imagen. Por ejemplo:
|
onClick
|
Cuando un usuario hace clic en la imagen, el clic activa esta acción. |
altText
|
El texto alternativo de esta imagen que se usa para la accesibilidad. |
Al hacer clic
Representa cómo responder cuando los usuarios hacen clic en un elemento interactivo en una tarjeta, como un botón.
Representación JSON |
---|
{ // Union field |
Campos | |
---|---|
Campo de unión
|
|
action
|
Si se especifica, |
openLink
|
Si se especifica, |
openDynamicLinkAction
|
Un complemento activa esta acción cuando la acción necesita abrir un vínculo. Esto se diferencia del |
card
|
Se envía una nueva tarjeta a la pila después de hacer clic, si se especifica. Es compatible con complementos de Google Workspace, pero no con apps de Chat. |
Acción
Es 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 manejar el formulario. Si se activa la acción, los valores del formulario se envían al servidor.
Representación JSON |
---|
{ "function": string, "parameters": [ { object ( |
Campos | |
---|---|
function
|
Una función personalizada para invocar cuando se hace clic en el elemento contenedor o cuando se lo activa Para ver ejemplos de uso, consulta Cómo crear tarjetas interactivas. |
parameters[]
|
Lista de parámetros de acción. |
loadIndicator
|
Especifica el indicador de carga que muestra la acción mientras realiza la llamada a la acción. |
persistValues
|
Indica si los valores del formulario se conservan después de la acción. El valor predeterminado es
Si es
Si es |
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 un botón del mensaje de una tarjeta
Si no se especifica, la app responde mediante la ejecución de un
Al especificar un Es 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ámetroActionAction
Lista de los parámetros de string para proporcionar cuando se invoca el método de acción. Por ejemplo, piensa en 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 y el tiempo de la alerta pospuesta en la lista de parámetros de string.
Para obtener más información, consulta CommonEventObject
.
Representación JSON |
---|
{ "key": string, "value": string } |
Campos | |
---|---|
key
|
El nombre del parámetro de la secuencia de comandos de acción. |
value
|
El valor del parámetro. |
Indicador de carga
Especifica el indicador de carga que muestra la acción mientras 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. |
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 un botón del mensaje de una tarjeta
Si no se especifica, la app responde mediante la ejecución de un action
, como abrir un vínculo o una función, con normalidad.
Al especificar un interaction
, la app puede responder de formas interactivas especiales. Por ejemplo, si se configura interaction
en OPEN_DIALOG
, la app puede abrir un diálogo.
Cuando se especifica, no se muestra un indicador de carga.
Es 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 es compatible con 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. |
OpenLink
Representa un evento onClick
que abre un hipervínculo.
Representación JSON |
---|
{ "url": string, "openAs": enum ( |
Campos | |
---|---|
url
|
La URL que se debe abrir. |
openAs
|
Cómo abrir un vínculo No es compatible con las apps de chat. |
onClose
|
Indica si el cliente olvida un vínculo después de abrirlo o lo observa hasta que se cierra la ventana. No es compatible con las apps de chat. |
OpenAs
Cuando una acción de 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.
Es compatible con complementos de Google Workspace, pero no con apps de Chat.
Enumeradores | |
---|---|
FULL_SIZE
|
El vínculo se abre como una ventana de tamaño completo (si ese es el marco que usa el cliente). |
OVERLAY
|
El vínculo se abre como una superposición, como una ventana emergente. |
Al cierre
Qué hace el cliente cuando se cierra un vínculo que abre 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 del cliente no puede admitir ambos valores, OnClose
tiene prioridad.
Es compatible con complementos de Google Workspace, pero no con apps de Chat.
Enumeradores | |
---|---|
NOTHING
|
Valor predeterminado La tarjeta no se vuelve a cargar, no sucede nada. |
RELOAD
|
Vuelve a cargar la tarjeta después de que se cierra la ventana secundaria.
Si se usa junto con |
Texto Decorado
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.
Representación JSON |
---|
{ "icon": { object ( |
Campos | |
---|---|
icon
|
Dejó de estar disponible y se reemplazó por |
startIcon
|
El ícono que se muestra delante del texto. |
topLabel
|
El texto que aparece arriba de |
text
|
Obligatorio. El texto principal Admite un formato simple. Si deseas obtener más información sobre cómo dar formato al texto, consulta Da formato al texto en apps de Google Chat y Cómo dar formato al texto en los complementos de Google Workspace. |
wrapText
|
Configuración de ajuste de texto. Si es
Solo se aplica a |
bottomLabel
|
El texto que aparece debajo de |
onClick
|
Esta acción se activa cuando los usuarios hacen clic en |
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 una de las siguientes opciones:
|
|
button
|
Un botón en el que un usuario puede hacer clic para activar una acción |
switchControl
|
Un widget de interruptor en el que un usuario puede hacer clic para cambiar su estado y activar una acción. |
endIcon
|
Un ícono que se muestra después del texto Admite íconos integrados y personalizados. |
Ícono
Ícono que se muestra en un widget de una tarjeta
Admite íconos integrados y personalizados.
Representación JSON |
---|
{ "altText": string, "imageType": enum ( |
Campos | |
---|---|
altText
|
Opcional. Corresponde a una descripción del ícono que se usa para la accesibilidad. Si no se especifica, se proporciona el valor predeterminado
Si el ícono está configurado en un |
imageType
|
El estilo de recorte aplicado a la imagen. En algunos casos, aplicar un recorte de |
Campo de unión icons . El ícono que se muestra en el widget de la tarjeta
icons puede ser solo una de las siguientes opciones:
|
|
knownIcon
|
Muestra uno de los íconos integrados que proporciona Google Workspace.
Por ejemplo, para mostrar el ícono de un avión, especifica Para obtener una lista completa de los íconos compatibles, consulta íconos integrados. |
iconUrl
|
Muestra un ícono personalizado alojado en una URL HTTPS. Por ejemplo:
Los tipos de archivos compatibles incluyen |
Botón
Un texto, ícono o botón de texto y de ícono en el que los usuarios pueden hacer clic
Para convertir un botón en un botón en el que se puede hacer clic, especifica un objeto
(no un Image
) y configura una acción ImageComponent
onClick
.
Representación JSON |
---|
{ "text": string, "icon": { object ( |
Campos | |
---|---|
text
|
El texto que se muestra dentro del botón. |
icon
|
La imagen del ícono. Si se configuran |
color
|
Si se configura, el botón se rellena con un color de fondo sólido, y el color de la fuente cambia para mantener el contraste con el color de fondo. Por ejemplo, si se configura un fondo azul, es probable que se muestre texto blanco. Si no la estableces, el fondo de la imagen será blanco y el color de la fuente será azul.
Para el rojo, el verde y el azul, el valor de cada campo es un número
De manera opcional, configura
Para Por ejemplo, el siguiente color representa un rojo semitransparente:
|
onClick
|
Obligatorio. Es la acción que se realiza cuando un usuario hace clic en el botón, como abrir un hipervínculo o ejecutar una función personalizada. |
disabled
|
Si es |
altText
|
El texto alternativo que se usa para la accesibilidad Establece un texto descriptivo para que los usuarios sepan 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". |
Color
Representa un color en el espacio de color RGBA. Esta representación está diseñada para simplificar la conversión de representaciones de color desde varios idiomas y de compactación. Por ejemplo, los campos de esta representación pueden proporcionarse de manera trivial al constructor de java.awt.Color
en Java; también se puede proporcionar de manera trivial al método +colorWithRed:green:blue:alpha
de UIColor en iOS. Además, con un poco de trabajo, se puede formatear fácilmente como una string rgba()
de CSS en JavaScript.
Esta página de referencia no tiene información sobre el espacio de color absoluto que se debe usar para interpretar el valor RGB, por ejemplo, sRGB, Adobe RGB, DCI-P3 y BT.2020. De forma predeterminada, las aplicaciones deben asumir el espacio de color sRGB.
Cuando se debe determinar la igualdad de color, las implementaciones, a menos que se documenten de otra manera, tratan dos colores como iguales si todos sus valores rojo, verde, azul y alfa difieren en 1e-5
como máximo.
Ejemplo (Java):
import com.google.type.Color;
// ...
public static java.awt.Color fromProto(Color protocolor) {
float alpha = protocolor.hasAlpha()
? protocolor.getAlpha().getValue()
: 1.0;
return new java.awt.Color(
protocolor.getRed(),
protocolor.getGreen(),
protocolor.getBlue(),
alpha);
}
public static Color toProto(java.awt.Color color) {
float red = (float) color.getRed();
float green = (float) color.getGreen();
float blue = (float) color.getBlue();
float denominator = 255.0;
Color.Builder resultBuilder =
Color
.newBuilder()
.setRed(red / denominator)
.setGreen(green / denominator)
.setBlue(blue / denominator);
int alpha = color.getAlpha();
if (alpha != 255) {
result.setAlpha(
FloatValue
.newBuilder()
.setValue(((float) alpha) / denominator)
.build());
}
return resultBuilder.build();
}
// ...
Ejemplo (iOS / Obj-C):
// ...
static UIColor* fromProto(Color* protocolor) {
float red = [protocolor red];
float green = [protocolor green];
float blue = [protocolor blue];
FloatValue* alpha_wrapper = [protocolor alpha];
float alpha = 1.0;
if (alpha_wrapper != nil) {
alpha = [alpha_wrapper value];
}
return [UIColor colorWithRed:red green:green blue:blue alpha:alpha];
}
static Color* toProto(UIColor* color) {
CGFloat red, green, blue, alpha;
if (![color getRed:&red green:&green blue:&blue alpha:&alpha]) {
return nil;
}
Color* result = [[Color alloc] init];
[result setRed:red];
[result setGreen:green];
[result setBlue:blue];
if (alpha <= 0.9999) {
[result setAlpha:floatWrapperWithValue(alpha)];
}
[result autorelease];
return result;
}
// ...
Ejemplo (JavaScript):
// ...
var protoToCssColor = function(rgb_color) {
var redFrac = rgb_color.red || 0.0;
var greenFrac = rgb_color.green || 0.0;
var blueFrac = rgb_color.blue || 0.0;
var red = Math.floor(redFrac * 255);
var green = Math.floor(greenFrac * 255);
var blue = Math.floor(blueFrac * 255);
if (!('alpha' in rgb_color)) {
return rgbToCssColor(red, green, blue);
}
var alphaFrac = rgb_color.alpha.value || 0.0;
var rgbParams = [red, green, blue].join(',');
return ['rgba(', rgbParams, ',', alphaFrac, ')'].join('');
};
var rgbToCssColor = function(red, green, blue) {
var rgbNumber = new Number((red << 16) | (green << 8) | blue);
var hexString = rgbNumber.toString(16);
var missingZeros = 6 - hexString.length;
var resultBuilder = ['#'];
for (var i = 0; i < missingZeros; i++) {
resultBuilder.push('0');
}
resultBuilder.push(hexString);
return resultBuilder.join('');
};
// ...
Representación JSON |
---|
{ "red": number, "green": number, "blue": number, "alpha": number } |
Campos | |
---|---|
red
|
La cantidad de rojo en el color como un valor en el intervalo [0, 1]. |
green
|
La cantidad de verde en el color como un valor en el intervalo [0, 1]. |
blue
|
La cantidad de azul en el color como un valor en el intervalo [0, 1]. |
alpha
|
La fracción de este color que se debe aplicar al píxel. Es decir, el color del píxel final se define mediante la siguiente ecuación:
Esto significa que el valor 1.0 corresponde a un color sólido, mientras que el valor 0.0 corresponde a un color completamente transparente. Esto utiliza un mensaje de wrapper en lugar de un escalar flotante simple, para que sea posible distinguir entre un valor predeterminado y el valor que no se configura. Si se omite, este objeto de color se renderiza como un color sólido (como si se le hubiera dado de forma explícita un valor de 1.0). |
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
.
Representación JSON |
---|
{ "name": string, "value": string, "selected": boolean, "onChangeAction": { object ( |
Campos | |
---|---|
name
|
El nombre con el que se identifica el widget del interruptor en un evento de entrada de formulario. Si quieres obtener más información para trabajar con entradas del formulario, consulta Cómo recibir datos del formulario. |
value
|
El valor que ingresó un usuario y que se muestra como parte de un evento de entrada de formulario. Si quieres obtener más información para trabajar con entradas del formulario, consulta Cómo recibir datos del formulario. |
selected
|
Cuando |
onChangeAction
|
La acción que se realiza cuando se cambia el estado del interruptor, como la función que se ejecutará. |
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 estilo palanca |
CHECKBOX
|
Dejó de estar disponible y se reemplazó por CHECK_BOX .
|
CHECK_BOX
|
Una casilla de verificación. |
Lista de botones
Una lista de botones dispuestos horizontalmente.
Representación JSON |
---|
{
"buttons": [
{
object (
|
Campos | |
---|---|
buttons[]
|
Un array de botones. |
TextInput
Es 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. Si quieres obtener más información para trabajar con entradas del formulario, consulta Cómo recibir datos del formulario.
Cuando necesite recopilar datos no definidos o abstractos de los usuarios, use una entrada de texto. Para recopilar datos definidos o enumerados de los usuarios, usa el widget SelectionInput
.
Representación JSON |
---|
{ "name": string, "label": string, "hintText": string, "value": string, "type": enum ( |
Campos | |
---|---|
name
|
Es el nombre por el que se identifica la entrada de texto en un evento de entrada del formulario. Si quieres obtener más información para trabajar con entradas del formulario, consulta Cómo recibir datos del formulario. |
label
|
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 pides el nombre a alguien, pero necesitas específicamente su apellido, escribe
Obligatorio si no se especifica |
hintText
|
Texto que aparece debajo del campo de entrada de texto para ayudar a los usuarios a solicitarles que ingresen un valor determinado. Este texto siempre es visible.
Obligatorio si no se especifica |
value
|
El valor que ingresó un usuario y que se muestra como parte de un evento de entrada de formulario. Si quieres obtener más información para trabajar con entradas del formulario, consulta Cómo recibir datos del formulario. |
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
|
Qué hacer cuando se produce un cambio en el campo de entrada de texto Por ejemplo, un usuario que agrega contenido al campo o borra texto. Los ejemplos de acciones que se deben realizar incluyen ejecutar una función personalizada o abrir un diálogo en Google Chat. |
initialSuggestions
|
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 han escrito los usuarios.
Por ejemplo, un campo de entrada de texto para el lenguaje de programación podría sugerir Java, JavaScript, Python y C++. Cuando los usuarios comienzan a escribir
Los valores sugeridos ayudan a guiar a los usuarios para que ingresen valores que tu app pueda comprender. Cuando se hace referencia a JavaScript, algunos usuarios pueden ingresar
Cuando se especifica, |
autoCompleteAction
|
Opcional. Especifica qué acción se debe realizar cuando el campo de entrada de texto proporciona sugerencias a los usuarios que interactúan con ella.
Si no se especifica, Si se especifica, la app realiza la acción que se especifica aquí, como ejecutar una función personalizada. Es compatible con complementos de Google Workspace, pero no con apps de Chat. |
Tipo
Cómo aparece un campo de entrada de texto en la interfaz de usuario Por ejemplo, ya sea un campo de entrada de una sola línea o una entrada de varias líneas.
Si se especifica initialSuggestions
, type
siempre es SINGLE_LINE
, incluso si está configurado 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. |
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 han escrito los usuarios.
Por ejemplo, un campo de entrada de texto para el lenguaje de programación podría sugerir Java, JavaScript, Python y C++. Cuando los usuarios comienzan a escribir Jav
, se muestra la lista de filtros de sugerencias para mostrar Java
y JavaScript
.
Los valores sugeridos ayudan a guiar a los usuarios para que ingresen valores que tu app pueda comprender. Cuando se hace referencia a JavaScript, algunos usuarios pueden ingresar javascript
y otros java script
. Las sugerencias de JavaScript
pueden estandarizar la forma en que los usuarios interactúan con tu app.
Cuando se especifica, TextInput.type
siempre es SINGLE_LINE
, incluso si se configura como MULTIPLE_LINE
.
Representación JSON |
---|
{
"items": [
{
object (
|
Campos | |
---|---|
items[]
|
Una lista de sugerencias que se usan para las recomendaciones de autocompletar en los campos de entrada de texto. |
Elemento de sugerencia
Un valor sugerido que los usuarios pueden ingresar en un campo de entrada de texto.
Representación JSON |
---|
{ // Union field |
Campos | |
---|---|
Campo de unión
|
|
text
|
El valor de una entrada sugerida para un campo de entrada de texto. Esto equivale a lo que los usuarios ingresan. |
Selección de entrada
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.
Las apps de chat pueden procesar el valor de los elementos que los usuarios seleccionan o ingresan. Si quieres obtener más información para trabajar con entradas del formulario, consulta Cómo recibir datos del formulario.
Para recopilar datos indefinidos o abstractos de los usuarios, usa el widget TextInput
.
Representación JSON |
---|
{ "name": string, "label": string, "type": enum ( |
Campos | |
---|---|
name
|
El nombre que identifica la entrada de selección en un evento de entrada del formulario. Si quieres obtener más información para trabajar con entradas del formulario, consulta Cómo recibir datos del formulario. |
label
|
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 una solicitud de trabajo en un menú desplegable, la etiqueta puede ser "Urgencia" o "Seleccionar urgencia". |
type
|
Es el tipo de elementos que se muestran a los usuarios en un widget |
items[]
|
Un array de elementos seleccionables. Por ejemplo, un array de botones de selección o casillas de verificación. Admite hasta 100 elementos. |
onChangeAction
|
Si se especifica, el formulario se envía cuando cambia la selección. Si no se especifica, debes especificar un botón separado que envíe el formulario. Si quieres obtener más información para trabajar con entradas del formulario, consulta Cómo recibir datos del formulario. |
Tipo de selección
El formato de los elementos que los usuarios pueden seleccionar. 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 pueden combinar interruptores y casillas de verificación.
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 seleccionar 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ú. |
Elemento de selección
Es un elemento que los usuarios pueden seleccionar en una entrada de selección, como una casilla de verificación o un interruptor.
Representación JSON |
---|
{ "text": string, "value": string, "selected": boolean } |
Campos | |
---|---|
text
|
Es el texto que identifica o describe el elemento a los usuarios. |
value
|
Es el valor asociado con este elemento. El cliente debe usar esto como un valor de entrada de formulario. Si quieres obtener más información para trabajar con entradas del formulario, consulta Cómo recibir datos del formulario. |
selected
|
Cuando es |
Selector de fecha y hora
Permite que los usuarios ingresen una fecha, una hora o una fecha y una 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.
Representación JSON |
---|
{ "name": string, "label": string, "type": enum ( |
Campos | |
---|---|
name
|
El nombre con el que se identifica el Si quieres obtener más información para trabajar con entradas del formulario, consulta Cómo recibir datos del formulario. |
label
|
Es el texto que solicita a los usuarios que ingresen una fecha, una hora o una fecha y hora. Por ejemplo, si los usuarios programan una cita, usa una etiqueta como |
type
|
Si el widget admite el ingreso de una fecha, una hora o la fecha y hora |
valueMsEpoch
|
El valor predeterminado que se muestra en el widget, en milisegundos desde el época Unix.
Especifica el valor según el tipo de selector (
|
timezoneOffsetDate
|
Número que representa el desplazamiento de la zona horaria respecto de UTC, en minutos Si se configura, |
onChangeAction
|
Se activa cuando el usuario hace clic en
Guardar
o
Borrar
desde la
interfaz
|
Tipo de selector de fecha y hora
El formato de la fecha y la hora del 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. |
Divisor
Muestra una línea divisoria entre los widgets como una línea horizontal.
Por ejemplo, el siguiente JSON crea un divisor:
"divider": {}
Cuadrícula
Muestra una cuadrícula con una colección de elementos. Los elementos solo pueden incluir texto o imágenes.
Una cuadrícula admite cualquier cantidad de columnas y elementos. La cantidad de filas se determina con 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.
Para las columnas responsivas o para incluir más que texto o imágenes, usa
.
Columns
Por ejemplo, el siguiente JSON crea una cuadrícula de 2 columnas con un solo elemento:
"grid": {
"title": "A fine collection of items",
"columnCount": 2,
"borderStyle": {
"type": "STROKE",
"cornerRadius": 4
},
"items": [
{
"image": {
"imageUri": "https://www.example.com/image.png",
"cropStyle": {
"type": "SQUARE"
},
"borderStyle": {
"type": "STROKE"
}
},
"title": "An item",
"textAlignment": "CENTER"
}
],
"onClick": {
"openLink": {
"url": "https://www.example.com"
}
}
}
Representación JSON |
---|
{ "title": string, "items": [ { object ( |
Campos | |
---|---|
title
|
El texto que se muestra en el encabezado de la cuadrícula |
items[]
|
Los elementos que se mostrarán en la cuadrícula |
borderStyle
|
El estilo de borde que se aplica a cada elemento de la cuadrícula. |
columnCount
|
La cantidad de columnas que se mostrarán en la cuadrícula. Si no se especifica este campo, se utiliza un valor predeterminado, que es diferente según dónde se muestre la cuadrícula (diálogo versus complementario). |
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 agregado a los parámetros de la devolución de llamada. |
Elemento de la cuadrícula
Representa un elemento en un diseño de cuadrícula. Los elementos pueden contener texto, una imagen o ambos.
Representación JSON |
---|
{ "id": string, "image": { object ( |
Campos | |
---|---|
id
|
Es un identificador que especifica el usuario para este elemento de la cuadrícula. Este identificador se muestra en los parámetros de devolución de llamada |
image
|
Es la imagen que se muestra en el elemento de la cuadrícula. |
title
|
El título del elemento de la cuadrícula |
subtitle
|
Es el subtítulo del elemento de la cuadrícula. |
layout
|
Es el diseño que se usará para el elemento de la cuadrícula. |
Componente de imagen
Representa una imagen.
Representación JSON |
---|
{ "imageUri": string, "altText": string, "cropStyle": { object ( |
Campos | |
---|---|
imageUri
|
Es la URL de la imagen. |
altText
|
La etiqueta de accesibilidad de la imagen. |
cropStyle
|
El estilo de recorte que se aplicará a la imagen. |
borderStyle
|
El estilo de borde que se aplicará a la imagen. |
Estilo de imagen corta
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
}
Representación JSON |
---|
{
"type": enum (
|
Campos | |
---|---|
type
|
El tipo de recorte. |
aspectRatio
|
La relación de aspecto que se usará si el tipo de recorte es Por ejemplo, a continuación se muestra cómo aplicar una relación de aspecto de 16:9.
|
Tipo de recorte de imagen
Representa el estilo de recorte aplicado a una imagen.
Enumeradores | |
---|---|
IMAGE_CROP_TYPE_UNSPECIFIED
|
No se especificó ningún valor. No usar. |
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. |
Estilo de borde
Las opciones de estilo para el borde de una tarjeta o widget, incluidos el tipo y el color de borde.
Representación JSON |
---|
{ "type": enum ( |
Campos | |
---|---|
type
|
Es el tipo de borde. |
strokeColor
|
Los colores que se usarán cuando el tipo sea |
cornerRadius
|
Radio de la esquina del borde. |
Tipo de borde
Representa los tipos de bordes aplicados a los widgets.
Enumeradores | |
---|---|
BORDER_TYPE_UNSPECIFIED
|
No se especificó ningún valor. |
NO_BORDER
|
Valor predeterminado Sin borde. |
STROKE
|
Resumen. |
Diseño de cuadrícula
Representa las diversas opciones de diseño disponibles para un elemento de la cuadrícula.
Enumeradores | |
---|---|
GRID_ITEM_LAYOUT_UNSPECIFIED
|
No se especificó ningún 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. |
Columnas
El widget Columns
muestra hasta 2 columnas en un mensaje o diálogo de la tarjeta. Puedes agregar widgets a cada columna; los widgets aparecen en el orden en que se especifican.
La altura de cada columna está determinada por la columna más alta. Por ejemplo, si la primera columna es más alta que la segunda, ambas tendrán la altura de la primera. Debido a que cada columna puede contener una cantidad diferente de widgets, no puedes definir filas ni alinear widgets entre las columnas.
Las columnas se muestran una al lado de la otra. Puedes personalizar el ancho de cada columna mediante el campo HorizontalSizeStyle
. Si el ancho de la pantalla del usuario es demasiado estrecho, la segunda columna se une por debajo de la primera:
- En la Web, la segunda columna se une si el ancho de la pantalla es inferior o igual a 480 píxeles.
- En dispositivos iOS, la segunda columna se une si el ancho de la pantalla es inferior o igual a 300 pt.
- En dispositivos Android, la segunda columna se une si el ancho de la pantalla es inferior o igual a 320 dp.
Para incluir más de 2 columnas o usar filas, usa el widget
.
Grid
Es compatible con apps de Chat, pero no con complementos de Google Workspace.
Representación JSON |
---|
{
"columnItems": [
{
object (
|
Campos | |
---|---|
columnItems[]
|
Un array de columnas. Puede incluir hasta 2 columnas en una tarjeta o un diálogo. |
Columna
Una columna.
Representación JSON |
---|
{ "horizontalSizeStyle": enum ( |
Campos | |
---|---|
horizontalSizeStyle
|
Especifica cómo una columna llena el ancho de la tarjeta. |
horizontalAlignment
|
Especifica si los widgets se alinean a la izquierda, a la derecha o al centro de una columna. |
verticalAlignment
|
Especifica si los widgets se alinean en la parte superior, inferior o central de una columna. |
widgets[]
|
Un array de widgets incluidos en una columna. Los widgets aparecen en el orden en que se especifican. |
TamañoHorizontalHorizontal
Especifica cómo una columna llena el ancho de la tarjeta. El ancho de cada columna depende tanto de HorizontalSizeStyle
como del ancho de los widgets dentro de la columna.
Enumeradores | |
---|---|
HORIZONTAL_SIZE_STYLE_UNSPECIFIED
|
Sin especificar. No lo utilices. |
FILL_AVAILABLE_SPACE
|
Valor predeterminado La columna ocupa el espacio disponible, hasta el 70% del ancho de la tarjeta. Si ambas columnas están configuradas como FILL_AVAILABLE_SPACE , cada una de ellas 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. |
Alineación horizontal
Especifica si los widgets se alinean a la izquierda, a la derecha o al centro de una columna.
Enumeradores | |
---|---|
HORIZONTAL_ALIGNMENT_UNSPECIFIED
|
Sin especificar. No lo utilices. |
START
|
Valor predeterminado Alinea los widgets con la posición de inicio de la columna. Para los diseños de izquierda a derecha, se alinea con la izquierda. Para diseños de derecha a izquierda, se alinea a la derecha. |
CENTER
|
Alinea los widgets con 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 diseños de derecha a izquierda, alinea los widgets a la izquierda. |
Alineación vertical
Especifica si los widgets se alinean en la parte superior, inferior o central de una columna.
Enumeradores | |
---|---|
VERTICAL_ALIGNMENT_UNSPECIFIED
|
No se especifica. No usar. |
CENTER
|
Valor predeterminado Alinea los widgets con el centro de una columna. |
TOP
|
Alinea los widgets con la parte superior de la columna. |
BOTTOM
|
Alinea los widgets con la parte inferior de una columna. |
Widgets
Los widgets compatibles que puedes incluir en una columna.
Representación JSON |
---|
{ // Union field |
Campos | |
---|---|
Campo de unión
|
|
textParagraph
|
Widget |
image
|
Widget |
decoratedText
|
Widget |
buttonList
|
Widget |
textInput
|
Widget |
selectionInput
|
Widget |
dateTimePicker
|
Widget |
Acción de la tarjeta
Una acción de tarjeta es la acción asociada con la tarjeta. Por ejemplo, una tarjeta de facturación puede incluir acciones como borrar una factura, enviar una factura por correo electrónico o abrirla en un navegador.
No es compatible con las apps de chat.
Representación JSON |
---|
{
"actionLabel": string,
"onClick": {
object (
|
Campos | |
---|---|
actionLabel
|
Etiqueta que se muestra como el elemento de menú de acciones. |
onClick
|
La acción |
Estilo de la imagen
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 usar. |
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. Si haces clic en el encabezado, aparecerá la tarjeta en la pila. Si la tarjeta no tiene encabezado, se usa un encabezado generado. |
REPLACE
|
Valor predeterminado La tarjeta se muestra reemplazando la vista de la tarjeta superior en la pila de tarjetas. |