Cards v2

Tarjeta

Es una interfaz de tarjeta que se muestra en un mensaje de Google Chat o en un complemento de Google Workspace.

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

Diseña y obtén una vista previa de las tarjetas con Card Builder.

Abrir el Creador de tarjetas

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

Nota: Puedes agregar hasta 100 widgets por tarjeta. Se ignorarán los widgets que superen este límite. Este límite se aplica tanto a los mensajes de tarjetas como a los diálogos en las apps de Google Chat, y a las tarjetas en los complementos de Google Workspace.

Ejemplo: Mensaje de tarjeta para una app de Google Chat

Ejemplo de tarjeta de contacto

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

{
  "cardsV2": [
    {
      "cardId": "unique-card-id",
      "card": {
        "header": {
           "title": "Sasha",
           "subtitle": "Software Engineer",
           "imageUrl":
           "https://developers.google.com/workspace/chat/images/quickstart-app-avatar.png",
           "imageType": "CIRCLE",
           "imageAltText": "Avatar for Sasha"
         },
         "sections": [
           {
             "header": "Contact Info",
             "collapsible": true,
             "uncollapsibleWidgetsCount": 1,
             "widgets": [
               {
                 "decoratedText": {
                   "startIcon": {
                     "knownIcon": "EMAIL"
                   },
                   "text": "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 (CardHeader)
  },
  "sections": [
    {
      object (Section)
    }
  ],
  "sectionDividerStyle": enum (DividerStyle),
  "cardActions": [
    {
      object (CardAction)
    }
  ],
  "name": string,
  "fixedFooter": {
    object (CardFixedFooter)
  },
  "displayStyle": enum (DisplayStyle),
  "peekCardHeader": {
    object (CardHeader)
  }
}
Campos
header

object (CardHeader)

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

sections[]

object (Section)

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

sectionDividerStyle

enum (DividerStyle)

Es el estilo del divisor entre el encabezado, las secciones y el pie de página.

cardActions[]

object (CardAction)

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

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

Por ejemplo, el siguiente código JSON crea un menú de acciones de tarjeta con las opciones Settings y Send Feedback: 

"cardActions": [
  {
    "actionLabel": "Settings",
    "onClick": {
      "action": {
        "functionName": "goToView",
        "parameters": [
          {
            "key": "viewType",
            "value": "SETTING"
         }
        ],
        "loadIndicator": "LoadIndicator.SPINNER"
      }
    }
  },
  {
    "actionLabel": "Send Feedback",
    "onClick": {
      "openLink": {
        "url": "https://example.com/feedback"
      }
    }
  }
]
name

string

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

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

displayStyle

enum (DisplayStyle)

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

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

peekCardHeader

object (CardHeader)

Cuando se muestra contenido contextual, el encabezado de la tarjeta de vista previa actúa 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.

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

CardHeader

Representa el encabezado de una tarjeta. Para ver un ejemplo en las apps de Google Chat, consulta Cómo agregar un encabezado.

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

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

string

Obligatorio. Es el título del encabezado de la tarjeta. El encabezado tiene una altura fija: si se especifican un título y un subtítulo, cada uno ocupa una línea. Si solo se especifica el título, este ocupará ambas líneas.

subtitle

string

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

imageType

enum (ImageType)

Forma que se usa para recortar la imagen.

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

imageUrl

string

Es la URL HTTPS de la imagen en el encabezado de la tarjeta.

imageAltText

string

Es el texto alternativo de esta imagen que se usa para la accesibilidad.

ImageType

Forma que se usa para recortar la imagen.

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

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

Sección

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

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

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

string

Es el texto que aparece en la parte superior de una sección. Admite texto con formato HTML simple. Para obtener más información sobre el formato de texto, consulta Cómo dar formato al texto en las apps de Google Chat y Cómo dar formato al texto en los complementos de Google Workspace.

widgets[]

object (Widget)

Son todos los widgets de la sección. Debe contener al menos un widget.

collapsible

boolean

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

uncollapsibleWidgetsCount

integer

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

collapseControl

object (CollapseControl)

Opcional. Define el botón de expansión y contracción de la sección. Este botón solo se mostrará si la sección se puede contraer. Si no se establece este campo, se usa el botón predeterminado.

Widget

Cada tarjeta está compuesta por widgets.

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

Representación JSON 
{
  "horizontalAlignment": enum (HorizontalAlignment),

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

enum (HorizontalAlignment)

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

Campo de unión data. Un widget solo puede tener uno de los siguientes elementos. Puedes usar varios campos de widgets para mostrar más elementos. data solo puede ser uno de los siguientes:
textParagraph

object (TextParagraph)

Muestra un párrafo de texto. Admite texto con formato HTML simple. Para obtener más información sobre el formato de texto, consulta Cómo dar formato al texto en las apps de Google Chat y Cómo dar formato al texto en los complementos de Google Workspace.

Por ejemplo, el siguiente código JSON crea un texto en negrita: 

"textParagraph": {
  "text": "  <b>bold text</b>"
}
image

object (Image)

Muestra una imagen.

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

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

object (DecoratedText)

Muestra un elemento de texto decorado.

Por ejemplo, el siguiente código 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

object (ButtonList)

Es 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,
      },
      "disabled": true,
    },
    {
      "icon": {
        "knownIcon": "INVITE",
        "altText": "check calendar"
      },
      "onClick": {
        "openLink": {
          "url": "https://example.com/calendar"
        }
      }
    }
  ]
}
textInput

object (TextInput)

Muestra un cuadro de texto en el que los usuarios pueden escribir.

Por ejemplo, el siguiente código 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 código JSON crea una entrada de texto para un lenguaje de programación con sugerencias estáticas: 

"textInput": {
  "name": "preferred_programing_language",
  "label": "Preferred Language",
  "initialSuggestions": {
    "items": [
      {
        "text": "C++"
      },
      {
        "text": "Java"
      },
      {
        "text": "JavaScript"
      },
      {
        "text": "Python"
      }
    ]
  }
}
selectionInput

object (SelectionInput)

Muestra un control de selección que permite a los usuarios seleccionar elementos. Los controles de selección pueden ser casillas de verificación, botones de selección, interruptores o menús desplegables.

Por ejemplo, el siguiente código JSON crea un menú desplegable que permite a los usuarios elegir un tamaño: 

"selectionInput": {
  "name": "size",
  "label": "Size"
  "type": "DROPDOWN",
  "items": [
    {
      "text": "S",
      "value": "small",
      "selected": false
    },
    {
      "text": "M",
      "value": "medium",
      "selected": true
    },
    {
      "text": "L",
      "value": "large",
      "selected": false
    },
    {
      "text": "XL",
      "value": "extra_large",
      "selected": false
    }
  ]
}
dateTimePicker

object (DateTimePicker)

Muestra un widget que permite a los usuarios ingresar una fecha, una hora o ambas.

Por ejemplo, el siguiente JSON crea un selector de fecha y hora para programar una cita: 

"dateTimePicker": {
  "name": "appointment_time",
  "label": "Book your appointment at:",
  "type": "DATE_AND_TIME",
  "valueMsEpoch": 796435200000
}
divider

object (Divider)

Muestra un divisor de línea horizontal entre los widgets.

Por ejemplo, el siguiente código JSON crea un divisor: 

"divider": {
}
grid

object (Grid)

Muestra una cuadrícula con una colección de elementos.

Una cuadrícula admite cualquier cantidad de columnas y elementos. La cantidad de filas se determina según los límites superiores de la cantidad de 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.

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

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

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

object (Columns)

Muestra hasta 2 columnas.

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

Por ejemplo, el siguiente código JSON crea 2 columnas que contienen párrafos de texto: 

"columns": {
  "columnItems": [
    {
      "horizontalSizeStyle": "FILL_AVAILABLE_SPACE",
      "horizontalAlignment": "CENTER",
      "verticalAlignment": "CENTER",
      "widgets": [
        {
          "textParagraph": {
            "text": "First column text paragraph"
          }
        }
      ]
    },
    {
      "horizontalSizeStyle": "FILL_AVAILABLE_SPACE",
      "horizontalAlignment": "CENTER",
      "verticalAlignment": "CENTER",
      "widgets": [
        {
          "textParagraph": {
            "text": "Second column text paragraph"
          }
        }
      ]
    }
  ]
}
carousel

object (Carousel)

Un carrusel contiene una colección de widgets anidados. Por ejemplo, esta es una representación JSON de un carrusel que contiene dos párrafos de texto. 

{
  "widgets": [
    {
      "textParagraph": {
        "text": "First text paragraph in the carousel."
      }
    },
    {
      "textParagraph": {
        "text": "Second text paragraph in the carousel."
      }
    }
  ]
}
chipList

object (ChipList)

Es una lista de chips.

Por ejemplo, el siguiente código JSON crea dos chips. El primero es un chip de texto y el segundo es un chip de ícono que abre un vínculo: 

"chipList": {
  "chips": [
    {
      "text": "Edit",
      "disabled": true,
    },
    {
      "icon": {
        "knownIcon": "INVITE",
        "altText": "check calendar"
      },
      "onClick": {
        "openLink": {
          "url": "https://example.com/calendar"
        }
      }
    }
  ]
}

TextParagraph

Es un párrafo de texto que admite formato. Para ver un ejemplo en las apps de Google Chat, consulta Cómo agregar un párrafo de texto con formato. Para obtener más información sobre el formato de texto, consulta Cómo dar formato al texto en las apps de Google Chat y Cómo dar formato al texto en los complementos de Google Workspace.

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

Representación JSON 
{
  "text": string,
  "maxLines": integer,
  "textSyntax": enum (TextSyntax)
}
Campos
text

string

Es el texto que se muestra en el widget.

maxLines

integer

Es la cantidad máxima de líneas de texto que se muestran en el widget. Si el texto supera la cantidad máxima de líneas especificada, el contenido excedente se oculta detrás de un botón de Mostrar más. Si el texto es igual o más corto que la cantidad máxima de líneas especificada, no se muestra el botón Mostrar más.

El valor predeterminado es 0, en cuyo caso se muestra todo el contexto. Se ignoran los valores negativos.

textSyntax

enum (TextSyntax)

Es la sintaxis del texto. Si no se configura, el texto se renderiza como HTML.

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

TextSyntax

Es la sintaxis que se usa para dar formato al texto.

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

Enumeraciones
TEXT_SYNTAX_UNSPECIFIED Si no se especifica, el texto se renderiza como HTML.
HTML El texto se renderiza como HTML. Este es el valor predeterminado.
MARKDOWN El texto se renderiza como Markdown.

Imagen

Imagen especificada por una URL que puede tener una acción de onClick. Para ver un ejemplo, consulta Cómo agregar una imagen.

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

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

string

Es la URL HTTPS que aloja la imagen.

Por ejemplo: 

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

object (OnClick)

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

altText

string

Es el texto alternativo de esta imagen que se usa para la accesibilidad.

OnClick

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

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

Representación JSON 
{

  // Union field data can be only one of the following:
  "action": {
    object (Action)
  },
  "openLink": {
    object (OpenLink)
  },
  "openDynamicLinkAction": {
    object (Action)
  },
  "card": {
    object (Card)
  },
  "overflowMenu": {
    object (OverflowMenu)
  }
  // End of list of possible types for union field data.
}
Campos

Campo de unión data.

data solo puede ser uno de los siguientes:

action

object (Action)

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

card

object (Card)

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

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

overflowMenu

object (OverflowMenu)

Si se especifica, onClick abre un menú ampliado.

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 controlar el formulario. Si se activa la acción, los valores del formulario se envían al servidor.

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

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

string

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

Para ver un ejemplo de uso, consulta Cómo leer datos de formularios.

parameters[]

object (ActionParameter)

Es la lista de parámetros de acción.

loadIndicator

enum (LoadIndicator)

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

persistValues

boolean

Indica si los valores del formulario persisten después de la acción. El valor predeterminado es false.

Si es true, los valores del formulario permanecen después de que se activa la acción. Para permitir que el usuario realice cambios mientras se procesa la acción, establece LoadIndicator en NONE. En el caso de los mensajes de tarjetas en las apps de Chat, también debes establecer el ResponseType de la acción en UPDATE_MESSAGE y usar el mismo cardId de la tarjeta que contenía la acción.

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

interaction

enum (Interaction)

Opcional. Se requiere cuando se abre un diálogo.

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

Si no se especifica, la app responde ejecutando un action (como abrir un vínculo o ejecutar una función) de forma normal.

Si se especifica 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. Si se especifica para un complemento, se quita toda la tarjeta y no se muestra nada en el cliente.

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

requiredWidgets[]

string

Opcional. Completa esta lista con los nombres de los widgets que esta acción necesita para un envío válido.

Si los widgets que se indican aquí no tienen un valor cuando se invoca esta acción, se aborta el envío del formulario.

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

allWidgetsAreRequired

boolean

Opcional. Si es verdadero, esta acción considera que todos los widgets son obligatorios.

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

ActionParameter

Lista de parámetros de cadena que se deben proporcionar cuando se invoca el método de acción. Por ejemplo, considera tres botones de posponer: posponer ahora, posponer un día o posponer la próxima semana. Puedes usar action method = snooze() y 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.

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

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

string

Es el nombre del parámetro para el script de acción.

value

string

El valor del parámetro.

LoadIndicator

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

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

Enumeraciones
SPINNER Muestra un spinner para indicar que se está cargando el contenido.
NONE No se muestra nada.

Interacción

Opcional. Se requiere cuando se abre un diálogo.

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

Si no se especifica, la app responde ejecutando un action (como abrir un vínculo o ejecutar una función) de forma normal.

Si se especifica 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. Si se especifica para un complemento, se quita toda la tarjeta y no se muestra nada en el cliente.

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

Enumeraciones
INTERACTION_UNSPECIFIED Valor predeterminado El objeto action se ejecuta con normalidad.
OPEN_DIALOG

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

Solo lo admiten las apps de Chat en respuesta a los clics en botones de mensajes de tarjetas. Si se especifica para un complemento, se quita toda la tarjeta y no se muestra nada en el cliente.

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

OpenAs

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

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

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

OnClose

Qué hace el cliente cuando se cierra un vínculo abierto por una acción 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 de OnClose.

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

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

Enumeraciones
NOTHING Valor predeterminado La tarjeta no se recarga y no sucede nada.
RELOAD

Vuelve a cargar la tarjeta después de que se cierra la ventana secundaria.

Si se usa en conjunto con OpenAs.OVERLAY, la ventana secundaria actúa como un diálogo modal y la tarjeta principal se bloquea hasta que se cierra la ventana secundaria.

OverflowMenu

Es un widget que presenta un menú emergente con una o más acciones que los usuarios pueden invocar. Por ejemplo, mostrar acciones secundarias en una tarjeta Puedes usar este widget cuando las acciones no caben en el espacio disponible. Para usarlo, especifica este widget en la acción OnClick de los widgets que lo admiten. Por ejemplo, en un Button.

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

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

object (OverflowMenuItem)

Obligatorio. Es la lista de opciones del menú.

OverflowMenuItem

Opción que los usuarios pueden invocar en un menú de desbordamiento.

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

Representación JSON 
{
  "startIcon": {
    object (Icon)
  },
  "text": string,
  "onClick": {
    object (OnClick)
  },
  "disabled": boolean
}
Campos
startIcon

object (Icon)

Es el ícono que se muestra delante del texto.

text

string

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

onClick

object (OnClick)

Obligatorio. Es la acción que se invoca cuando se selecciona una opción del menú. Este OnClick no puede contener un OverflowMenu. Se descarta cualquier OverflowMenu especificado y se inhabilita el elemento de menú.

disabled

boolean

Indica si la opción de menú está inhabilitada. La configuración predeterminada es "false".

Ícono

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

Admite íconos integrados y personalizados.

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

Representación JSON 
{
  "altText": string,
  "imageType": enum (ImageType),

  // Union field icons can be only one of the following:
  "knownIcon": string,
  "iconUrl": string,
  "materialIcon": {
    object (MaterialIcon)
  }
  // End of list of possible types for union field icons.
}
Campos
altText

string

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

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

imageType

enum (ImageType)

Es el estilo de recorte aplicado a la imagen. En algunos casos, aplicar un recorte CIRCLE hace que la imagen se dibuje más grande que un ícono integrado.

Campo de unión icons. Ícono que se muestra en el widget de la tarjeta. icons solo puede ser uno de los siguientes:
knownIcon

string

Muestra uno de los íconos integrados que proporciona Google Workspace.

Por ejemplo, para mostrar un ícono de avión, especifica AIRPLANE. Para un autobús, especifica BUS.

Para obtener una lista completa de los íconos compatibles, consulta los íconos integrados.

iconUrl

string

Muestra un ícono personalizado alojado en una URL HTTPS.

Por ejemplo: 

"iconUrl":
"https://developers.google.com/workspace/chat/images/quickstart-app-avatar.png"

Los tipos de archivo admitidos incluyen .png y .jpg.

materialIcon

object (MaterialIcon)

Muestra uno de los íconos de Material de Google.

Por ejemplo, para mostrar un ícono de casilla de verificación, usa 

"materialIcon": {
  "name": "check_box"
}

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

MaterialIcon

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

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

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

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

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

string

Nombre del ícono definido en el ícono de Material de Google, por ejemplo, check_box. Los nombres no válidos se descartan y se reemplazan por una cadena vacía, lo que provoca que el ícono no se renderice.

fill

boolean

Indica si el ícono se renderiza como relleno. El valor predeterminado es falso.

Para obtener una vista previa de los diferentes parámetros de configuración de los íconos, ve a Google Font Icons y ajusta la configuración en Personalizar.

weight

integer

Es el grosor del trazo del ícono. Elige entre {100, 200, 300, 400, 500, 600, 700}. Si no está presente, el valor predeterminado es 400. Si se especifica cualquier otro valor, se usará el valor predeterminado.

Para obtener una vista previa de los diferentes parámetros de configuración de los íconos, ve a Google Font Icons y ajusta la configuración en Personalizar.

grade

integer

El peso y el grado afectan el grosor de un símbolo. Los ajustes de grado son más detallados que los ajustes de peso y tienen un pequeño impacto en el tamaño del símbolo. Elige entre {-25, 0, 200}. Si no está presente, el valor predeterminado es 0. Si se especifica cualquier otro valor, se usará el valor predeterminado.

Para obtener una vista previa de los diferentes parámetros de configuración de los íconos, ve a Google Font Icons y ajusta la configuración en Personalizar.

DecoratedText

Es 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. Para ver un ejemplo en las apps de Google Chat, consulta Cómo mostrar texto con texto decorativo.

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

Representación JSON 
{
  "icon": {
    object (Icon)
  },
  "startIcon": {
    object (Icon)
  },
  "startIconVerticalAlignment": enum (VerticalAlignment),
  "topLabel": string,
  "topLabelText": {
    object (TextParagraph)
  },
  "text": string,
  "contentText": {
    object (TextParagraph)
  },
  "wrapText": boolean,
  "bottomLabel": string,
  "bottomLabelText": {
    object (TextParagraph)
  },
  "onClick": {
    object (OnClick)
  },

  // Union field control can be only one of the following:
  "button": {
    object (Button)
  },
  "switchControl": {
    object (SwitchControl)
  },
  "endIcon": {
    object (Icon)
  }
  // End of list of possible types for union field control.
}
Campos
icon
(deprecated)

object (Icon)

Se dio de baja y se reemplazó por startIcon.

startIcon

object (Icon)

Es el ícono que se muestra delante del texto.

startIconVerticalAlignment

enum (VerticalAlignment)

Opcional. Alineación vertical del ícono de inicio. Si no se configura, el ícono se centrará verticalmente.

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

topLabel

string

Es el texto que aparece sobre text. Siempre se trunca.

topLabelText

object (TextParagraph)

TextParagraph equivalente de topLabel. Siempre se trunca. Permite un formato más complejo que topLabel.

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

text

string

Obligatorio. Es el texto principal.

Admite el formato simple. Para obtener más información sobre el formato de texto, consulta Cómo dar formato al texto en las apps de Google Chat y Cómo dar formato al texto en los complementos de Google Workspace.

contentText

object (TextParagraph)

TextParagraph equivalente de text. Permite un formato más complejo que text.

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

wrapText

boolean

Es el parámetro de 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 se trunca.

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

bottomLabel

string

Es el texto que aparece debajo de text. Siempre se ajusta.

bottomLabelText

object (TextParagraph)

TextParagraph equivalente de bottomLabel. Siempre se ajusta. Permite un formato más complejo que bottomLabel.

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

onClick

object (OnClick)

Esta acción se activa cuando los usuarios hacen clic en topLabel o bottomLabel.

Campo de unión control. Un botón, un interruptor, una casilla de verificación o una imagen que aparece a la derecha del texto en el widget de decoratedText. control solo puede ser uno de los siguientes:
button

object (Button)

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

switchControl

object (SwitchControl)

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

endIcon

object (Icon)

Es un ícono que se muestra después del texto.

Admite íconos integrados y personalizados.

VerticalAlignment

Representa el atributo de alineación vertical.

Enumeraciones
VERTICAL_ALIGNMENT_UNSPECIFIED Tipo no especificado No lo utilices.
TOP Alineación con la posición superior.
MIDDLE Alineación con la posición media.
BOTTOM Alineación con la posición inferior.

Botón

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

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

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

Representación JSON 
{
  "text": string,
  "icon": {
    object (Icon)
  },
  "color": {
    object (Color)
  },
  "onClick": {
    object (OnClick)
  },
  "disabled": boolean,
  "altText": string,
  "type": enum (Type)
}
Campos
text

string

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

icon

object (Icon)

Es un ícono que se muestra dentro del botón. Si se configuran icon y text, el ícono aparecerá antes del texto.

color

object (Color)

Opcional. Es el color del botón. Si se establece, el botón type se establece en FILLED y el color de los campos text y icon se establece en un color contrastante para facilitar la lectura. Por ejemplo, si el color del botón está establecido en azul, cualquier texto o ícono del botón se establecerá en blanco.

Para establecer el color del botón, especifica un valor para los campos red, green y blue. El valor debe ser un número de punto flotante entre 0 y 1 basado en el valor de color RGB, en el que 0 (0/255) representa la ausencia de color y 1 (255/255) representa la intensidad máxima del color.

Por ejemplo, el siguiente código establece el color rojo en su intensidad máxima: 

"color": {
   "red": 1,
   "green": 0,
   "blue": 0,
}

El campo alpha no está disponible para el color del botón. Si se especifica, este campo se ignora.

onClick

object (OnClick)

Obligatorio. Es la acción que se realizará cuando un usuario haga clic en el botón, como abrir un hipervínculo o ejecutar una función personalizada.

disabled

boolean

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

altText

string

Es el texto alternativo que se usa para la accesibilidad.

Establece un texto descriptivo que les 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/workspace/chat".

type

enum (Type)

Opcional. Es el tipo de botón. Si no se configura, el tipo de botón se establece de forma predeterminada en OUTLINED. Si se establece el campo color, el tipo de botón se fuerza a FILLED y se ignora cualquier valor establecido para este campo.

Color

Representa un color en el espacio de color RGBA. Esta representación está diseñada para facilitar la conversión a representaciones de color y desde ellas en varios idiomas, en lugar de priorizar la compacidad. 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 y, con un poco de trabajo, se pueden formatear fácilmente en una cadena 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 (por ejemplo, sRGB, Adobe RGB, DCI-P3 y BT.2020). De forma predeterminada, las aplicaciones deben tener el espacio de color sRGB.

Cuando se debe decidir la igualdad de color, las implementaciones, a menos que se documente lo contrario, tratan dos colores como iguales si todos sus valores de rojo, verde, azul y alfa difieren 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

number

La cantidad de rojo en el color como un valor en el intervalo [0, 1].

green

number

La cantidad de verde en el color como un valor en el intervalo [0, 1].

blue

number

La cantidad de azul en el color como un valor en el intervalo [0, 1].

alpha

number

La fracción de este color que se debe aplicar al píxel. Es decir, el color del píxel final se define mediante la siguiente ecuación:

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

Esto significa que el valor 1.0 corresponde a un color sólido, mientras que el valor 0.0 corresponde a un color completamente transparente. Esto utiliza un mensaje de wrapper en lugar de un escalar flotante simple, para que sea posible distinguir entre un valor predeterminado y el valor que no se configura. Si se omite, este objeto de color se renderiza como un color sólido (como si el valor alfa se hubiera proporcionado de forma explícita con un valor de 1.0).

Tipo

Opcional. El tipo de un botón. Si se configura el campo color, se fuerza el campo type a FILLED.

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

Enumeraciones
TYPE_UNSPECIFIED No lo uses. Sin especificar.
OUTLINED Los botones con contorno son botones de énfasis medio. Por lo general, contienen acciones que son importantes, pero no son la acción principal en una app de Chat o un complemento.
FILLED Un botón relleno tiene un contenedor con un color sólido. Es la que tiene mayor impacto visual y se recomienda para la acción principal e importante en una app de Chat o un complemento.
FILLED_TONAL Un botón tonal con relleno es una alternativa intermedia entre los botones con relleno y los botones con contorno. Son útiles en contextos en los que un botón de prioridad más baja requiere un poco más de énfasis del que proporcionaría un botón de esquema.
BORDERLESS Un botón no tiene un contenedor invisible en su estado predeterminado. Se suele usar para las acciones de menor prioridad, en especial cuando se presentan varias opciones.

SwitchControl

Un interruptor de tipo alternar o una casilla de verificación dentro de un widget decoratedText.

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

Solo se admite en el widget decoratedText.

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

string

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

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

value

string

Es el valor que ingresa un usuario y que se devuelve como parte de un evento de entrada de formulario.

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

selected

boolean

Cuando es true, el interruptor está seleccionado.

onChangeAction

object (Action)

Es la acción que se realizará cuando cambie el estado del interruptor, como la función que se ejecutará.

controlType

enum (ControlType)

Es la forma en que aparece el botón de activación en la interfaz de usuario.

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

ControlType

Es la forma en que aparece el botón de activación en la interfaz de usuario.

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

Enumeraciones
SWITCH Es un interruptor de estilo de palanca.
CHECKBOX Se reemplazó por CHECK_BOX.
CHECK_BOX Una casilla de verificación.

ButtonList

Es una lista de botones dispuestos horizontalmente. Para ver un ejemplo en las apps de Google Chat, consulta Cómo agregar un botón.

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

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

object (Button)

Es un array de botones.

TextInput

Es un campo en el que los usuarios pueden ingresar texto. Admite sugerencias y acciones on-change. Admite la validación del envío de formularios. Cuando Action.all_widgets_are_required se establece en true o este widget se especifica en Action.required_widgets, la acción de envío se bloquea, a menos que se ingrese un valor. Para ver un ejemplo en las apps de Google Chat, consulta Cómo agregar un campo en el que un usuario puede ingresar texto.

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

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

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

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

string

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

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

label

string

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

Especifica el texto que ayuda al usuario a ingresar la información que necesita tu app. Por ejemplo, si le preguntas a alguien su nombre, pero específicamente necesitas su apellido, escribe surname en lugar de name.

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

hintText

string

Es el texto que aparece debajo del campo de entrada de texto y que tiene como objetivo ayudar a los usuarios solicitándoles que ingresen un valor determinado. Este texto siempre está visible.

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

value

string

Es el valor que ingresa un usuario y que se devuelve como parte de un evento de entrada de formulario.

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

type

enum (Type)

Es la forma en que aparece un campo de entrada de texto en la interfaz de usuario. Por ejemplo, si el campo es de una sola línea o de varias.

onChangeAction

object (Action)

Qué hacer cuando se produce un cambio en el campo de entrada de texto. Por ejemplo, un usuario que agrega o borra texto en el campo.

Entre los ejemplos de acciones que se pueden realizar, se incluyen ejecutar una función personalizada o abrir un diálogo en Google Chat.

initialSuggestions

object (Suggestions)

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

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 comiencen a escribir Jav, la lista de sugerencias se filtrará para mostrar solo Java y JavaScript.

Los valores sugeridos ayudan a guiar a los usuarios para que ingresen valores que tu app pueda comprender. Cuando se refieren 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 establece en MULTIPLE_LINE.

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

autoCompleteAction

object (Action)

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

Si no se especifica, las sugerencias se establecen con initialSuggestions y el cliente las procesa.

Si se especifica, la app realiza la acción que se indica aquí, como ejecutar una función personalizada.

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

validation

object (Validation)

Especifica la validación del formato de entrada necesaria para este campo de texto.

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

placeholderText

string

Es el texto que aparece en el campo de entrada de texto cuando está vacío. Usa este texto para solicitar a los usuarios que ingresen un valor. Por ejemplo, Enter a number from 0 to 100.

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

Tipo

Es la forma en que aparece un campo de entrada de texto en la interfaz de usuario. Por ejemplo, si es un campo de entrada de una sola línea o de varias líneas. Si se especifica initialSuggestions, type siempre será SINGLE_LINE, incluso si se establece en MULTIPLE_LINE.

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

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

RenderActions

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

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

Campos
action

Action

Acción

Campos
navigations[]

Navigation

Envía, muestra o actualiza una tarjeta.

Complementos en Google Chat.

Agrega una tarjeta nueva a la pila (navega hacia adelante). En el caso de las apps de Chat, solo está disponible para la página principal de la app.

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

navigations: {
  pushCard: CARD
}

Reemplaza la tarjeta superior por una nueva. En el caso de las apps de Chat, solo está disponible para la página principal de la app.

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

navigations: {
  updateCard: CARD
}

Sugerencias

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

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 comiencen a escribir Jav, la lista de sugerencias se filtrará 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 refieren a JavaScript, algunos usuarios pueden ingresar javascript y otros java script. Sugerir JavaScript puede estandarizar la forma en que los usuarios interactúan con tu app.

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

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

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

object (SuggestionItem)

Es una lista de sugerencias que se usan para las recomendaciones de autocompletado en los campos de entrada de texto.

SuggestionItem

Es uno de los valores sugeridos que los usuarios pueden ingresar en un campo de entrada de texto.

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

Representación JSON 
{

  // Union field content can be only one of the following:
  "text": string
  // End of list of possible types for union field content.
}
Campos

Campo de unión content.

content solo puede ser uno de los siguientes:

text

string

Es el valor de una entrada sugerida para un campo de entrada de texto. Esto equivale a lo que ingresan los usuarios.

Validación

Representa los datos necesarios para validar el widget al que está adjunto.

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

Representación JSON 
{
  "characterLimit": integer,
  "inputType": enum (InputType)
}
Campos
characterLimit

integer

Especifica el límite de caracteres para los widgets de entrada de texto. Ten en cuenta que esto solo se usa para la entrada de texto y se ignora para otros widgets.

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

inputType

enum (InputType)

Especifica el tipo de widgets de entrada.

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

InputType

Es el tipo de widget de entrada.

Enumeraciones
INPUT_TYPE_UNSPECIFIED Tipo no especificado No lo utilices.
TEXT Texto normal que acepta todos los caracteres.
INTEGER Es un valor entero.
FLOAT Es un valor de número de punto flotante.
EMAIL Una dirección de correo electrónico.
EMOJI_PICKER Es un emoji seleccionado del selector de emojis proporcionado por el sistema.

SelectionInput

Es un widget que crea uno o más elementos de la IU que los usuarios pueden seleccionar. Solo admite la validación del envío de formularios para los menús dropdown y multiselect. Cuando Action.all_widgets_are_required se establece en true o este widget se especifica en Action.required_widgets, se bloquea la acción de envío, a menos que se seleccione un valor. Por ejemplo, un menú desplegable o casillas de verificación. Puedes usar este widget para recopilar datos que se pueden predecir o enumerar. Para ver un ejemplo en las apps de Google Chat, consulta Cómo agregar elementos de IU seleccionables.

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

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

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

Representación JSON 
{
  "name": string,
  "label": string,
  "type": enum (SelectionType),
  "items": [
    {
      object (SelectionItem)
    }
  ],
  "onChangeAction": {
    object (Action)
  },
  "multiSelectMaxSelectedItems": integer,
  "multiSelectMinQueryLength": integer,

  // Union field multi_select_data_source can be only one of the following:
  "externalDataSource": {
    object (Action)
  },
  "platformDataSource": {
    object (PlatformDataSource)
  }
  // End of list of possible types for union field multi_select_data_source.
}
Campos
name

string

Obligatorio. Nombre que identifica la entrada de selección en un evento de entrada de formulario.

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

label

string

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

Especifica el texto que ayuda al usuario a ingresar la información que 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 "Selecciona la urgencia".

type

enum (SelectionType)

Es el tipo de elementos que se muestran a los usuarios en un widget de SelectionInput. Los tipos de selección admiten diferentes tipos de interacciones. Por ejemplo, los usuarios pueden seleccionar una o más casillas de verificación, pero solo pueden seleccionar un valor de un menú desplegable.

items[]

object (SelectionItem)

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

onChangeAction

object (Action)

Si se especifica, el formulario se envía cuando cambia la selección. Si no se especifica, debes incluir un botón independiente que envíe el formulario.

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

multiSelectMaxSelectedItems

integer

En el caso de los menús de selección múltiple, es la cantidad máxima de elementos que puede seleccionar un usuario. El valor mínimo es 1 artículo. Si no se especifica, el valor predeterminado es 3 elementos.

multiSelectMinQueryLength

integer

En el caso de los menús de selección múltiple, es la cantidad de caracteres de texto que ingresa un usuario antes de que el menú muestre elementos de selección sugeridos.

Si no se establece, el menú de selección múltiple usa los siguientes valores predeterminados:

  • Si el menú usa un array estático de elementos SelectionInput, el valor predeterminado es 0 caracteres y se propagan los elementos del array de inmediato.
  • Si el menú usa una fuente de datos dinámica (multi_select_data_source), el valor predeterminado es 3 caracteres antes de consultar la fuente de datos para devolver elementos sugeridos.

Campo de unión multi_select_data_source. Para un menú de selección múltiple, es una fuente de datos que propaga de forma dinámica los elementos de selección.

Disponible para las apps de Google Chat y no disponible para los complementos de Google Workspace. multi_select_data_source solo puede ser uno de los siguientes:

externalDataSource

object (Action)

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

platformDataSource

object (PlatformDataSource)

Es una fuente de datos de Google Workspace.

SelectionType

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

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

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

Enumeraciones
CHECK_BOX Es un conjunto de casillas de verificación. Los usuarios pueden seleccionar una o más casillas de verificación.
RADIO_BUTTON Es un conjunto de botones de selección. Los usuarios pueden seleccionar un botón de selección.
SWITCH Es un conjunto de interruptores. Los usuarios pueden activar uno o más interruptores.
DROPDOWN Es un menú desplegable. Los usuarios pueden seleccionar un elemento del menú.
MULTI_SELECT

Un menú con un cuadro de texto. Los usuarios pueden escribir y seleccionar uno o más elementos. En el caso de los complementos de Google Workspace, debes completar los elementos con un array estático de objetos SelectionItem.

En el caso de las apps de Google Chat, también puedes completar elementos con una fuente de datos dinámica y sugerir elementos automáticamente a medida que los usuarios escriben en el menú. Por ejemplo, los usuarios pueden comenzar a escribir el nombre de un espacio de Google Chat y el widget sugerirá automáticamente el espacio. Para completar de forma dinámica los elementos de un menú de selección múltiple, usa uno de los siguientes tipos de fuentes de datos:

  • Datos de Google Workspace: Los elementos se completan con datos de Google Workspace, como usuarios de Google Workspace o espacios de Google Chat.
  • Datos externos: Los elementos se completan a partir de una fuente de datos externa fuera de Google Workspace.

Si quieres ver ejemplos de cómo implementar menús de selección múltiple para las apps de Chat, consulta Cómo agregar un menú de selección múltiple.

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

SelectionItem

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

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

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

  // Union field start_icon can be only one of the following:
  "startIconUri": string
  // End of list of possible types for union field start_icon.
}
Campos
text

string

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

value

string

Es el valor asociado a este elemento. El cliente debe usarlo 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

boolean

Indica si el elemento está seleccionado de forma predeterminada. Si la entrada de selección solo acepta un valor (como en el caso de los botones de selección o un menú desplegable), solo configura este campo para un elemento.

bottomText

string

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

Campo de unión start_icon. En el caso de los menús de selección múltiple, es la URL del ícono que se muestra junto al campo text del elemento. Admite archivos PNG y JPEG. Debe ser una URL de HTTPS. Por ejemplo, https://developers.google.com/workspace/chat/images/quickstart-app-avatar.png. start_icon solo puede ser uno de los siguientes:
startIconUri

string

PlatformDataSource

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

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

Representación JSON 
{

  // Union field data_source can be only one of the following:
  "commonDataSource": enum (CommonDataSource),
  "hostAppDataSource": {
    object (HostAppDataSourceMarkup)
  }
  // End of list of possible types for union field data_source.
}
Campos
Campo de unión data_source. Es la fuente de datos. data_source solo puede ser uno de los siguientes:
commonDataSource

enum (CommonDataSource)

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

hostAppDataSource

object (HostAppDataSourceMarkup)

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

Este campo admite las bibliotecas cliente de las APIs de Google, pero no está disponible en las bibliotecas cliente de Cloud. Para obtener más información, consulta Instala las bibliotecas cliente.

CommonDataSource

Es una fuente de datos que comparten todas las aplicaciones de Google Workspace.

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

Enumeraciones
UNKNOWN Valor predeterminado No lo uses.
USER Usuarios de Google Workspace El usuario solo puede ver y seleccionar usuarios de su organización de Google Workspace.

HostAppDataSourceMarkup

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

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

Representación JSON 
{

  // Union field data_source can be only one of the following:
  "chatDataSource": {
    object (ChatClientDataSourceMarkup)
  }
  // End of list of possible types for union field data_source.
}
Campos
Campo de unión data_source. Es la aplicación de Google Workspace que completa los elementos de un menú de selección múltiple. data_source solo puede ser uno de los siguientes:
chatDataSource

object (ChatClientDataSourceMarkup)

Es una fuente de datos de Google Chat.

ChatClientDataSourceMarkup

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

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

Representación JSON 
{

  // Union field source can be only one of the following:
  "spaceDataSource": {
    object (SpaceDataSource)
  }
  // End of list of possible types for union field source.
}
Campos
Campo de unión source. Es la fuente de datos de Google Chat. source solo puede ser uno de los siguientes:
spaceDataSource

object (SpaceDataSource)

Espacios de Google Chat de los que el usuario es miembro.

SpaceDataSource

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

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

Representación JSON 
{
  "defaultToCurrentSpace": boolean
}
Campos
defaultToCurrentSpace

boolean

Si se configura como true, el menú de selección múltiple selecciona el espacio de Google Chat actual como un elemento de forma predeterminada.

DateTimePicker

Permite que los usuarios ingresen una fecha, una hora o ambas. Admite la validación del envío de formularios. Cuando Action.all_widgets_are_required se establece en true o este widget se especifica en Action.required_widgets, se bloquea la acción de envío, a menos que se seleccione un valor. Para ver un ejemplo en las apps de Google Chat, consulta Cómo permitir que un usuario elija una fecha y hora.

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

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

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

string

Nombre con el que se identifica el objeto DateTimePicker 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

Es el texto que les 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 Appointment date o Appointment date and time.

type

enum (DateTimePickerType)

Indica si el widget admite el ingreso de una fecha, una hora o la fecha y la hora.

valueMsEpoch

int64

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

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

  • DATE_AND_TIME : Es una fecha y hora del calendario en UTC. Por ejemplo, para representar el 1 de enero de 2023 a las 12:00 p.m. UTC, usa 1672574400000.
  • DATE_ONLY : Una fecha de calendario a las 00:00:00 UTC. Por ejemplo, para representar el 1 de enero de 2023, usa 1672531200000.
  • TIME_ONLY : Una hora en UTC. Por ejemplo, para representar las 12 p.m., usa 43200000 (o 12 * 60 * 60 * 1000).
timezoneOffsetDate

integer

Es el número que representa el desplazamiento de la zona horaria con respecto al UTC, en minutos. Si se configura, el campo valueMsEpoch se muestra en la zona horaria especificada. Si no se establece, el valor predeterminado es la configuración de zona horaria del usuario.

onChangeAction

object (Action)

Se activa cuando el usuario hace clic en Guardar o Borrar en la interfaz de DateTimePicker.

DateTimePickerType

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

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

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

Separador

Este tipo no tiene campos.

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

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

Por ejemplo, el siguiente código 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. Para las columnas responsivas o para incluir más que texto o imágenes, usa Columns. Para ver un ejemplo en las apps de Google Chat, consulta Cómo mostrar una cuadrícula con una colección de elementos.

Una cuadrícula admite cualquier cantidad de columnas y elementos. La cantidad de filas se determina dividiendo la cantidad de elementos 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.

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

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

"grid": {
  "title": "A fine collection of items",
  "columnCount": 2,
  "borderStyle": {
    "type": "STROKE",
    "cornerRadius": 4
  },
  "items": [
    {
      "image": {
        "imageUri": "https://www.example.com/image.png",
        "cropStyle": {
          "type": "SQUARE"
        },
        "borderStyle": {
          "type": "STROKE"
        }
      },
      "title": "An item",
      "textAlignment": "CENTER"
    }
  ],
  "onClick": {
    "openLink": {
      "url": "https://www.example.com"
    }
  }
}
Representación JSON 
{
  "title": string,
  "items": [
    {
      object (GridItem)
    }
  ],
  "borderStyle": {
    object (BorderStyle)
  },
  "columnCount": integer,
  "onClick": {
    object (OnClick)
  }
}
Campos
title

string

Es el texto que se muestra en el encabezado de la cuadrícula.

items[]

object (GridItem)

Son los elementos que se mostrarán en la cuadrícula.

borderStyle

object (BorderStyle)

Es el estilo de borde que se aplicará a cada elemento de la cuadrícula.

columnCount

integer

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

onClick

object (OnClick)

Cada elemento de la cuadrícula individual reutiliza esta devolución de llamada, pero con el identificador y el índice del elemento en la lista de elementos agregados a los parámetros de la devolución de llamada.

GridItem

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

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

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

string

Es un identificador especificado por el usuario para este elemento de la cuadrícula. Este identificador se devuelve en los parámetros de devolución de llamada onClick de la cuadrícula principal.

image

object (ImageComponent)

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

title

string

Es el título del elemento de la cuadrícula.

subtitle

string

Es el subtítulo del elemento de la cuadrícula.

layout

enum (GridItemLayout)

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

ImageComponent

Representa una imagen.

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

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

string

Es la URL de la imagen.

altText

string

Es la etiqueta de accesibilidad de la imagen.

cropStyle

object (ImageCropStyle)

Es el estilo de recorte que se aplicará a la imagen.

borderStyle

object (BorderStyle)

Es el estilo de borde que se aplicará a la imagen.

ImageCropStyle

Representa el estilo de recorte aplicado a una imagen.

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

Por ejemplo, así se aplica una relación de aspecto de 16:9: 

cropStyle {
 "type": "RECTANGLE_CUSTOM",
 "aspectRatio": 16/9
}
Representación JSON 
{
  "type": enum (ImageCropType),
  "aspectRatio": number
}
Campos
type

enum (ImageCropType)

Es el tipo de recorte.

aspectRatio

number

Es la relación de aspecto que se usará si el tipo de recorte es RECTANGLE_CUSTOM.

Por ejemplo, así se aplica una relación de aspecto de 16:9: 

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

ImageCropType

Representa el estilo de recorte aplicado a una imagen.

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

Enumeraciones
IMAGE_CROP_TYPE_UNSPECIFIED No lo uses. Sin especificar.
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.

BorderStyle

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

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

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

enum (BorderType)

Es el tipo de borde.

strokeColor

object (Color)

Son los colores que se usarán cuando el tipo sea BORDER_TYPE_STROKE.

Para establecer el color del trazo, especifica un valor para los campos red, green y blue. El valor debe ser un número de punto flotante entre 0 y 1 basado en el valor de color RGB, en el que 0 (0/255) representa la ausencia de color y 1 (255/255) representa la intensidad máxima del color.

Por ejemplo, el siguiente código establece el color rojo en su intensidad máxima: 

"color": {
   "red": 1,
   "green": 0,
   "blue": 0,
}

El campo alpha no está disponible para el color del trazo. Si se especifica, este campo se ignora.

cornerRadius

integer

Radio de esquina del borde.

BorderType

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

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

Enumeraciones
BORDER_TYPE_UNSPECIFIED No lo uses. Sin especificar.
NO_BORDER Sin borde.
STROKE Valor predeterminado Esquema

GridItemLayout

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

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

Enumeraciones
GRID_ITEM_LAYOUT_UNSPECIFIED No lo uses. Sin especificar.
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 una tarjeta o un diálogo. Puedes agregar widgets a cada columna. Los widgets aparecerán en el orden en que se especifiquen. Para ver un ejemplo en las apps de Google Chat, consulta Cómo mostrar tarjetas y diálogos en columnas.

La altura de cada columna está determinada por la columna más alta. Por ejemplo, si la primera columna es más alta que la segunda, ambas columnas tendrán la altura de la primera. Como 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 con el campo HorizontalSizeStyle. Si el ancho de la pantalla del usuario es demasiado estrecho, la segunda columna se ajusta debajo de la primera:

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

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

Disponible para las apps de Google Chat y los complementos de Google Workspace. Las UIs de complementos que admiten columnas incluyen las siguientes:

  • Es el diálogo que se muestra cuando los usuarios abren el complemento desde un borrador de correo electrónico.
  • Es el diálogo que se muestra cuando los usuarios abren el complemento desde el menú Agregar adjunto en un evento del Calendario de Google.
Representación JSON 
{
  "columnItems": [
    {
      object (Column)
    }
  ]
}
Campos
columnItems[]

object (Column)

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

Columna

Una columna.

Complementos de Google Workspace y apps de Chat

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

enum (HorizontalSizeStyle)

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

horizontalAlignment

enum (HorizontalAlignment)

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

verticalAlignment

enum (VerticalAlignment)

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

widgets[]

object (Widgets)

Es un array de widgets incluidos en una columna. Los widgets aparecen en el orden en que se especifican.

HorizontalSizeStyle

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.

Complementos de Google Workspace y apps de Chat

Enumeraciones
HORIZONTAL_SIZE_STYLE_UNSPECIFIED No lo uses. Sin especificar.
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 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.

HorizontalAlignment

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

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

Enumeraciones
HORIZONTAL_ALIGNMENT_UNSPECIFIED No lo uses. Sin especificar.
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 a la izquierda. En el caso de los diseños de derecha a izquierda, se alinea a la derecha.
CENTER Alinea los widgets al centro de la columna.
END Alinea los widgets con la posición final de la columna. Para los diseños de izquierda a derecha, alinea los widgets a la derecha. Para diseños de derecha a izquierda, alinea los widgets a la izquierda.

VerticalAlignment

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

Complementos de Google Workspace y apps de Chat

Enumeraciones
VERTICAL_ALIGNMENT_UNSPECIFIED No lo uses. Sin especificar.
CENTER Valor predeterminado Alinea los widgets al centro de una columna.
TOP Alinea los widgets a la parte superior de una columna.
BOTTOM Alinea los widgets en la parte inferior de una columna.

Widgets

Son los widgets compatibles que puedes incluir en una columna.

Complementos de Google Workspace y apps de Chat

Representación JSON 
{

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

Campo de unión data.

data solo puede ser uno de los siguientes:

textParagraph

object (TextParagraph)

TextParagraph widget.

image

object (Image)

Image widget.

decoratedText

object (DecoratedText)

DecoratedText widget.

buttonList

object (ButtonList)

ButtonList widget.

textInput

object (TextInput)

TextInput widget.

selectionInput

object (SelectionInput)

SelectionInput widget.

dateTimePicker

object (DateTimePicker)

DateTimePicker widget.

chipList

object (ChipList)

ChipList widget.

ChipList

Es una lista de chips dispuestos horizontalmente que se pueden desplazar horizontalmente o ajustar a la siguiente línea.

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

Representación JSON 
{
  "layout": enum (Layout),
  "chips": [
    {
      object (Chip)
    }
  ]
}
Campos
layout

enum (Layout)

Diseño de lista de chips especificado.

chips[]

object (Chip)

Es un array de chips.

Diseño

Diseño de la lista de chips.

Enumeraciones
LAYOUT_UNSPECIFIED No lo uses. Sin especificar.
WRAPPED Valor predeterminado La lista de chips se ajusta a la siguiente línea si no hay suficiente espacio horizontal.
HORIZONTAL_SCROLLABLE Los chips se desplazan horizontalmente si no caben en el espacio disponible.

Chip

Es un chip de texto, ícono o texto e ícono en el que los usuarios pueden hacer clic.

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

Representación JSON 
{
  "icon": {
    object (Icon)
  },
  "label": string,
  "onClick": {
    object (OnClick)
  },
  "enabled": boolean,
  "disabled": boolean,
  "altText": string
}
Campos
icon

object (Icon)

Imagen del ícono. Si se configuran icon y text, el ícono aparecerá antes del texto.

label

string

Es el texto que se muestra dentro del chip.

onClick

object (OnClick)

Opcional. Es la acción que se realizará cuando un usuario haga clic en el chip, como abrir un hipervínculo o ejecutar una función personalizada.

enabled
(deprecated)

boolean

Indica si el chip está en un estado activo y responde a las acciones del usuario. El valor predeterminado es true. Obsoleta. En su lugar, usa disabled.

disabled

boolean

Indica si el chip está en un estado inactivo y si ignora las acciones del usuario. El valor predeterminado es false.

altText

string

Es el texto alternativo que se usa para la accesibilidad.

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

Un carrusel, también conocido como control deslizante, rota y muestra una lista de widgets en formato de presentación de diapositivas, con botones para navegar al widget anterior o siguiente.

Por ejemplo, esta es una representación JSON de un carrusel que contiene tres widgets de párrafo de texto. 

{
  "carouselCards": [
    {
      "widgets": [
        {
          "textParagraph": {
            "text": "First text paragraph in carousel",
          }
        }
      ]
    },
    {
      "widgets": [
        {
          "textParagraph": {
            "text": "Second text paragraph in carousel",
          }
        }
      ]
    },
    {
      "widgets": [
        {
          "textParagraph": {
            "text": "Third text paragraph in carousel",
          }
        }
      ]
    }
  ]
}

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

Representación JSON 
{
  "carouselCards": [
    {
      object (CarouselCard)
    }
  ]
}
Campos
carouselCards[]

object (CarouselCard)

Es una lista de las tarjetas incluidas en el carrusel.

CarouselCard

Es una tarjeta que se puede mostrar como un elemento de carrusel. Disponible para las apps de Google Chat y no disponible para los complementos de Google Workspace.

Representación JSON 
{
  "widgets": [
    {
      object (NestedWidget)
    }
  ],
  "footerWidgets": [
    {
      object (NestedWidget)
    }
  ]
}
Campos
widgets[]

object (NestedWidget)

Es una lista de widgets que se muestran en la tarjeta del carrusel. Los widgets se muestran en el orden en que se especifican.

footerWidgets[]

object (NestedWidget)

Es una lista de widgets que se muestran en la parte inferior de la tarjeta del carrusel. Los widgets se muestran en el orden en que se especifican.

NestedWidget

Es una lista de widgets que se pueden mostrar en un diseño contenedor, como un CarouselCard. Disponible para las apps de Google Chat y no disponible para los complementos de Google Workspace.

Representación JSON 
{

  // Union field data can be only one of the following:
  "textParagraph": {
    object (TextParagraph)
  },
  "buttonList": {
    object (ButtonList)
  },
  "image": {
    object (Image)
  }
  // End of list of possible types for union field data.
}
Campos

Campo de unión data.

data solo puede ser uno de los siguientes:

textParagraph

object (TextParagraph)

Es un widget de párrafo de texto.

buttonList

object (ButtonList)

Es un widget de lista de botones.

image

object (Image)

Es un widget de imagen.

CollapseControl

Representa un control de expansión y contracción.

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

Representación JSON 
{
  "horizontalAlignment": enum (HorizontalAlignment),
  "expandButton": {
    object (Button)
  },
  "collapseButton": {
    object (Button)
  }
}
Campos
horizontalAlignment

enum (HorizontalAlignment)

Alineación horizontal del botón de expansión y contracción.

expandButton

object (Button)

Opcional. Define un botón personalizable para expandir la sección. Se deben configurar los campos expandButton y collapseButton. Solo un conjunto de campos no entrará en vigencia. Si no se establece este campo, se usa el botón predeterminado.

collapseButton

object (Button)

Opcional. Define un botón personalizable para contraer la sección. Se deben configurar los campos expandButton y collapseButton. Solo un conjunto de campos no entrará en vigencia. Si no se establece este campo, se usa el botón predeterminado.

DividerStyle

Es el estilo del divisor de una tarjeta. Actualmente, solo se usa para los divisores entre las secciones de las tarjetas.

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

Enumeraciones
DIVIDER_STYLE_UNSPECIFIED No lo uses. Sin especificar.
SOLID_DIVIDER Opción predeterminada. Renderiza un divisor sólido.
NO_DIVIDER Si se establece, no se renderiza ningún divisor. Este estilo quita por completo el divisor del diseño. El resultado es equivalente a no agregar un divisor.

CardAction

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

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

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

string

Es la etiqueta que se muestra como el elemento del menú de acciones.

onClick

object (OnClick)

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

CardFixedFooter

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

Establecer fixedFooter sin especificar primaryButton ni secondaryButton genera un error.

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

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

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

object (Button)

Es 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

object (Button)

Es 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. Si se establece secondaryButton, también debes establecer primaryButton.

DisplayStyle

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

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

Enumeraciones
DISPLAY_STYLE_UNSPECIFIED No lo uses. Sin especificar.
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, la tarjeta aparecerá en la pila de tarjetas. Si la tarjeta no tiene encabezado, se usa uno generado.
REPLACE Valor predeterminado La tarjeta se muestra reemplazando la vista de la tarjeta superior en la pila de tarjetas.