Cards v2

Card

Interface de card mostrada em uma mensagem do Google Chat ou em um complemento do Google Workspace.

Os cards são compatíveis com um layout definido, elementos interativos da IU, como botões, e rich media, como imagens. Use cards para apresentar informações detalhadas, coletar informações dos usuários e orientá-los a seguir para a próxima etapa.

Para saber como criar cards, consulte a seguinte documentação:

• Para apps do Google Chat, consulte Criar IUs dinâmicas, interativas e consistentes com cards.
• Para complementos do Google Workspace, consulte Interfaces baseadas em cartões.

Exemplo: card de mensagem para um app do Google Chat

Para criar a mensagem do card de exemplo no Google Chat, use o seguinte JSON:

{
  "cardsV2": [
    {
      "cardId": "unique-card-id",
      "card": {
        "header": {
          "title": "Sasha",
          "subtitle": "Software Engineer",
          "imageUrl":
          "https://developers.google.com/chat/images/quickstart-app-avatar.png",
          "imageType": "CIRCLE",
          "imageAltText": "Avatar for Sasha",
        },
        "sections": [
          {
            "header": "Contact Info",
            "collapsible": true,
            "uncollapsibleWidgetsCount": 1,
            "widgets": [
              {
                "decoratedText": {
                  "startIcon": {
                    "knownIcon": "EMAIL",
                  },
                  "text": "[e-mail]",
                }
              },
              {
                "decoratedText": {
                  "startIcon": {
                    "knownIcon": "PERSON",
                  },
                  "text": "<font color=\"#80e27e\">Online</font>",
                },
              },
              {
                "decoratedText": {
                  "startIcon": {
                    "knownIcon": "PHONE",
                  },
                  "text": "[phone]",
                }
              },
              {
                "buttonList": {
                  "buttons": [
                    {
                      "text": "Share",
                      "onClick": {
                        "openLink": {
                          "url": "https://example.com/share",
                        }
                      }
                    },
                    {
                      "text": "Edit",
                      "onClick": {
                        "action": {
                          "function": "goToView",
                          "parameters": [
                            {
                              "key": "viewType",
                              "value": "EDIT",
                            }
                          ],
                        }
                      }
                    },
                  ],
                }
              },
            ],
          },
        ],
      },
    }
  ],
}

Representação 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) O cabeçalho do cartão. Um cabeçalho geralmente contém uma imagem principal e um título. Os cabeçalhos sempre aparecem na parte superior de um cartão.
sections[]	object (Section) Contém um conjunto de widgets. Cada seção tem um cabeçalho opcional próprio. As seções são visualmente separadas por um divisor de linhas. Para ver um exemplo nos apps do Google Chat, consulte a seção de cards.
sectionDividerStyle	enum (DividerStyle) O estilo de divisor entre seções.
cardActions[]	object (CardAction) As ações do card. As ações são adicionadas ao menu da barra de ferramentas do card. Como os cards de apps do Chat não têm uma barra de ferramentas, cardActions[] não tem suporte desses apps. Por exemplo, o JSON a seguir constrói um menu de ações de card com as opções Settings e 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 Nome do cartão. Usado como identificador de cartão na navegação de cartões. Como os apps do Chat não têm suporte à navegação com cards, eles ignoram esse campo.
fixedFooter	object (CardFixedFooter) O rodapé fixo exibido na parte inferior deste card. Definir fixedFooter sem especificar um primaryButton ou um secondaryButton causa um erro. Compatível com os complementos do Google Workspace e os apps do Chat. Para apps do Chat, você pode usar rodapés fixos em caixas de diálogo, mas não mensagens de cards.
displayStyle	enum (DisplayStyle) Nos complementos do Google Workspace, define as propriedades de exibição do peekCardHeader. Indisponível em apps do Chat.
peekCardHeader	object (CardHeader) Ao exibir conteúdo contextual, o cabeçalho do card funciona como um marcador de posição para que o usuário possa navegar entre os cards da página inicial e os cards contextuais. Indisponível em apps do Chat.

CardHeader

Representa um cabeçalho de card. Para ver um exemplo nos apps do Google Chat, consulte Cabeçalho do card.

Representação JSON
{ "title": string, "subtitle": string, "imageType": enum (ImageType), "imageUrl": string, "imageAltText": string }

Campos
title	string Obrigatório. O título do cabeçalho do cartão. O cabeçalho tem uma altura fixa: se um título e um subtítulo forem especificados, cada um ocupa uma linha. Se apenas o título for especificado, ele ocupará as duas linhas.
subtitle	string O subtítulo do cabeçalho do cartão. Se especificado, aparece na própria linha abaixo de title.
imageType	enum (ImageType) É o formato usado para cortar a imagem.
imageUrl	string O URL HTTPS da imagem no cabeçalho do cartão.
imageAltText	string O texto alternativo dessa imagem que é usado para acessibilidade.

ImageType

É o formato usado para cortar a imagem.

Enums
SQUARE	Valor padrão. Aplica uma máscara quadrada à imagem. Por exemplo, uma imagem 4 x 3 torna-se 3 x 3.
CIRCLE	Aplica uma máscara circular à imagem. Por exemplo, uma imagem 4x3 se torna um círculo com um diâmetro de 3.

Seção

Uma seção contém uma coleção de widgets que são renderizados verticalmente na ordem especificada.

Representação JSON
{ "header": string, "widgets": [ { object (Widget) } ], "collapsible": boolean, "uncollapsibleWidgetsCount": integer }

Campos
header	string Texto que aparece na parte de cima de uma seção. Oferece suporte a texto formatado em HTML simples. Para mais informações sobre formatação de texto, consulte Formatar texto em apps do Google Chat e Formatar texto em complementos do Google Workspace.
widgets[]	object (Widget) Todos os widgets da seção. Precisa conter pelo menos um widget.
collapsible	boolean Indica se a seção pode ser recolhida. As seções recolhíveis ocultam alguns ou todos os widgets, mas os usuários podem expandi-la para revelar os widgets ocultos clicando em Mostrar mais. Os usuários podem ocultar os widgets novamente clicando em Mostrar menos. Para determinar quais widgets estão ocultos, especifique uncollapsibleWidgetsCount.
uncollapsibleWidgetsCount	integer O número de widgets que não podem ser recolhidos que permanecem visíveis mesmo quando uma seção é recolhida. Por exemplo, quando uma seção contém cinco widgets e a uncollapsibleWidgetsCount está definida como 2, os dois primeiros widgets são sempre mostrados e os três últimos são recolhidos por padrão. O uncollapsibleWidgetsCount é considerado apenas quando collapsible é true.

Widget

Cada card é composto de widgets.

Um widget é um objeto composto que pode representar texto, imagens, botões e outros tipos de objetos.

Representação 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) } // End of list of possible types for union field data. }

