Grade

Compatível apenas com caixas de diálogo. O suporte para mensagens de cartão estará disponível em breve.

Um widget Grid exibe uma grade com um conjunto de itens.

O widget é compatível com sugestões, que ajudam os usuários a inserir dados uniformes, e ações em mudanças, que são Actions executadas quando uma mudança ocorre no campo de entrada de texto, como um usuário que adiciona ou exclui texto.

Uma grade aceita qualquer número de 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.

Os apps de chat recebem e podem processar o valor dos itens selecionados durante eventos de entrada do formulário. Veja mais detalhes sobre como trabalhar com entradas de formulário em Receber dados do formulário.

Exemplo: uma grade de duas colunas com um único item

A imagem a seguir exibe uma caixa de diálogo que consiste em um widget grid. Ele cria uma grade de duas colunas com um único item.

Este é o JSON do cartão:

JSON

{
  "cardsV2": [
    {
      "cardId": "exampleCard",
      "card": {
        "sections": [
          {
            "widgets": [
              {
                "grid": {
                  "title": "A fine collection of items",
                  "numColumns": 2,
                  "borderStyle": {
                    "type": "STROKE",
                    "cornerRadius": 4.0
                  },
                  "items": [
                    {
                      "image": {
                        "imageUri": "https://developers.google.com/static/chat/images/chat-app-hero-image_1440.png",
                        "cropStyle": {
                          "type": "SQUARE"
                        },
                        "borderStyle": {
                          "type": "STROKE"
                        }
                      },
                      "title": "An item",
                      "textAlignment": "CENTER"
                    }
                  ],
                  "onClick": {
                    "openLink": {
                      "url": "https://developers.google.com/chat"
                    }
                  }
                }
              }
            ]
          }
        ]
      }
    }
  ]
}

Grid representação e campos JSON

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

Campos
title	string O texto exibido no cabeçalho da grade.
items[]	object ( GridItem ) Os itens que serão exibidos na grade.
borderStyle	object ( BorderStyle ) O estilo da 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 esse campo não for especificado e for diferente dependendo do local em que a grade for exibida (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çã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 O 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 da grade.

BorderStyle

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 para a borda.

BorderType

Enums
BORDER_TYPE_UNSPECIFIED	Nenhum valor especificado.
NO_BORDER	Valor padrão. Sem borda.
STROKE	Contorno.

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 especificada, uma ação é acionada por este onClick .
openLink	object ( OpenLink ) Se especificado, este onClick vai acionar uma ação de link aberto.
openDynamicLinkAction	object ( Action ) Um complemento aciona essa ação quando ela precisa abrir um link. Isso é diferente do openLink acima, porque ele precisa se comunicar com o servidor para receber o link. Portanto, parte do trabalho de preparação é necessário para que o cliente da Web faça antes que a resposta da ação de link aberto volte.
card	object ( Card ) Um novo cartão é enviado para a pilha de cards após o clique, se especificado. Com os complementos do Google Workspace, mas não os apps do Chat.

Action

Uma ação que descreve o comportamento quando o formulário é enviado. Por exemplo, um Apps Script pode ser invocado 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 contém o conteúdo for clicado ou ativado por outros motivos. Para ver exemplos 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 para a ação.
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 após o acionamento da ação. Para permitir que o usuário faça alterações durante o processamento da ação, defina LoadIndicator como NONE . Para mensagens do cartão em apps de chat, você também precisa definir o ResponseType da ação como UPDATE_MESSAGE e usar o mesmo cardId do cartão que continha a ação. Se false , os valores do formulário serão apagados quando a ação for acionada. Para evitar que o usuário faça alterações enquanto a ação é 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á executando uma action , como a abertura de um link ou a execução de uma função, normalmente. Ao especificar um 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 é mostrado. Compatível com apps de chat, mas não com complementos do Google Workspace. Se especificado para um complemento, todo o cartão será retirado, 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 estes três botões: adiar agora, adiar 1 dia ou adiar semana que vem. Você pode usar o método de ação = sleep(), transmitindo o tipo de adiamento e o tempo de adiamento 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 para a ação.

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

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á executando uma action , como a abertura de um link ou a execução de uma função, normalmente.

Ao especificar um 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 é mostrado.

Compatível com apps de chat, mas não com complementos do Google Workspace. Se especificado para um complemento, todo o cartão será retirado, 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 janelas e baseada em cards que os apps de chat usam para interagir com os usuários. Esse recurso só é compatível com apps de chat em resposta a cliques em botões nas mensagens do card. Não é compatível com os complementos do Google Workspace. Se especificado para um complemento, todo o cartão será retirado, 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. Não há suporte para os apps de chat.
onClose	enum ( OnClose ) Indica se o cliente esqueceu de um link depois de abri-lo ou se o observa até a janela fechar. Não há suporte para os apps de chat.