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 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
{
"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, un encabezado contiene una imagen al inicio 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, el siguiente JSON crea un menú de acciones de la tarjeta con las opciones de configuración y envío de comentarios:
|
name
|
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
|
El pie de página fijo que se muestra en la parte inferior de esta tarjeta.
La configuración de
Las apps de chat admiten |
displayStyle
|
En los complementos de Google Workspace, configura las propiedades de visualización del No es compatible con 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 hacia adelante entre las tarjetas de la página principal y las tarjetas contextuales. No es compatible con apps de chat. |
Encabezado de la tarjeta
Representa el encabezado de una 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 ocupa una línea. Si solo se especifica el título, ocupará ambas líneas. |
subtitle
|
El subtítulo del encabezado de la tarjeta. Si se especifica, aparece en su propia línea debajo de |
imageType
|
La forma que se utiliza 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 utiliza para la accesibilidad. |
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. |
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 HTML simple. |
widgets[]
|
Todos los widgets de la sección. Debe contener 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 para mostrar los widgets ocultos haciendo 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
|
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 |
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.
Representación JSON |
---|
{ // Union field |
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.
data
solo puede ser una de las siguientes opciones:
|
|
textParagraph
|
Muestra un párrafo de texto. Admite texto HTML simple. 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:
Como 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 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 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:
|
divider
|
Muestra una línea divisoria horizontal entre 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. 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:
|
TextoParagraph
Un párrafo de texto que admite formato. Consulta Formato de texto para obtener más información.
Representación JSON |
---|
{ "text": string } |
Campos | |
---|---|
text
|
El texto que se muestra en el widget. |
Imagen
Una imagen que se especifica mediante una URL y puede tener una acción
onClick
.
Representación JSON |
---|
{
"imageUrl": string,
"onClick": {
object (
|
Campos | |
---|---|
imageUrl
|
La URL 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 fines de accesibilidad. |
Al hacer clic
Representa cómo responder cuando los usuarios hacen clic en un elemento interactivo de una tarjeta, como un botón.
Representación JSON |
---|
{ // Union field |
Campos | |
---|---|
Campo de unión
|
|
action
|
Si se especifica, |
openLink
|
Si se especifica, este |
openDynamicLinkAction
|
Un complemento activa esta acción cuando la acción necesita abrir un vínculo. Se diferencia del |
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. |
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.
Representación JSON |
---|
{ "function": string, "parameters": [ { object ( |
Campos | |
---|---|
function
|
Una función personalizada que se invoca cuando se hace clic en el elemento contenedor o cuando se activa de lo contrario. Por ejemplo, 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 se realiza la llamada a la acción. |
persistValues
|
Indica si los valores del formulario persisten 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 el botón de un mensaje de tarjeta.
Si no se especifica, la app responde mediante la ejecución de un
Cuando se especifica un 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.
Representación JSON |
---|
{ "key": string, "value": string } |
Campos | |
---|---|
key
|
El nombre del parámetro para la secuencia de comandos de la acción. |
value
|
El valor del parámetro. |
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. |
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 mediante la ejecución de un
action
, como abrir un vínculo o ejecutar una función, con normalidad.
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 una ventana 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. |
Vínculo abierto
Representa un evento
onClick
que abre un hipervínculo.
Representación JSON |
---|
{ "url": string, "openAs": enum ( |
Campos | |
---|---|
url
|
La URL que se abrirá. |
openAs
|
Cómo abrir un vínculo No es compatible con 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 apps de chat. |
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. |
Cerrar
Lo que 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 cliente no admite ambos valores,
OnClose
tiene 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 diálogo modal y la tarjeta superior se bloquea hasta que se cierra la ventana secundaria. |
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.
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 formatos simples. Consulta Formato de texto para obtener detalles sobre el formato. |
wrapText
|
La configuración de ajuste de texto. Si es
Solo se aplica a
|
bottomLabel
|
El texto que aparece debajo de |
onClick
|
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
solo puede ser una de las siguientes opciones:
|
|
button
|
Un botón en el que se puede hacer clic para activar una acción. |
switchControl
|
Se puede hacer clic en un widget de cambio 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
Un í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. 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,
Si el ícono se configura en un objeto |
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
solo puede ser una de las siguientes opciones:
|
|
knownIcon
|
Muestra uno de los íconos integrados que proporciona Google Workspace.
Por ejemplo, para mostrar un ícono de avión, especifica Para ver una lista completa de los íconos compatibles, consulta Íconos integrados. |
iconUrl
|
Mostrar un ícono personalizado alojado en una URL HTTPS. Por ejemplo:
Los tipos de archivo admitidos incluyen
|
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 configura 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.
Representación JSON |
---|
{ "text": string, "icon": { object ( |
Campos | |
---|---|
text
|
El texto que se muestra dentro del botón. |
icon
|
Imagen del ícono. Si se configuran |
color
|
Si se configura, el botón se rellena con un color de fondo sólido y el color de la fuente cambia para mantener el contraste con el color de fondo. Por ejemplo, si estableces un fondo azul, es probable que 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 rojo, verde y azul, el valor de cada campo es un número Opcionalmente, establece alfa, que establece un nivel de transparencia usando esta ecuación:
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:
|
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
|
Si es |
altText
|
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 lo siguiente: "Abre una nueva pestaña del navegador y navega a la documentación para desarrolladores de Google Chat en https://developers.google.com/chat". |
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 en comparación con la compactación. Por ejemplo, los campos de esta representación se pueden proporcionar de forma trivial al constructor de
java.awt.Color
en Java. También se pueden proporcionar de forma trivial al método
+colorWithRed:green:blue:alpha
de UIColor en iOS. Además, con solo un poco de trabajo, se puede formatear fácilmente como una string
rgba()
de CSS en JavaScript.
Esta página de referencia no contiene información sobre el espacio de color absoluto que se debe usar para interpretar el valor RGB (p. ej., sRGB, Adobe RGB, DCI-P3, BT.2020, etcétera). De forma predeterminada, las aplicaciones deberían suponer el espacio de color sRGB.
Cuando se deba decidir la igualdad de color, a menos que se documente lo contrario, se deben tratar dos colores como iguales si todos sus valores rojo, verde, azul y alfa difieren en un máximo de 1e-5.
Ejemplo (Java):
import com.google.type.Color;
// ...
public static java.awt.Color fromProto(Color protocolor) {
float alpha = protocolor.hasAlpha()
? protocolor.getAlpha().getValue()
: 1.0;
return new java.awt.Color(
protocolor.getRed(),
protocolor.getGreen(),
protocolor.getBlue(),
alpha);
}
public static Color toProto(java.awt.Color color) {
float red = (float) color.getRed();
float green = (float) color.getGreen();
float blue = (float) color.getBlue();
float denominator = 255.0;
Color.Builder resultBuilder =
Color
.newBuilder()
.setRed(red / denominator)
.setGreen(green / denominator)
.setBlue(blue / denominator);
int alpha = color.getAlpha();
if (alpha != 255) {
result.setAlpha(
FloatValue
.newBuilder()
.setValue(((float) alpha) / denominator)
.build());
}
return resultBuilder.build();
}
// ...
Ejemplo (iOS / Obj-C):
// ...
static UIColor* fromProto(Color* protocolor) {
float red = [protocolor red];
float green = [protocolor green];
float blue = [protocolor blue];
FloatValue* alpha_wrapper = [protocolor alpha];
float alpha = 1.0;
if (alpha_wrapper != nil) {
alpha = [alpha_wrapper value];
}
return [UIColor colorWithRed:red green:green blue:blue alpha:alpha];
}
static Color* toProto(UIColor* color) {
CGFloat red, green, blue, alpha;
if (![color getRed:&red green:&green blue:&blue alpha:&alpha]) {
return nil;
}
Color* result = [[Color alloc] init];
[result setRed:red];
[result setGreen:green];
[result setBlue:blue];
if (alpha <= 0.9999) {
[result setAlpha:floatWrapperWithValue(alpha)];
}
[result autorelease];
return result;
}
// ...
Ejemplo (JavaScript):
// ...
var protoToCssColor = function(rgb_color) {
var redFrac = rgb_color.red || 0.0;
var greenFrac = rgb_color.green || 0.0;
var blueFrac = rgb_color.blue || 0.0;
var red = Math.floor(redFrac * 255);
var green = Math.floor(greenFrac * 255);
var blue = Math.floor(blueFrac * 255);
if (!('alpha' in rgb_color)) {
return rgbToCssColor(red, green, blue);
}
var alphaFrac = rgb_color.alpha.value || 0.0;
var rgbParams = [red, green, blue].join(',');
return ['rgba(', rgbParams, ',', alphaFrac, ')'].join('');
};
var rgbToCssColor = function(red, green, blue) {
var rgbNumber = new Number((red << 16) | (green << 8) | blue);
var hexString = rgbNumber.toString(16);
var missingZeros = 6 - hexString.length;
var resultBuilder = ['#'];
for (var i = 0; i < missingZeros; i++) {
resultBuilder.push('0');
}
resultBuilder.push(hexString);
return resultBuilder.join('');
};
// ...
Representación JSON |
---|
{ "red": number, "green": number, "blue": number, "alpha": number } |
Campos | |
---|---|
red
|
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 hubiera proporcionado de forma explícita un valor de 1.0). |
SwitchControl
Interruptor de estilo de activación o casilla de verificación dentro de un widget
decoratedText
.
Solo se admite en el widget
decoratedText
.
Representación JSON |
---|
{ "name": string, "value": string, "selected": boolean, "onChangeAction": { object ( |
Campos | |
---|---|
name
|
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
|
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
|
Cuando
|
onChangeAction
|
La acción que se realiza cuando se cambia el estado del interruptor, como qué función 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 para cambiar de estilo |
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 arreglo de botones |
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.
Representación JSON |
---|
{ "name": string, "label": string, "hintText": string, "value": string, "type": enum ( |
Campos | |
---|---|
name
|
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
|
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".
Es obligatorio si no se especifica |
hintText
|
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.
Es obligatorio si no se especifica |
value
|
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
|
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. 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
|
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, |
autoCompleteAction
|
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, 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 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 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 está configurado en
MULTIPLE_LINE
.
Representación JSON |
---|
{
"items": [
{
object (
|
Campos | |
---|---|
items[]
|
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.
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 ingresarían. |
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.
Representación JSON |
---|
{ "name": string, "label": string, "type": enum ( |
Campos | |
---|---|
name
|
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
|
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
|
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[]
|
Un arreglo de los elementos seleccionados. Por ejemplo, todas las casillas de verificación seleccionadas. |
onChangeAction
|
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. |
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. |
Elemento de selección
Un elemento seleccionable 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 se muestra a los usuarios. |
value
|
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
|
Cuando se establece en |
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.
Representación JSON |
---|
{ "name": string, "label": string, "type": enum ( |
Campos | |
---|---|
name
|
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
|
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
|
Qué tipo de entrada de fecha y hora admite el selector de fecha y hora |
valueMsEpoch
|
El valor que se muestra como el valor predeterminado antes de la entrada del usuario o una entrada anterior del usuario, representado en milisegundos (Período de época).
Para el tipo
Para el tipo
Para el tipo |
timezoneOffsetDate
|
El número que representa la diferencia horaria con la zona horaria respecto de UTC. Si se configura, |
onChangeAction
|
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. |
Divisor
Muestra un divisor entre los widgets, 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.
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"
}
}
}
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 muestran en la cuadrícula. |
borderStyle
|
El estilo del borde que se aplicará a cada elemento de la cuadrícula. |
columnCount
|
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
|
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.
Representación JSON |
---|
{ "id": string, "image": { object ( |
Campos | |
---|---|
id
|
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
|
La imagen que se muestra en el elemento de la cuadrícula. |
title
|
El título del elemento de la cuadrícula |
subtitle
|
El subtítulo del elemento de la cuadrícula. |
layout
|
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
|
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 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
}
Representación JSON |
---|
{
"type": enum (
|
Campos | |
---|---|
type
|
El tipo de recorte. |
aspectRatio
|
La relación de aspecto que se debe usar si el tipo de recorte es Por ejemplo, a continuación se indica cómo aplicar una relación de aspecto de 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. Configura la relación de aspecto personalizada con
aspectRatio
.
|
RECTANGLE_4_3
|
Aplica un recorte rectangular con una relación de aspecto de 4:3. |
Estilo del borde
Representa el estilo de borde completo aplicado a los elementos de un widget.
Representación JSON |
---|
{ "type": enum ( |
Campos | |
---|---|
type
|
El tipo de borde. |
strokeColor
|
Los colores que se usarán cuando el tipo sea |
cornerRadius
|
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. |
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. |
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.
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 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. |