Campos
horizontalAlignment	enum (HorizontalAlignment) Especifica se os widgets se alinham à esquerda, à direita ou ao centro de uma coluna.
Campo de união data. Um widget só pode ter um dos itens a seguir. Você pode usar vários campos de widget para exibir mais itens. data pode ser apenas de um dos tipos a seguir:
textParagraph	object (TextParagraph) Mostra um parágrafo de texto. Oferece suporte a texto formatado em HTML simples. Para mais informações sobre formatação de texto, consulte Formatar texto em apps do Google Chat e Formatar texto em complementos do Google Workspace. Por exemplo, o JSON a seguir cria um texto em negrito: "textParagraph": { "text": " <b>bold text</b>" }
image	object (Image) Exibe uma imagem. Por exemplo, o JSON a seguir cria uma imagem com texto alternativo: "image": { "imageUrl": "https://developers.google.com/chat/images/quickstart-app-avatar.png", "altText": "Chat app avatar" }
decoratedText	object (DecoratedText) Exibe um item de texto decorado. Por exemplo, o JSON a seguir cria um widget de texto decorado que mostra endereços de e-mail: "decoratedText": { "icon": { "knownIcon": "EMAIL" }, "topLabel": "Email Address", "text": "[e-mail]", "bottomLabel": "This is a new Email address!", "switchControl": { "name": "has_send_welcome_email_to_sasha", "selected": false, "controlType": "CHECKBOX" } }
buttonList	object (ButtonList) Uma lista de botões. Por exemplo, o JSON a seguir cria dois botões. O primeiro é um botão de texto azul e o segundo é um botão de imagem que abre um link: "buttonList": { "buttons": [ { "text": "Edit", "color": { "red": 0, "green": 0, "blue": 1, "alpha": 1 }, "disabled": true, }, { "icon": { "knownIcon": "INVITE", "altText": "check calendar" }, "onClick": { "openLink": { "url": "https://example.com/calendar" } } } ] }
textInput	object (TextInput) Exibe uma caixa de texto em que os usuários podem digitar. Por exemplo, o JSON a seguir cria uma entrada de texto para um endereço de e-mail: "textInput": { "name": "mailing_address", "label": "Mailing Address" } Como outro exemplo, o JSON a seguir cria uma entrada de texto para uma linguagem de programação com sugestões estáticas: "textInput": { "name": "preferred_programing_language", "label": "Preferred Language", "initialSuggestions": { "items": [ { "text": "C++" }, { "text": "Java" }, { "text": "JavaScript" }, { "text": "Python" } ] } }
selectionInput	object (SelectionInput) Mostra um controle de seleção que permite aos usuários selecionar itens. Os controles de seleção podem ser caixas de seleção, botões de opção, interruptores ou menus suspensos. Por exemplo, o JSON a seguir cria um menu suspenso que permite aos usuários escolher um tamanho: "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) Exibe um widget que permite aos usuários inserir uma data, hora ou data e hora. Por exemplo, o JSON a seguir cria um seletor de data e hora para agendar um horário: "dateTimePicker": { "name": "appointment_time", "label": "Book your appointment at:", "type": "DATE_AND_TIME", "valueMsEpoch": "796435200000" }
divider	object (Divider) Exibe um divisor de linhas horizontal entre widgets. Por exemplo, o JSON a seguir cria um divisor: "divider": { }
grid	object (Grid) Mostra uma grade com uma coleção de itens. Uma grade pode ter várias colunas e itens. O número de linhas é determinado pelos limites superiores do número de itens divididos pelo número de colunas. Uma grade com 10 itens e 2 colunas tem 5 linhas. Uma grade com 11 itens e 2 colunas tem 6 linhas. Por exemplo, o JSON abaixo cria uma grade de duas colunas com um único item: "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) Exibe até duas colunas. Para incluir mais de duas colunas ou usar linhas, utilize o widget Grid. Por exemplo, o JSON abaixo cria duas colunas, cada uma contendo parágrafos 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" } } ] } ] }

TextParagraph

Um parágrafo de texto compatível com a formatação. Para ver um exemplo nos apps do Google Chat, consulte Parágrafo de texto. Para mais informações sobre formatação de texto, consulte Formatar texto em apps do Google Chat e Formatar texto em complementos do Google Workspace.

Representação JSON
{ "text": string }

Campos
text	string O texto que é mostrado no widget.

Imagem

Uma imagem especificada por um URL e que pode ter uma ação onClick. Para ver um exemplo, consulte Imagem.

Representação JSON
{ "imageUrl": string, "onClick": { object (OnClick) }, "altText": string }

Campos
imageUrl	string O URL HTTPS que hospeda a imagem. Exemplo: https://developers.google.com/chat/images/quickstart-app-avatar.png
onClick	object (OnClick) Quando um usuário clica na imagem, o clique aciona essa ação.
altText	string O texto alternativo dessa imagem que é usado para acessibilidade.

OnClick

Representa como responder quando os usuários clicam em um elemento interativo em um card, como um botão.

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

Campos
Campo de união data. data pode ser apenas de um dos tipos a seguir:
action	object (Action) Se especificado, uma ação é acionada por este onClick.
openLink	object (OpenLink) Se especificado, este onClick aciona uma ação de abrir link.
openDynamicLinkAction	object (Action) Um complemento aciona essa ação quando é necessário abrir um link. Ele é diferente do openLink acima, porque precisa se comunicar com o servidor para receber o link. Dessa forma, é necessário algum trabalho de preparação para o cliente web antes que a resposta da ação de link aberto seja retornada. Compatível com complementos do Google Workspace, mas não com apps do Google Chat.
card	object (Card) Um novo cartão é enviado para a pilha depois de um clique, se especificado. Compatível com complementos do Google Workspace, mas não com apps do Google Chat.

Ação

Uma ação que descreve o comportamento quando o formulário é enviado. Por exemplo, você pode invocar um script do Apps Script para processar o formulário. Se a ação for acionada, os valores do formulário serão enviados ao servidor.

Representação JSON
{ "function": string, "parameters": [ { object (ActionParameter) } ], "loadIndicator": enum (LoadIndicator), "persistValues": boolean, "interaction": enum (Interaction) }

Campos
function	string Uma função personalizada a ser invocada quando o elemento que o contém for clicado ou ativado de outra forma. Para conferir um exemplo de uso, consulte Criar cards interativos.
parameters[]	object (ActionParameter) Lista de parâmetros de ação.
loadIndicator	enum (LoadIndicator) Especifica o indicador de carregamento que a ação exibe ao fazer a chamada.
persistValues	boolean Indica se os valores do formulário persistem após a ação. O valor padrão é false. Se true, os valores do formulário permanecem depois que a ação é acionada. Para permitir que o usuário faça mudanças enquanto a ação é processada, defina LoadIndicator como NONE. Para mensagens de card em apps de Chat, também é necessário definir o ResponseType da ação como UPDATE_MESSAGE e usar o mesmo cardId do card que continha a ação. Se for false, os valores do formulário serão apagados quando a ação for acionada. Para evitar que o usuário faça mudanças enquanto a ação está sendo processada, defina LoadIndicator como SPINNER.
interaction	enum (Interaction) Opcional. Obrigatório ao abrir uma caixa de diálogo. O que fazer em resposta a uma interação com o usuário, como clicar em um botão em uma mensagem de card. Se não for especificado, o app responderá normalmente executando uma action, por exemplo, abrindo um link ou executando uma função. Ao especificar uma interaction, o app pode responder de maneiras interativas especiais. Por exemplo, definindo interaction como OPEN_DIALOG, o app pode abrir uma caixa de diálogo. Quando especificado, um indicador de carregamento não é exibido. Compatível com apps do Chat, mas não com complementos do Google Workspace. Se especificado para um complemento, o cartão inteiro será removido e nada será exibido no cliente.

ActionParameter

Lista de parâmetros de string a serem fornecidos quando o método de ação for invocado. Por exemplo, considere três botões de soneca: adiar agora, soneca um dia ou soneca próxima semana. Você pode usar action method = snooze(), passando o tipo e o tempo de soneca na lista de parâmetros de string.

Para saber mais, consulte CommonEventObject.

Representação JSON
{ "key": string, "value": string }

Campos
key	string Nome do parâmetro do script de ação.
value	string O valor do parâmetro.

LoadIndicator

Especifica o indicador de carregamento que a ação exibe ao fazer a chamada.

Enums
SPINNER	Mostra um ícone de carregamento para indicar que o conteúdo está sendo carregado.
NONE	Nada é exibido.

Interação

Opcional. Obrigatório ao abrir uma caixa de diálogo.

O que fazer em resposta a uma interação com o usuário, como clicar em um botão em uma mensagem de card.

Se não for especificado, o app responderá normalmente executando uma action, por exemplo, abrindo um link ou executando uma função.

Ao especificar uma interaction, o app pode responder de maneiras interativas especiais. Por exemplo, definindo interaction como OPEN_DIALOG, o app pode abrir uma caixa de diálogo.

Quando especificado, um indicador de carregamento não é exibido.

Compatível com apps do Chat, mas não com complementos do Google Workspace. Se especificado para um complemento, o cartão inteiro será removido e nada será exibido no cliente.

Enums
INTERACTION_UNSPECIFIED	Valor padrão. O action é executado normalmente.
OPEN_DIALOG	Abre uma caixa de diálogo, uma interface em janela baseada em cards que os apps de chat usam para interagir com os usuários. Compatível apenas com apps do Chat em resposta a cliques em botões em mensagens de cards. Não é compatível com os complementos do Google Workspace. Se especificado para um complemento, o cartão inteiro será removido e nada será exibido no cliente.

OpenLink

Representa um evento onClick que abre um hiperlink.

Representação JSON
{ "url": string, "openAs": enum (OpenAs), "onClose": enum (OnClose) }

Campos
url	string O URL a ser aberto.
openAs	enum (OpenAs) Como abrir um link. Indisponível em apps do Chat.
onClose	enum (OnClose) Se o cliente se esquece de um link depois de abri-lo ou o observa até que a janela seja fechada. Indisponível em apps do Chat.

OpenAs

Quando uma ação OnClick abre um link, o cliente pode abri-lo como uma janela em tamanho original (se esse for o frame usado pelo cliente) ou uma sobreposição (como um pop-up). A implementação depende dos recursos da plataforma do cliente, e o valor selecionado poderá ser ignorado se o cliente não for compatível. FULL_SIZE tem suporte de todos os clientes.

Compatível com complementos do Google Workspace, mas não com apps do Google Chat.

Enums
FULL_SIZE	O link é aberto como uma janela em tamanho original (se esse for o frame usado pelo cliente).
OVERLAY	O link é aberto como uma sobreposição, como um pop-up.

OnClose

O que o cliente faz quando um link aberto por uma ação OnClick é fechado.

A implementação depende dos recursos da plataforma do cliente. Por exemplo, um navegador da Web pode abrir um link em uma janela pop-up com um gerenciador OnClose.

Se os gerenciadores OnOpen e OnClose estiverem definidos e a plataforma do cliente não aceitar os dois valores, OnClose vai ter precedência.

Compatível com complementos do Google Workspace, mas não com apps do Google Chat.

Enums
NOTHING	Valor padrão. O cartão não é recarregado. Nada acontece.
RELOAD	Recarrega o card depois que a janela filha é fechada. Se usada em conjunto com OpenAs.OVERLAY, a janela filha vai atuar como uma caixa de diálogo modal, e o card pai vai ser bloqueado até que a filha seja fechada.

DecoratedText

Um widget que exibe texto com decorações opcionais, como uma etiqueta acima ou abaixo do texto, um ícone na frente do texto, um widget de seleção ou um botão após o texto. Para ver um exemplo nos apps do Google Chat, consulte Texto decorado.

Representação JSON
{ "icon": { object (Icon) }, "startIcon": { object (Icon) }, "topLabel": string, "text": string, "wrapText": boolean, "bottomLabel": string, "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) Este item está obsoleto. O uso foi descontinuado e substituído por startIcon.
startIcon	object (Icon) O ícone exibido na frente do texto.
topLabel	string O texto que aparece acima de text. Sempre trunca.
text	string Obrigatório. O texto principal. Oferece suporte a formatação simples. Para mais informações sobre formatação de texto, consulte Formatar texto em apps do Google Chat e Formatar texto em complementos do Google Workspace.
wrapText	boolean A configuração de ajuste de texto. Se true, o texto será unido e mostrado em várias linhas. Caso contrário, o texto será truncado. Só se aplica a text, não a topLabel e bottomLabel.
bottomLabel	string O texto que aparece abaixo de text. Sempre encapsula.
onClick	object (OnClick) Esta ação é acionada quando os usuários clicam em topLabel ou bottomLabel.
Campo de união control. Um botão, uma chave, uma caixa de seleção ou uma imagem que aparece à direita do texto no widget decoratedText. control pode ser apenas de um dos tipos a seguir:
button	object (Button) Um botão em que um usuário pode clicar para acionar uma ação.
switchControl	object (SwitchControl) Um widget de alternância em que um usuário pode clicar para mudar o estado e acionar uma ação.
endIcon	object (Icon) Ícone exibido após o texto. Compatível com ícones integrados e personalizados.

Icon

Ícone exibido em um widget em um cartão. Para ver um exemplo dos apps do Google Chat, consulte Ícone.

Compatível com ícones integrados e personalizados.

Representação JSON
{ "altText": string, "imageType": enum (ImageType), // Union field icons can be only one of the following: "knownIcon": string, "iconUrl": string // End of list of possible types for union field icons. }

Campos
altText	string Opcional. Uma descrição do ícone usado para acessibilidade. Se não for especificado, será fornecido o valor padrão Button. Como prática recomendada, defina uma descrição útil para o que o ícone exibe e, se aplicável, o que ele faz. Por exemplo, A user's account portrait ou Opens a new browser tab and navigates to the Google Chat developer documentation at https://developers.google.com/chat. Se o ícone for definido em um Button, o altText aparecerá como texto auxiliar quando o usuário passar o cursor sobre o botão. No entanto, se o botão também definir text, o altText do ícone será ignorado.
imageType	enum (ImageType) O estilo de corte aplicado à imagem. Em alguns casos, aplicar um corte CIRCLE faz com que a imagem seja desenhada maior que um ícone integrado.
Campo de união icons. O ícone exibido no widget do cartão. icons pode ser apenas de um dos tipos a seguir:
knownIcon	string Mostre um dos ícones integrados fornecidos pelo Google Workspace. Por exemplo, para exibir um ícone de avião, especifique AIRPLANE. Para ônibus, especifique BUS. Para uma lista completa de ícones compatíveis, consulte Ícones integrados.
iconUrl	string Mostre um ícone personalizado hospedado em um URL HTTPS. Exemplo: "iconUrl": "https://developers.google.com/chat/images/quickstart-app-avatar.png" Os tipos de arquivo aceitos são .png e .jpg.

Botão

Um botão de texto, ícone ou texto e ícone em que os usuários podem clicar. Para ver um exemplo dos apps do Google Chat, consulte a Lista de botões.

Para transformar uma imagem em um botão clicável, especifique um Image (não um ImageComponent) e defina uma ação onClick.

Representação JSON
{ "text": string, "icon": { object (Icon) }, "color": { object (Color) }, "onClick": { object (OnClick) }, "disabled": boolean, "altText": string }

Campos
text	string O texto exibido dentro do botão.
icon	object (Icon) A imagem do ícone. Se icon e text estiverem definidos, o ícone vai aparecer antes do texto.
color	object (Color) Se definida, o botão será preenchido com uma cor de plano de fundo sólida, e a cor da fonte será alterada para manter o contraste com a cor de fundo. Por exemplo, definir um fundo azul provavelmente resultará em um texto branco. Se essa propriedade não for definida, o plano de fundo da imagem será branco e a cor da fonte será azul. Para vermelho, verde e azul, o valor de cada campo é um número float que pode ser expresso de duas maneiras: como um número entre 0 e 255 dividido por 255 (153/255) ou como um valor entre 0 e 1 (0,6). Zero representa a ausência de uma cor e 1 ou 255/255 representa a presença total dessa cor na escala RGB. Se quiser, defina alpha, que define um nível de transparência usando esta equação: pixel color = alpha * (this color) + (1.0 - alpha) * (background color) Para alpha, um valor de 1 corresponde a uma cor sólida, e um valor de 0 corresponde a uma cor completamente transparente. Por exemplo, a cor abaixo representa um meio vermelho transparente: "color": { "red": 1, "green": 0, "blue": 0, "alpha": 0.5 }
onClick	object (OnClick) Obrigatório. A ação a ser realizada quando um usuário clica no botão, como abrir um hiperlink ou executar uma função personalizada.
disabled	boolean Se true, o botão vai aparecer em um estado inativo e não responderá às ações do usuário.
altText	string O texto alternativo usado para acessibilidade. Defina um texto descritivo que informe aos usuários o que o botão faz. Por exemplo, se um botão abrir um hiperlink, você pode escrever: "Abre uma nova guia do navegador e acessa a documentação do desenvolvedor do Google Chat em https://developers.google.com/chat".

Cor

Representa uma cor no espaço de cores RGBA. Essa representação foi projetada para simplificar a conversão de/para representações de cores em vários idiomas em vez de compactação. Por exemplo, os campos dessa representação podem ser trivialmente fornecidos ao construtor de java.awt.Color em Java, ou ao método +colorWithRed:green:blue:alpha da UIColor no iOS e, com um pouco de trabalho, podem ser facilmente formatados em uma string rgba() CSS em JavaScript.

Esta página de referência não tem informações sobre o espaço de cor absoluto que deve ser usado para interpretar o valor RGB, por exemplo, sRGB, Adobe RGB, DCI-P3 e BT.2020. Por padrão, os aplicativos usam o espaço de cores sRGB.

Quando a igualdade de cor precisa ser decidida, as implementações, a menos que documentado de outra forma, tratam duas cores como iguais se todos os valores vermelho, verde, azul e alfa tiverem uma diferença no máximo em 1e-5.

Exemplo (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();
 }
 // ...

Exemplo (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;
}
// ...

Exemplo (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('');
};

// ...

Representação JSON
{ "red": number, "green": number, "blue": number, "alpha": number }

Campos
red	number A quantidade de vermelho na cor como um valor no intervalo [0, 1].
green	number A quantidade de verde na cor como um valor no intervalo [0, 1].
blue	number A quantidade de azul na cor como um valor no intervalo [0, 1].
alpha	number A fração desta cor que deve ser aplicada ao pixel. Ou seja, a cor final do pixel é definida pela equação: pixel color = alpha * (this color) + (1.0 - alpha) * (background color) Isto significa que um valor de 1,0 corresponde a uma cor sólida, enquanto um valor de 0,0 corresponde a uma cor completamente transparente. Esse recurso usa uma mensagem de wrapper, em vez de um escalar flutuante simples, para que seja possível distinguir entre um valor padrão e o valor que está sendo desativado. Se omitido, o objeto de cor é renderizado como uma cor sólida, como se o valor alfa tivesse recebido explicitamente um valor de 1,0.

SwitchControl

Uma chave de estilo de alternância ou uma caixa de seleção dentro de um widget decoratedText.

Compatível apenas com o widget decoratedText.

Representação JSON
{ "name": string, "value": string, "selected": boolean, "onChangeAction": { object (Action) }, "controlType": enum (ControlType) }

Campos
name	string O nome pelo qual o widget de alternância é identificado em um evento de entrada de formulário. Para detalhes sobre como trabalhar com entradas de formulário, consulte Receber dados de formulário.
value	string O valor inserido por um usuário, retornado como parte de um evento de entrada de formulário. Para detalhes sobre como trabalhar com entradas de formulário, consulte Receber dados de formulário.
selected	boolean Quando true, a chave será selecionada.
onChangeAction	object (Action) A ação a ser executada quando o estado da chave for alterado, como qual função será executada.
controlType	enum (ControlType) Como a chave aparece na interface do usuário.

ControlType

Como a chave aparece na interface do usuário.

Enums
SWITCH	Um interruptor no estilo de alternância.
CHECKBOX	O uso foi descontinuado e substituído por CHECK_BOX.
CHECK_BOX	Uma caixa de seleção.

ButtonList

Uma lista de botões dispostos horizontalmente. Para ver um exemplo dos apps do Google Chat, consulte a Lista de botões.

Representação JSON
{ "buttons": [ { object (Button) } ] }

Campos
buttons[]	object (Button) Uma matriz de botões.

TextInput

Um campo em que os usuários podem inserir texto. Dá suporte a sugestões e ações ao mudar. Para ver um exemplo nos apps do Google Chat, consulte Entrada de texto.

Os apps de chat recebem e podem processar o valor do texto inserido durante os eventos de entrada no formulário. Para detalhes sobre como trabalhar com entradas de formulário, consulte Receber dados de formulário.

Quando você precisar coletar dados indefinidos ou abstratos dos usuários, use uma entrada de texto. Para coletar dados definidos ou enumerados dos usuários, use o widget SelectionInput.

Representação JSON
{ "name": string, "label": string, "hintText": string, "value": string, "type": enum (Type), "onChangeAction": { object (Action) }, "initialSuggestions": { object (Suggestions) }, "autoCompleteAction": { object (Action) }, "placeholderText": string }

Campos
name	string O nome pelo qual a entrada de texto é identificada em um evento de entrada de formulário. Para detalhes sobre como trabalhar com entradas de formulário, consulte Receber dados de formulário.
label	string Texto que aparece acima do campo de entrada de texto na interface do usuário. Especifique um texto que ajude o usuário a inserir as informações necessárias para o app. Por exemplo, se você estiver perguntando o nome de alguém, mas precisar especificamente do sobrenome, escreva surname em vez de name. Obrigatório se hintText não for especificado. Caso contrário, é opcional.
hintText	string Texto que aparece abaixo do campo de entrada de texto para ajudar os usuários solicitando que eles insiram um determinado valor. Esse texto sempre fica visível. Obrigatório se label não for especificado. Caso contrário, é opcional.
value	string O valor inserido por um usuário, retornado como parte de um evento de entrada de formulário. Para detalhes sobre como trabalhar com entradas de formulário, consulte Receber dados de formulário.
type	enum (Type) Como um campo de entrada de texto aparece na interface do usuário. Por exemplo, se o campo é de uma ou várias linhas.
onChangeAction	object (Action) O que fazer quando ocorre uma mudança no campo de entrada de texto. Por exemplo, um usuário adicionando ao campo ou excluindo texto. Exemplos de ações a serem realizadas incluem executar uma função personalizada ou abrir uma caixa de diálogo no Google Chat.
initialSuggestions	object (Suggestions) Valores sugeridos que os usuários podem inserir. Esses valores aparecem quando os usuários clicam no campo de entrada de texto. À medida que os usuários digitam, os valores sugeridos são filtrados dinamicamente para corresponder ao que os usuários digitaram. Por exemplo, um campo de entrada de texto para linguagem de programação pode sugerir Java, JavaScript, Python e C++. Quando o usuário começar a digitar Jav, a lista de sugestões vai mostrar apenas Java e JavaScript. Os valores sugeridos ajudam a orientar os usuários a inserir valores que podem ser compreendidos pelo app. Ao se referir ao JavaScript, alguns usuários podem inserir javascript e outros java script. A sugestão de JavaScript pode padronizar como os usuários interagem com seu app. Quando especificado, TextInput.type é sempre SINGLE_LINE, mesmo que esteja definido como MULTIPLE_LINE.
autoCompleteAction	object (Action) Opcional. Especifique qual ação realizar quando o campo de entrada de texto oferecer sugestões aos usuários que interagem com ele. Se não for especificada, as sugestões serão definidas por initialSuggestions e serão processadas pelo cliente. Se especificado, o app realiza a ação especificada aqui, como executar uma função personalizada. Compatível com complementos do Google Workspace, mas não com apps do Google Chat.
placeholderText	string Texto que aparece no campo de entrada de texto quando o campo está vazio. Use esse texto para solicitar que os usuários insiram um valor. Por exemplo: Enter a number from 0 to 100 Compatível com apps do Google Chat, mas não com complementos do Google Workspace.

Tipo

Como um campo de entrada de texto aparece na interface do usuário. por exemplo, seja um campo de entrada de linha única ou uma entrada de várias linhas.

Se initialSuggestions for especificado, type vai ser sempre SINGLE_LINE, mesmo que esteja definido como MULTIPLE_LINE.

Enums
SINGLE_LINE	O campo de entrada de texto tem uma altura fixa de uma linha.
MULTIPLE_LINE	O campo de entrada de texto tem uma altura fixa de várias linhas.

RenderActions

Um conjunto de instruções de renderização que instrui um card a realizar uma ação ou instrui o app host do complemento ou o app do Chat a realizar uma ação específica do app.

Campos
action	Action

Ação

Campos
navigations[]	Navigation Envie ou atualize os cards exibidos.

Navegação

Adicione um novo card à pilha (navegue para frente).

navigations: {
  pushCard: CARD
}

Substitua o cartão superior por um novo.

navigations: {
  updateCard: CARD
}

Campos
Campo de união navigate_action. navigate_action pode ser apenas de um dos tipos a seguir:
pushCard	Card A pilha de cards empurra uma carta para ela.
updateCard	Card A pilha de cards atualiza o card superior com um novo card e preserva os valores dos campos preenchidos do formulário. Para um campo não equivalente, o valor é descartado.

Sugestões

Valores sugeridos que os usuários podem inserir. Esses valores aparecem quando os usuários clicam no campo de entrada de texto. À medida que os usuários digitam, os valores sugeridos são filtrados dinamicamente para corresponder ao que os usuários digitaram.

Por exemplo, um campo de entrada de texto para linguagem de programação pode sugerir Java, JavaScript, Python e C++. Quando o usuário começar a digitar Jav, a lista de sugestões vai mostrar Java e JavaScript.

Os valores sugeridos ajudam a orientar os usuários a inserir valores que podem ser compreendidos pelo app. Ao se referir ao JavaScript, alguns usuários podem inserir javascript e outros java script. A sugestão de JavaScript pode padronizar como os usuários interagem com seu app.

Quando especificado, TextInput.type é sempre SINGLE_LINE, mesmo que esteja definido como MULTIPLE_LINE.

Representação JSON
{ "items": [ { object (SuggestionItem) } ] }

Campos
items[]	object (SuggestionItem) Uma lista de sugestões usadas para recomendações de preenchimento automático em campos de entrada de texto.

SuggestionItem

Um valor sugerido que os usuários podem inserir em um campo de entrada de texto.

Representação 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ão content. content pode ser apenas de um dos tipos a seguir:
text	string O valor de uma entrada sugerida para um campo de entrada de texto. Isso é equivalente ao que os próprios usuários inserem.

SelectionInput

Um widget que cria um ou mais itens de IU que os usuários podem selecionar. Por exemplo, um menu suspenso ou caixas de seleção. É possível usar esse widget para coletar dados que podem ser previstos ou enumerados. Para conferir um exemplo nos apps do Google Chat, consulte Entrada de seleção.

Os apps de chat podem processar o valor de itens que os usuários selecionam ou inserem. Para detalhes sobre como trabalhar com entradas de formulário, consulte Receber dados de formulário.

Para coletar dados indefinidos ou abstratos dos usuários, use o widget TextInput.

Representação 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 Nome que identifica a entrada de seleção em um evento de entrada de formulário. Para detalhes sobre como trabalhar com entradas de formulário, consulte Receber dados de formulário.
label	string O texto que aparece acima do campo de entrada de seleção na interface do usuário. Especifique um texto que ajude o usuário a inserir as informações necessárias para o app. Por exemplo, se os usuários selecionarem a urgência de um tíquete de trabalho em um menu suspenso, o rótulo poderá ser "Urgência" ou "Selecionar urgência".
type	enum (SelectionType) O tipo de itens mostrados aos usuários em um widget SelectionInput. Os tipos de seleção são compatíveis com diferentes tipos de interações. Por exemplo, os usuários podem marcar uma ou mais caixas de seleção, mas só podem selecionar um valor em um menu suspenso.
items[]	object (SelectionItem) Uma matriz de itens selecionáveis. Por exemplo, uma matriz de botões de opção ou caixas de seleção. Aceita até 100 itens.
onChangeAction	object (Action) Se especificado, o formulário será enviado quando a seleção mudar. Se não for especificado, você precisará especificar um botão separado para enviar o formulário. Para detalhes sobre como trabalhar com entradas de formulário, consulte Receber dados de formulário.
multiSelectMaxSelectedItems	integer Para menus de seleção múltipla, o número máximo de itens que um usuário pode selecionar. O valor mínimo é um item. Se não for especificado, o padrão será de três itens.
multiSelectMinQueryLength	integer Em menus de seleção múltipla, o número de caracteres de texto que um usuário insere antes das consultas do app do Chat são preenchidos automaticamente e mostram itens sugeridos no menu. Se não for especificado, o padrão será 0 caractere para fontes de dados estáticas e 3 caracteres para fontes de dados externas.
Campo de união multi_select_data_source. Somente para apps de chat. Para um menu de seleção múltipla, a fonte de dados que preenche os itens de seleção. multi_select_data_source pode ser apenas de um dos tipos a seguir:
externalDataSource	object (Action) Uma fonte de dados externa, como uma base de dados relacional.
platformDataSource	object (PlatformDataSource) Uma fonte de dados do Google Workspace.

SelectionType

O formato dos itens que os usuários podem selecionar. Diferentes opções suportam diferentes tipos de interações. Por exemplo, os usuários podem marcar várias caixas de seleção, mas só podem selecionar um item em um menu suspenso.

Cada entrada de seleção é compatível com um tipo de seleção. Não é possível misturar caixas de seleção e interruptores, por exemplo.

Enums
CHECK_BOX	Um conjunto de caixas de seleção. Os usuários podem marcar uma ou mais caixas de seleção.
RADIO_BUTTON	Um conjunto de botões de opção. Os usuários podem selecionar um botão de opção.
SWITCH	Um conjunto de interruptores. Os usuários podem ativar um ou mais interruptores.
DROPDOWN	Um menu suspenso. Os usuários podem selecionar um item do menu.
MULTI_SELECT	Compatível com apps do Chat, mas não com complementos do Google Workspace. Um menu de seleção múltipla para dados estáticos ou dinâmicos. Na barra de menus, os usuários selecionam um ou mais itens. Os usuários também podem inserir valores para preencher os dados dinâmicos. Por exemplo, quando os usuários começarem a digitar o nome de um espaço do Google Chat, o widget vai sugerir automaticamente o espaço. Para preencher itens de um menu de seleção múltipla, você pode usar um dos seguintes tipos de fontes de dados: Dados estáticos: os itens são especificados como objetos SelectionItem no widget. Até cem itens Dados do Google Workspace: os itens são preenchidos com dados do Google Workspace, como usuários ou espaços do Google Chat. Dados externos: os itens são preenchidos em uma fonte de dados externa fora do Google Workspace. Para ver exemplos de como implementar menus de seleção múltipla, consulte a página de widgets SelectionInput .

SelectionItem

Um item que os usuários podem selecionar em uma entrada de seleção, como uma caixa de seleção ou um interruptor.

Representação JSON
{ "text": string, "value": string, "selected": boolean, "startIconUri": string, "bottomText": string }

Campos
text	string É o texto que identifica ou descreve o item para os usuários.
value	string O valor associado a este item. O cliente deve usar isso como um valor de entrada de formulário. Para detalhes sobre como trabalhar com entradas de formulário, consulte Receber dados de formulário.
selected	boolean Indica se o item está selecionado por padrão. Se a entrada de seleção aceitar apenas um valor (como para botões de opção ou um menu suspenso), defina esse campo apenas para um item.
startIconUri	string Para menus de seleção múltipla, o URL do ícone exibido ao lado do campo text do item. Oferece suporte a arquivos PNG e JPEG. Precisa ser um URL HTTPS. Por exemplo, https://developers.google.com/chat/images/quickstart-app-avatar.png.
bottomText	string Para menus de seleção múltipla, uma descrição ou rótulo de texto exibido abaixo do campo text do item.

PlatformDataSource

Somente para apps de chat. Para um widget SelectionInput que usa um menu de seleção múltipla, uma fonte de dados do Google Workspace. Usado para preencher itens em um menu de seleção múltipla.

Representação 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ão data_source. A fonte de dados. data_source pode ser apenas de um dos tipos a seguir:
commonDataSource	enum (CommonDataSource) Uma fonte de dados compartilhada por todos os apps do Google Workspace, como os usuários de uma organização do produto.
hostAppDataSource	object (HostAppDataSourceMarkup) Uma fonte de dados exclusiva de um aplicativo host do Google Workspace, como os espaços do Google Chat.

CommonDataSource

Somente para apps de chat. Uma fonte de dados compartilhada por todos os aplicativos do Google Workspace.

Enums
UNKNOWN	Valor padrão. Não use.
USER	usuários do Google Workspace. O usuário só pode ver e selecionar usuários da organização do Google Workspace dele.

HostAppDataSourceMarkup

Somente para apps de chat. Para um widget SelectionInput que usa um menu de seleção múltipla, uma fonte de dados de um aplicativo do Google Workspace. A fonte de dados preenche os itens de seleção do menu de seleção múltipla.

Representação 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ão data_source. O app Google Workspace que preenche itens para um menu de seleção múltipla. data_source pode ser apenas de um dos tipos a seguir:
chatDataSource	object (ChatClientDataSourceMarkup) Uma fonte de dados do Google Chat.

ChatClientDataSourceMarkup

Somente para apps de chat. Para um widget SelectionInput que usa um menu de seleção múltipla, uma fonte de dados do Google Chat. A fonte de dados preenche os itens de seleção do menu de seleção múltipla. Por exemplo, um usuário pode selecionar espaços do Google Chat de que participa.

Representação 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ão source. A fonte de dados do Google Chat. source pode ser apenas de um dos tipos a seguir:
spaceDataSource	object (SpaceDataSource) Espaços do Google Chat de que o usuário participa.

SpaceDataSource

Uma fonte de dados que preenche os espaços do Google Chat como itens de seleção para um menu de seleção múltipla. Só preenche os espaços de que o usuário participa.

Representação JSON
{ "defaultToCurrentSpace": boolean }

Campos
defaultToCurrentSpace	boolean Se definido como true, o menu de seleção múltipla vai selecionar o espaço atual do Google Chat como um item por padrão.

DateTimePicker

Permite que os usuários insiram uma data, uma hora ou uma data e hora. Para conferir um exemplo nos apps do Google Chat, consulte Seletor de data e hora.

Os usuários podem inserir texto ou usar o seletor para selecionar datas e horários. Se os usuários inserirem uma data ou hora inválida, o seletor vai mostrar um erro solicitando que os usuários insiram as informações corretamente.

Representação JSON
{ "name": string, "label": string, "type": enum (DateTimePickerType), "valueMsEpoch": string, "timezoneOffsetDate": integer, "onChangeAction": { object (Action) } }

Campos
name	string O nome pelo qual o DateTimePicker é identificado em um evento de entrada de formulário. Para detalhes sobre como trabalhar com entradas de formulário, consulte Receber dados de formulário.
label	string O texto que solicita que os usuários insiram uma data, hora ou data e hora. Por exemplo, se os usuários estiverem agendando um horário, use um marcador como Appointment date ou Appointment date and time.
type	enum (DateTimePickerType) Define se o widget é compatível com a inserção de uma data, hora ou data e hora.
valueMsEpoch	string (int64 format) Valor padrão exibido no widget, em milissegundos, desde o horário da era Unix (link em inglês). Especifique o valor com base no tipo de seletor ( DateTimePickerType): DATE_AND_TIME: data e hora do calendário em UTC. Por exemplo, para representar 1o de janeiro de 2023 às 12h UTC, use 1672574400000. DATE_ONLY : uma data do calendário às 00:00:00 UTC. Por exemplo, para representar 1o de janeiro de 2023, use 1672531200000. TIME_ONLY: um horário em UTC. Por exemplo, para representar 12h, use 43200000 (ou 12 * 60 * 60 * 1000).
timezoneOffsetDate	integer O número que representa o deslocamento do fuso horário do UTC, em minutos. Se definido, o valueMsEpoch será mostrado no fuso horário especificado. Se não for definida, o valor padrão será a configuração de fuso horário do usuário.
onChangeAction	object (Action) Acionado quando o usuário clica em Salvar ou Limpar na interface DateTimePicker.

DateTimePickerType

O formato de data e hora no widget DateTimePicker. Determina se os usuários podem inserir uma data, hora ou data e hora.

Enums
DATE_AND_TIME	Os usuários inserem uma data e hora.
DATE_ONLY	Os usuários inserem uma data.
TIME_ONLY	Os usuários inserem um horário.

Divisor

Esse tipo não tem campos.

Exibe um divisor entre widgets como uma linha horizontal. Para ver um exemplo nos apps do Google Chat, consulte Divisor.

Por exemplo, o JSON a seguir cria um divisor:

"divider": {}

Grade

Mostra uma grade com uma coleção de itens. Os itens só podem incluir texto ou imagens. Para colunas responsivas ou incluir mais do que texto ou imagens, use Columns. Para conferir um exemplo nos apps do Google Chat, consulte Grade.

Uma grade pode ter várias colunas e itens. O número de linhas é determinado por itens divididos por colunas. Uma grade com 10 itens e 2 colunas tem 5 linhas. Uma grade com 11 itens e 2 colunas tem 6 linhas.

Por exemplo, o JSON abaixo cria uma grade de duas colunas com um único item:

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

Representação JSON
{ "title": string, "items": [ { object (GridItem) } ], "borderStyle": { object (BorderStyle) }, "columnCount": integer, "onClick": { object (OnClick) } }

Campos
title	string O texto que aparece no cabeçalho da grade.
items[]	object (GridItem) Os itens a serem exibidos na grade.
borderStyle	object (BorderStyle) O estilo de borda a ser aplicado a cada item da grade.
columnCount	integer O número de colunas a serem exibidas na grade. Um valor padrão será usado se o campo não for especificado. Esse valor padrão será diferente dependendo do local em que a grade for mostrada (caixa de diálogo ou complementar).
onClick	object (OnClick) Esse callback é reutilizado por cada item da grade, mas com o identificador e o índice do item na lista de itens adicionados aos parâmetros do callback.

GridItem

Representa um item em um layout de grade. Os itens podem conter texto, uma imagem ou texto e imagem.

Representação JSON
{ "id": string, "image": { object (ImageComponent) }, "title": string, "subtitle": string, "layout": enum (GridItemLayout) }

Campos
id	string Um identificador especificado pelo usuário para este item da grade. Esse identificador é retornado nos parâmetros de callback onClick da grade pai.
image	object (ImageComponent) A imagem que é exibida no item da grade.
title	string Título do item da grade.
subtitle	string O subtítulo do item da grade.
layout	enum (GridItemLayout) O layout a ser usado para o item de grade.

ImageComponent

Representa uma imagem.

Representação JSON
{ "imageUri": string, "altText": string, "cropStyle": { object (ImageCropStyle) }, "borderStyle": { object (BorderStyle) } }

Campos
imageUri	string O URL da imagem.
altText	string O rótulo de acessibilidade da imagem.
cropStyle	object (ImageCropStyle) O estilo de corte a ser aplicado à imagem.
borderStyle	object (BorderStyle) O estilo de borda a ser aplicado à imagem.

ImageCropStyle

Representa o estilo de corte aplicado a uma imagem.

Por exemplo, veja como aplicar uma proporção de 16:9:

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

Representação JSON
{ "type": enum (ImageCropType), "aspectRatio": number }

Campos
type	enum (ImageCropType) O tipo de corte.
aspectRatio	number A proporção a ser usada se o tipo de corte for RECTANGLE_CUSTOM. Por exemplo, veja como aplicar uma proporção de 16:9: cropStyle { "type": "RECTANGLE_CUSTOM", "aspectRatio": 16/9 }

ImageCropType

Representa o estilo de corte aplicado a uma imagem.

Enums
IMAGE_CROP_TYPE_UNSPECIFIED	Não use. Não especificado.
SQUARE	Valor padrão. Aplica um corte quadrado.
CIRCLE	Aplica um corte circular.
RECTANGLE_CUSTOM	Aplica um corte retangular com uma proporção personalizada. Defina a proporção personalizada com aspectRatio.
RECTANGLE_4_3	Aplica um corte retangular com a proporção de 4:3.

BorderStyle

As opções de estilo para a borda de um card ou widget, incluindo o tipo e a cor da borda.

Representação JSON
{ "type": enum (BorderType), "strokeColor": { object (Color) }, "cornerRadius": integer }

Campos
type	enum (BorderType) O tipo de borda.
strokeColor	object (Color) As cores a serem usadas quando o tipo for BORDER_TYPE_STROKE.
cornerRadius	integer O raio do canto da borda.

BorderType

Representa os tipos de borda aplicados aos widgets.

Enums
BORDER_TYPE_UNSPECIFIED	Não use. Não especificado.
NO_BORDER	Valor padrão. Sem borda.
STROKE	Esboço.

GridItemLayout

Representa as várias opções de layout disponíveis para um item de grade.

Enums
GRID_ITEM_LAYOUT_UNSPECIFIED	Não use. Não especificado.
TEXT_BELOW	O título e o subtítulo são mostrados abaixo da imagem do item da grade.
TEXT_ABOVE	O título e o subtítulo são mostrados acima da imagem do item da grade.

Colunas

O widget Columns mostra até duas colunas em uma mensagem de card ou uma caixa de diálogo. É possível adicionar widgets a cada coluna, que aparecem na ordem em que são especificados. Para conferir um exemplo nos apps do Google Chat, consulte Colunas.

A altura de cada coluna é determinada pela coluna mais alta. Por exemplo, se a primeira coluna for mais alta que a segunda, ambas terão a altura da primeira. Como cada coluna pode conter um número diferente de widgets, não é possível definir linhas ou alinhar widgets entre as colunas.

As colunas são exibidas lado a lado. Você pode personalizar a largura de cada coluna usando o campo HorizontalSizeStyle. Se a largura da tela do usuário for muito estreita, a segunda coluna será quebrada abaixo da primeira:

• Na Web, a segunda coluna é encapsulada se a largura da tela for menor ou igual a 480 pixels.
• Em dispositivos iOS, a segunda coluna é unida se a largura da tela for menor ou igual a 300 pt.
• Em dispositivos Android, a segunda coluna une a largura se a largura da tela for menor ou igual a 320 dp.

Para incluir mais de duas colunas ou usar linhas, utilize o widget Grid.

Compatível com apps do Chat, mas não com complementos do Google Workspace.

Representação JSON
{ "columnItems": [ { object (Column) } ] }

Campos
columnItems[]	object (Column) Uma matriz de colunas. É possível incluir até duas colunas em um card ou caixa de diálogo.

Coluna

Uma coluna.

Representação JSON
{ "horizontalSizeStyle": enum (HorizontalSizeStyle), "horizontalAlignment": enum (HorizontalAlignment), "verticalAlignment": enum (VerticalAlignment), "widgets": [ { object (Widgets) } ] }

Campos
horizontalSizeStyle	enum (HorizontalSizeStyle) Especifica como uma coluna preenche a largura do card.
horizontalAlignment	enum (HorizontalAlignment) Especifica se os widgets se alinham à esquerda, à direita ou ao centro de uma coluna.
verticalAlignment	enum (VerticalAlignment) Especifica se os widgets se alinham à parte superior, inferior ou ao centro de uma coluna.
widgets[]	object (Widgets) Uma matriz de widgets incluídos em uma coluna. Os widgets aparecem na ordem em que são especificados.

HorizontalSizeStyle

Especifica como uma coluna preenche a largura do card. A largura de cada coluna depende de HorizontalSizeStyle e da largura dos widgets dentro da coluna.

Enums
HORIZONTAL_SIZE_STYLE_UNSPECIFIED	Não use. Não especificado.
FILL_AVAILABLE_SPACE	Valor padrão. A coluna preenche o espaço disponível, até 70% da largura do card. Se as duas colunas estiverem definidas como FILL_AVAILABLE_SPACE, cada uma preencherá 50% do espaço.
FILL_MINIMUM_SPACE	A coluna preenche o mínimo de espaço possível e não pode ultrapassar 30% da largura do card.

HorizontalAlignment

Especifica se os widgets se alinham à esquerda, à direita ou ao centro de uma coluna.

Enums
HORIZONTAL_ALIGNMENT_UNSPECIFIED	Não use. Não especificado.
START	Valor padrão. Alinha os widgets à posição inicial da coluna. Para layouts da esquerda para a direita, alinha-se à esquerda. Para layouts da direita para a esquerda, alinha-se à direita.
CENTER	Alinha os widgets ao centro da coluna.
END	Alinha os widgets à posição final da coluna. Para layouts da esquerda para a direita, alinha os widgets à direita. Para layouts da direita para a esquerda, alinha os widgets à esquerda.

VerticalAlignment

Especifica se os widgets se alinham à parte superior, inferior ou ao centro de uma coluna.

Enums
VERTICAL_ALIGNMENT_UNSPECIFIED	Não use. Não especificado.
CENTER	Valor padrão. Alinha os widgets ao centro de uma coluna.
TOP	Alinha os widgets à parte superior de uma coluna.
BOTTOM	Alinha os widgets à parte inferior de uma coluna.

Widgets

Os widgets compatíveis que podem ser incluídos em uma coluna.

Representação 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) } // End of list of possible types for union field data. }

Campos
Campo de união data. data pode ser apenas de um dos tipos a seguir:
textParagraph	object (TextParagraph) Widget TextParagraph.
image	object (Image) Widget Image.
decoratedText	object (DecoratedText) Widget DecoratedText.
buttonList	object (ButtonList) Widget ButtonList.
textInput	object (TextInput) Widget TextInput.
selectionInput	object (SelectionInput) Widget SelectionInput.
dateTimePicker	object (DateTimePicker) Widget DateTimePicker.

DividerStyle

O estilo de divisor de um card. No momento, só é usado para divisores entre seções do card.

Enums
DIVIDER_STYLE_UNSPECIFIED	Não use. Não especificado.
SOLID_DIVIDER	Opção padrão. Renderize um divisor sólido entre seções.
NO_DIVIDER	Se definido, nenhum divisor será renderizado entre as seções.

CardAction

Uma ação do card é a ação associada ao cartão. Por exemplo, um card de fatura pode incluir ações como excluir fatura, enviar fatura por e-mail ou abrir a fatura em um navegador.

Indisponível em apps do Chat.

Representação JSON
{ "actionLabel": string, "onClick": { object (OnClick) } }

Campos
actionLabel	string O rótulo exibido como o item do menu de ações.
onClick	object (OnClick) A ação onClick desse item de ação.

CardFixedFooter

Um rodapé permanente (fixo) que aparece na parte inferior do card. Para ver um exemplo nos apps do Google Chat, consulte Rodapé do card.

Definir fixedFooter sem especificar um primaryButton ou um secondaryButton causa um erro.

Compatível com os complementos do Google Workspace e os apps do Chat. Para apps do Chat, você pode usar rodapés fixos em caixas de diálogo, mas não mensagens de cards.

Representação JSON
{ "primaryButton": { object (Button) }, "secondaryButton": { object (Button) } }

Campos
primaryButton	object (Button) O botão principal do rodapé fixo. O botão precisa ser de texto com texto e cores definidos.
secondaryButton	object (Button) O botão secundário do rodapé fixo. O botão precisa ser de texto com texto e cores definidos. Se secondaryButton estiver definido, você também vai precisar definir primaryButton.

DisplayStyle

Nos complementos do Google Workspace, determina como um card é exibido.

Indisponível em apps do Chat.

Enums
DISPLAY_STYLE_UNSPECIFIED	Não use. Não especificado.
PEEK	O cabeçalho aparece na parte de baixo da barra lateral, cobrindo parcialmente o card atual da pilha. Clicar no cabeçalho exibe o cartão na pilha de cartões. Se o cartão não tiver cabeçalho, será usado um cabeçalho gerado.
REPLACE	Valor padrão. O card é exibido substituindo a visualização do card superior na pilha de cards.