Card

Uma interface de ficha de informações exibida em uma mensagem de chat do Google Chat ou em um complemento do Google Workspace.

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

Crie e visualize cards com o Criador de Cards.

Abra o Criador de Cards

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

Observação: é possível adicionar até 100 widgets por card. Se os widgets de uma seção fizerem com que o total ultrapasse 100, essa seção e todas as seguintes serão ignoradas. Esse limite se aplica a mensagens de card e caixas de diálogo em apps do Google Chat e a cards em complementos do Google Workspace.

Exemplo: mensagem de card para um app do Google Chat

Exemplo de card de contato

Para criar a mensagem de 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/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"
                             }
                           ]
                         }
                       }
                     }
                   ]
                 }
               }
             ]
           }
         ]
       }
    }
  ]
}
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)
  },
  "expressionData": [
    {
      object (ExpressionData)
    }
  ]
}
Campos
header

object (CardHeader)

O cabeçalho do card. Um cabeçalho geralmente contém uma imagem principal e um título. Os cabeçalhos sempre aparecem na parte de cima de um card.

sections[]

object (Section)

Contém uma coleção de widgets. Cada seção tem um cabeçalho próprio e opcional. As seções são separadas visualmente por uma linha divisória. Para ver um exemplo em apps do Google Chat, consulte Definir uma seção de um card.

sectionDividerStyle

enum (DividerStyle)

O estilo do divisor entre o cabeçalho, as seções e o rodapé.

cardActions[]

object (CardAction)

As ações do card. As ações são adicionadas ao menu da barra de ferramentas do card. Suporta até 10 itens CardAction.

Disponível para complementos do Google Workspace e indisponível para apps do Google Chat.

Por exemplo, o JSON a seguir cria 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 card. Usado como identificador de card na navegação por cards.

Disponível para complementos do Google Workspace e indisponível para apps do Google Chat.

displayStyle

enum (DisplayStyle)

Nos complementos do Google Workspace, define as propriedades de exibição do peekCardHeader.

Disponível para complementos do Google Workspace e indisponível para apps do Google Chat.

peekCardHeader

object (CardHeader)

Ao exibir conteúdo contextual, o cabeçalho do card de visualização rápida 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.

Disponível para complementos do Google Workspace e indisponível para apps do Google Chat.

expressionData[]

object (ExpressionData)

Os dados de expressão do card.

Disponível para complementos do Google Workspace que estendem o Google Workspace Studio. Indisponível para apps do Google Chat.

CardHeader

Representa o cabeçalho de um card. Para ver um exemplo em apps do Google Chat, consulte Adicionar um cabeçalho.

Disponível para apps do Google Chat e complementos do Google Workspace.

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 card. O cabeçalho tem uma altura fixa: se um título e um subtítulo forem especificados, cada um vai ocupar uma linha. Se apenas o título for especificado, ele vai ocupar as duas linhas.

subtitle

string

O subtítulo do cabeçalho do card. Se especificado, aparece em uma linha própria abaixo de title.

imageType

enum (ImageType)

A forma usada para cortar a imagem.

Disponível para apps do Google Chat e complementos do Google Workspace.

imageUrl

string

O URL HTTPS da imagem no cabeçalho do card.

imageAltText

string

O texto alternativo da imagem usado para acessibilidade.

Seção

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

Disponível para apps do Google Chat e complementos do Google Workspace.

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

string

Texto que aparece na parte de cima de uma seção. Aceita texto simples formatado em HTML. Para mais informações sobre como formatar texto, consulte Formatar texto em apps do Google Chat e Formatar texto em complementos do Google Workspace.

widgets[]

object (Widget)

Todos os widgets na seção. Precisa conter pelo menos um widget. Um card aceita até 100 widgets em todas as seções.

collapsible

boolean

Indica se esta seção pode ser recolhida.

As seções recolhíveis ocultam alguns ou todos os widgets, mas os usuários podem expandir a seção para revelar os widgets ocultos clicando em Mostrar mais. Para ocultar os widgets novamente, clique em Mostrar menos.

Para determinar quais widgets estão ocultos, especifique uncollapsibleWidgetsCount.

uncollapsibleWidgetsCount

integer

O número de widgets não recolhíveis que permanecem visíveis mesmo quando uma seção é recolhida.

Por exemplo, quando uma seção contém cinco widgets e o uncollapsibleWidgetsCount está definido 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.

id

string

Um ID exclusivo atribuído à seção que é usado para identificar a seção a ser modificada. O ID tem um limite de caracteres de 64 e precisa estar no formato [a-zA-Z0-9-]+.

Disponível para complementos do Google Workspace que estendem o Google Workspace Studio. Indisponível para apps do Google Chat.

collapseControl

object (CollapseControl)

Opcional. Defina o botão para abrir e fechar a seção. Esse botão só vai aparecer se a seção for recolhível. Se esse campo não for definido, o botão padrão será usado.

Widget

Cada card é composto por widgets.

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

Representação JSON
{
  "horizontalAlignment": enum (HorizontalAlignment),
  "id": string,
  "visibility": enum (Visibility),
  "eventActions": [
    {
      object (EventAction)
    }
  ],

  "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)
  }
}
Campos
horizontalAlignment

enum (HorizontalAlignment)

Especifica se os widgets são alinhados à esquerda, à direita ou no centro de uma coluna.

id

string

Um ID exclusivo atribuído ao widget que é usado para identificar o widget a ser modificado. O ID tem um limite de caracteres de 64 e precisa estar no formato [a-zA-Z0-9-]+.

Disponível para complementos do Google Workspace que estendem o Google Workspace Studio. Indisponível para apps do Google Chat.

visibility

enum (Visibility)

Especifica se o widget está visível ou oculto. O valor padrão é VISIBLE.

Disponível para complementos do Google Workspace que estendem o Google Workspace Studio. Indisponível para apps do Google Chat.

eventActions[]

object (EventAction)

Especifica as ações de evento que podem ser realizadas no widget.

Disponível para complementos do Google Workspace que estendem o Google Workspace Studio. Indisponível para apps do Google Chat.

Um widget só pode ter um dos itens a seguir. É possível usar vários campos de widget para mostrar mais itens. Confira a seguir uma lista de campos mutuamente exclusivos. No máximo um dos campos será definido em uma resposta:
textParagraph

object (TextParagraph)

Mostra um parágrafo de texto. Aceita texto simples formatado em HTML. Para mais informações sobre como formatar 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)

Mostra uma imagem.

Por exemplo, o JSON a seguir cria uma imagem com texto alternativo:

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

object (DecoratedText)

Mostra um item de texto decorado.

Por exemplo, o JSON a seguir cria um widget de texto decorado que mostra o endereço de e-mail:

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

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

object (TextInput)

Mostra 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)

Mostra 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 compromisso:

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

object (Divider)

Mostra uma linha horizontal para dividir os 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 aceita qualquer número de 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.

Disponível para apps do Google Chat e complementos do Google Workspace.

Por exemplo, o JSON a seguir 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)

Mostra até duas colunas.

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

Por exemplo, o JSON a seguir cria duas colunas que contêm 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"
          }
        }
      ]
    }
  ]
}
carousel

object (Carousel)

Contém uma coleção de itens CarouselCard, cada um com widgets aninhados. Por exemplo, esta é uma representação JSON de um carrossel que contém dois cards, cada um com um parágrafo de texto:

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

object (ChipList)

Uma lista de ícones.

Por exemplo, o JSON a seguir cria dois ícones. O primeiro é um ícone de texto, e o segundo é um ícone de imagem que abre um link:

"chipList": {
  "chips": [
    {
      "label": "Edit",
      "disabled": true
    },
    {
      "icon": {
        "knownIcon": "INVITE",
        "altText": "check calendar"
      },
      "onClick": {
        "openLink": {
          "url": "https://example.com/calendar"
        }
      }
    }
  ]
}
Fim dos campos mutuamente exclusivos.

TextParagraph

Um parágrafo de texto que aceita formatação. Para ver um exemplo em apps do Google Chat, consulte Adicionar um parágrafo de texto formatado. Para mais informações sobre como formatar texto, consulte Formatar texto em apps do Google Chat e Formatar texto em complementos do Google Workspace.

Disponível para apps do Google Chat e complementos do Google Workspace.

Representação JSON
{
  "text": string,
  "maxLines": integer,
  "textSyntax": enum (TextSyntax)
}
Campos
text

string

O texto que aparece no widget.

maxLines

integer

O número máximo de linhas de texto exibidas no widget. Se o texto exceder o número máximo de linhas especificado, o conteúdo excedente será ocultado atrás de um botão Mostrar mais. Se o texto for igual ou menor que o número máximo de linhas especificado, o botão Mostrar mais não vai aparecer.

O valor padrão é 0, em que todo o contexto é exibido. Valores negativos são ignorados.

textSyntax

enum (TextSyntax)

A sintaxe do texto. Se não for definido, o texto será renderizado como HTML.

Disponível para apps do Google Chat e indisponível para complementos do Google Workspace.

TextSyntax

Sintaxe para formatar texto.

Disponível para apps do Google Chat e indisponível para complementos do Google Workspace.

Tipos enumerados
TEXT_SYNTAX_UNSPECIFIED O texto será renderizado como HTML se não for especificado.
HTML O texto é renderizado como HTML. Esse é o valor padrão.
MARKDOWN O texto é renderizado como Markdown.

Imagem

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

Disponível para apps do Google Chat e complementos do Google Workspace.

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/workspace/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 usado para acessibilidade.

DecoratedText

Um widget que mostra texto com decorações opcionais, como um marcador acima ou abaixo do texto, um ícone na frente do texto, um widget de seleção ou um botão depois do texto. Para ver um exemplo em apps do Google Chat, consulte Mostrar texto com texto decorativo.

Disponível para apps do Google Chat e complementos do Google Workspace.

Representação 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)
  },

  "button": {
    object (Button)
  },
  "switchControl": {
    object (SwitchControl)
  },
  "endIcon": {
    object (Icon)
  }
}
Campos
icon
(deprecated)

object (Icon)

Descontinuado em favor de startIcon.

startIcon

object (Icon)

O ícone exibido na frente do texto.

startIconVerticalAlignment

enum (VerticalAlignment)

Opcional. Alinhamento vertical do ícone de início. Se não for definido, o ícone será centralizado verticalmente.

Disponível para apps do Google Chat e indisponível para complementos do Google Workspace.

topLabel

string

O texto que aparece acima de text. Sempre truncado.

topLabelText

object (TextParagraph)

TextParagraph equivalente a topLabel. Sempre truncado. Permite uma formatação mais complexa do que topLabel.

Disponível para apps do Google Chat e indisponível para complementos do Google Workspace.

text

string

Obrigatório. O texto principal.

Aceita formatação simples. Para mais informações sobre como formatar texto, consulte Formatar texto em apps do Google Chat e Formatar texto em complementos do Google Workspace.

contentText

object (TextParagraph)

TextParagraph equivalente a text. Permite uma formatação mais complexa do que text.

Disponível para apps do Google Chat e indisponível para complementos do Google Workspace.

wrapText

boolean

A configuração de ajuste de texto. Se for true, o texto será ajustado e exibido em várias linhas. Caso contrário, o texto será truncado.

Aplica-se apenas a text, não a topLabel e bottomLabel.

bottomLabel

string

O texto que aparece abaixo de text. Sempre ajusta.

bottomLabelText

object (TextParagraph)

TextParagraph equivalente a bottomLabel. Sempre ajusta. Permite uma formatação mais complexa do que bottomLabel.

Disponível para apps do Google Chat e indisponível para complementos do Google Workspace.

onClick

object (OnClick)

Essa ação é acionada quando os usuários clicam em qualquer lugar do widget DecoratedText (incluindo text, topLabel, bottomLabel e ícones), exceto quando clicam em um controle interativo separado (button ou switchControl).

Um botão, interruptor, caixa de seleção ou imagem que aparece à direita do texto no widget decoratedText. Confira a seguir uma lista de campos mutuamente exclusivos. No máximo um dos campos será definido em uma resposta:
button

object (Button)

Um botão em que o usuário pode clicar para acionar uma ação.

switchControl

object (SwitchControl)

Um widget de interruptor em que o usuário pode clicar para mudar o estado e acionar uma ação.

endIcon

object (Icon)

Um ícone exibido após o texto.

Compatível com ícones integrados e personalizados.

Fim dos campos mutuamente exclusivos.

VerticalAlignment

Representa o atributo de alinhamento vertical.

Tipos enumerados
VERTICAL_ALIGNMENT_UNSPECIFIED Tipo não especificado. Não use.
TOP Alinhamento com a posição superior.
MIDDLE Alinhamento à posição central.
BOTTOM Alinhamento à posição inferior.

SwitchControl

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

Disponível para apps do Google Chat e complementos do Google Workspace.

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 interruptor é identificado em um evento de entrada de formulário (como a chave em CommonEventObject.form_inputs).

Para saber como trabalhar com entradas de formulário, consulte Receber dados de formulário.

value

string

O valor retornado em CommonEventObject.form_inputs[name].string_inputs quando a chave é selecionada (selected é true). Se selected for true e value não estiver definido, uma string vazia ("") será retornada em stringInputs.value. Quando selected é false, esse valor é omitido de stringInputs.value.

Para saber como trabalhar com entradas de formulário, consulte Receber dados de formulário.

selected

boolean

Quando true, a chave é selecionada, e o value dela é incluído em CommonEventObject.form_inputs[name].string_inputs.value.

onChangeAction

object (Action)

A ação a ser realizada quando o estado do interruptor é alterado, como a função a ser executada.

controlType

enum (ControlType)

Como a chave aparece na interface do usuário.

Disponível para apps do Google Chat e complementos do Google Workspace.

ControlType

Como a chave aparece na interface do usuário.

Disponível para apps do Google Chat e complementos do Google Workspace.

Tipos enumerados
SWITCH Um botão de alternância.
CHECKBOX Descontinuado em favor de CHECK_BOX.
CHECK_BOX Uma caixa de seleção.

TextInput

Um campo em que os usuários podem inserir texto. Oferece suporte a sugestões e ações de alteração. Suporta validação de envio de formulários. Quando Action.all_widgets_are_required é definido como true ou esse widget é especificado em Action.required_widgets, a ação de envio é bloqueada, a menos que um valor seja inserido. Para ver um exemplo em apps do Google Chat, consulte Adicionar um campo em que o usuário pode inserir texto.

Os apps do Chat recebem e podem processar o valor do texto inserido durante eventos de entrada de formulário. Para saber 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.

Disponível para apps do Google Chat e complementos do Google Workspace.

Representação 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,

  "hostAppDataSource": {
    object (HostAppDataSourceMarkup)
  }
}
Campos
name

string

O nome pelo qual a entrada de texto é identificada em um evento de entrada de formulário.

Para saber 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 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 fica sempre 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 saber 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 linha única ou de 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 ou excluindo texto do campo.

Por exemplo, 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. Conforme os usuários digitam, os valores sugeridos são filtrados dinamicamente para corresponder ao que foi digitado.

Por exemplo, um campo de entrada de texto para linguagem de programação pode sugerir Java, JavaScript, Python e C++. Quando os usuários começam a digitar Jav, a lista de sugestões é filtrada para mostrar apenas Java e JavaScript.

Os valores sugeridos ajudam os usuários a inserir valores que o app pode entender. Ao se referir ao JavaScript, alguns usuários podem digitar javascript e outros java script. Sugerir JavaScript pode padronizar a forma como os usuários interagem com seu app.

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

Disponível para apps do Google Chat e complementos do Google Workspace.

autoCompleteAction

object (Action)

Opcional. Especifique qual ação realizar quando o campo de entrada de texto fornecer sugestões aos usuários que interagirem com ele.

Se não forem especificadas, as sugestões serão definidas por initialSuggestions e processadas pelo cliente.

Se especificado, o app vai realizar a ação definida aqui, como executar uma função personalizada.

Disponível para complementos do Google Workspace e indisponível para apps do Google Chat.

validation

object (Validation)

Especifique a validação do formato de entrada necessária para esse campo de texto.

Disponível para apps do Google Chat e complementos do Google Workspace.

placeholderText

string

Texto que aparece no campo de entrada de texto quando ele está vazio. Use esse texto para solicitar que os usuários insiram um valor. Por exemplo, Enter a number from 0 to 100.

Disponível para apps do Google Chat e indisponível para complementos do Google Workspace.

Confira a seguir uma lista de campos mutuamente exclusivos. No máximo um dos campos será definido em uma resposta:
hostAppDataSource

object (HostAppDataSourceMarkup)

Uma fonte de dados exclusiva de um aplicativo host do Google Workspace, como e-mails do Gmail, eventos do Google Agenda ou mensagens do Google Chat.

Disponível para complementos do Google Workspace que estendem o Google Workspace Studio. Indisponível para apps do Google Chat.

Fim dos campos mutuamente exclusivos.

Tipo

Como um campo de entrada de texto aparece na interface do usuário. Por exemplo, se é um campo de entrada de linha única ou de várias linhas. Se initialSuggestions for especificado, type será sempre SINGLE_LINE, mesmo que esteja definido como MULTIPLE_LINE.

Disponível para apps do Google Chat e complementos do Google Workspace.

Tipos enumerados
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 diz a um card para realizar uma ação ou ao app host do complemento ou ao app do Chat para realizar uma ação específica do app.

Disponível para apps do Google Chat e complementos do Google Workspace.

Campos
action

Action

Ação

Campos
navigations[]

Navigation

Envia, exibe ou atualiza um card.

Complementos no Google Chat.

Adicionar um novo card à pilha (navegar para frente). Para apps do Chat, disponível apenas na página inicial do app.

Disponível para apps do Google Chat e complementos do Google Workspace.

navigations: {
  pushCard: CARD
}

Substitua o card de cima por um novo. Para apps do Chat, disponível apenas na página inicial do app.

Disponível para apps do Google Chat e complementos do Google Workspace.

navigations: {
  updateCard: CARD
}

Sugestões

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

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

Os valores sugeridos ajudam os usuários a inserir valores que o app pode entender. Ao se referir ao JavaScript, alguns usuários podem digitar javascript e outros java script. Sugerir JavaScript pode padronizar a forma como os usuários interagem com seu app.

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

Disponível para apps do Google Chat e complementos do Google Workspace.

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.

Disponível para apps do Google Chat e complementos do Google Workspace.

Representação JSON
{

  "text": string
}
Campos
Confira a seguir uma lista de campos mutuamente exclusivos. No máximo um dos campos será definido em uma resposta:
text

string

O valor de uma entrada sugerida para um campo de entrada de texto. Isso equivale ao que os usuários inserem.

Fim dos campos mutuamente exclusivos.

Validação

Representa os dados necessários para validar o widget ao qual está anexado.

Disponível para apps do Google Chat e complementos do Google Workspace.

Representação JSON
{
  "characterLimit": integer,
  "inputType": enum (InputType)
}
Campos
characterLimit

integer

Especifique o limite de caracteres para widgets de entrada de texto. Isso é usado apenas para entrada de texto e é ignorado em outros widgets.

Disponível para apps do Google Chat e complementos do Google Workspace.

inputType

enum (InputType)

Especifique o tipo dos widgets de entrada.

Disponível para apps do Google Chat e complementos do Google Workspace.

InputType

O tipo do widget de entrada.

Tipos enumerados
INPUT_TYPE_UNSPECIFIED Tipo não especificado. Não use.
TEXT Texto comum que aceita todos os caracteres.
INTEGER Um valor inteiro.
FLOAT Um valor flutuante.
EMAIL Um endereço de e-mail.
EMOJI_PICKER Um emoji selecionado no seletor de emojis fornecido pelo sistema.

HostAppDataSourceMarkup

Uma fonte de dados de um aplicativo do Google Workspace. A fonte de dados preenche os itens disponíveis para um widget.

Representação JSON
{

  "chatDataSource": {
    object (ChatClientDataSourceMarkup)
  },
  "workflowDataSource": {
    object (WorkflowDataSourceMarkup)
  }
}
Campos
O aplicativo do Google Workspace que preenche os itens disponíveis para um widget. Confira a seguir uma lista de campos mutuamente exclusivos. No máximo um dos campos será definido em uma resposta:
chatDataSource

object (ChatClientDataSourceMarkup)

Uma fonte de dados do Google Chat.

workflowDataSource

object (WorkflowDataSourceMarkup)

Uma fonte de dados do Google Workflow.

Fim dos campos mutuamente exclusivos.

ChatClientDataSourceMarkup

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 os espaços do Google Chat de que participa.

Disponível para apps do Google Chat e indisponível para complementos do Google Workspace.

Representação JSON
{

  "spaceDataSource": {
    object (SpaceDataSource)
  }
}
Campos
A fonte de dados do Google Chat. Confira a seguir uma lista de campos mutuamente exclusivos. No máximo um dos campos será definido em uma resposta:
spaceDataSource

object (SpaceDataSource)

Espaços do Google Chat em que o usuário é participante.

Fim dos campos mutuamente exclusivos.

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. Preenche apenas os espaços em que o usuário é membro.

Disponível para apps do Google Chat e indisponível para complementos do Google Workspace.

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

boolean

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

WorkflowDataSourceMarkup

* Compatível apenas com o fluxo de trabalho do Google Workspace, mas não com apps do Google Chat ou complementos do Google Workspace.

Em um widget TextInput ou SelectionInput com o tipo MULTI_SELECT ou um DateTimePicker, forneça uma fonte de dados do Google.

Representação JSON
{
  "includeVariables": boolean,
  "type": enum (Type)
}
Campos
includeVariables

boolean

Se as variáveis da etapa anterior devem ser incluídas na fonte de dados.

type

enum (Type)

O tipo de fonte de dados.

Tipo

Um tipo enumerado que representa o tipo da fonte de dados do fluxo de trabalho.

Tipos enumerados
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.
SPACE Espaços do Google Chat em que o usuário é participante.
USER_WITH_FREE_FORM Os usuários podem ver e selecionar participantes da organização do Google Workspace ou inserir manualmente um endereço de e-mail ou um domínio válido.

SelectionInput

Um widget que cria um ou mais itens de interface que os usuários podem selecionar. Oferece suporte à validação de envio de formulários apenas para os menus dropdown e multiselect. Quando Action.all_widgets_are_required é definido como true ou esse widget é especificado em Action.required_widgets, a ação de envio é bloqueada, a menos que um valor seja selecionado. Por exemplo, um menu suspenso ou caixas de seleção. Use esse widget para coletar dados que podem ser previstos ou enumerados. Para ver um exemplo nos apps do Google Chat, consulte Adicionar elementos de interface selecionáveis.

Os apps do Chat podem processar o valor dos itens que os usuários selecionam ou inserem. Para saber 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.

Disponível para apps do Google Chat e complementos do Google Workspace.

Representação JSON
{
  "name": string,
  "label": string,
  "type": enum (SelectionType),
  "items": [
    {
      object (SelectionItem)
    }
  ],
  "onChangeAction": {
    object (Action)
  },
  "multiSelectMinQueryLength": integer,
  "dataSourceConfigs": [
    {
      object (DataSourceConfig)
    }
  ],
  "multiSelectMaxSelectedItems": integer,
  "hintText": string,

  "externalDataSource": {
    object (Action)
  },
  "platformDataSource": {
    object (PlatformDataSource)
  }
}
Campos
name

string

Obrigatório. O nome que identifica a entrada de seleção em um evento de entrada de formulário.

Para saber 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 estiverem selecionando 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 item que aparece para os usuários em um widget SelectionInput. Os tipos de seleção aceitam 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. Suporta até 100 itens.

onChangeAction

object (Action)

Se especificado, o formulário é enviado quando a seleção muda. Se não for especificado, você precisará especificar um botão separado que envie o formulário.

Para saber como trabalhar com entradas de formulário, consulte Receber dados de formulário.

multiSelectMinQueryLength

integer

Para menus de seleção múltipla, o número de caracteres de texto que um usuário insere antes que o menu retorne itens de seleção sugeridos.

Se não for definido, o menu de seleção múltipla vai usar os seguintes valores padrão:

  • Se o menu usar uma matriz estática de itens SelectionInput, o padrão será 0 caracteres e os itens da matriz serão preenchidos imediatamente.
  • Se o menu usar uma fonte de dados dinâmica (multi_select_data_source), o padrão será de três caracteres antes de consultar a fonte de dados para retornar itens sugeridos.
dataSourceConfigs[]

object (DataSourceConfig)

Opcional. As configurações da fonte de dados para o controle de seleção. Esse campo oferece um controle mais detalhado sobre a fonte de dados.

Se especificados, os campos multiSelectMaxSelectedItems, multiSelectMinQueryLength, externalDataSource e platformDataSource serão ignorados.

Disponível para complementos do Google Workspace que estendem o Google Workspace Studio.

Disponível para o Dropdown widget nos apps do Google Chat. Para o widget Dropdown nos apps do Google Chat, apenas um DataSourceConfig é aceito. Se vários DataSourceConfigs forem definidos, somente o primeiro será usado.

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 é 1 item. Se não for especificado, o padrão será de três itens.

hintText

string

Opcional. Texto que aparece abaixo do campo de entrada de seleção para ajudar os usuários, solicitando que eles insiram um determinado valor. Esse texto fica sempre visível.

Disponível para complementos do Google Workspace que estendem o Google Workspace Studio. Indisponível para apps do Google Chat.

Para um menu de seleção múltipla, uma fonte de dados que preenche dinamicamente os itens de seleção.

Disponível para apps do Google Chat e indisponível para complementos do Google Workspace. Confira a seguir uma lista de campos mutuamente exclusivos. No máximo um dos campos será definido em uma resposta:

externalDataSource

object (Action)

Uma fonte de dados externa, como um banco de dados relacional.

platformDataSource

object (PlatformDataSource)

Uma fonte de dados do Google Workspace.

Fim dos campos mutuamente exclusivos.

SelectionType

O formato dos itens que os usuários podem selecionar. Cada opção é compatível com tipos diferentes 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. Por exemplo, não é possível misturar caixas de seleção e interruptores.

Disponível para apps do Google Chat e complementos do Google Workspace.

Tipos enumerados
CHECK_BOX Um conjunto de caixas de seleção. Os usuários podem selecionar 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 no menu.

Para apps do Google Chat, é possível preencher itens usando uma fonte de dados dinâmica e sugerir itens automaticamente conforme os usuários digitam no menu. Por exemplo, os usuários podem começar a digitar o nome de um espaço do Google Chat, e o widget sugere o espaço automaticamente. Para preencher dinamicamente os itens de um menu suspenso, use um dos seguintes tipos de fontes de dados:

  • Dados do Google Workspace: os itens são preenchidos com dados do Google Workspace, como usuários do Google Workspace ou espaços do Google Chat.
  • Dados externos: os itens são preenchidos com base em uma fonte de dados externa ao Google Workspace.

Para ver exemplos de como implementar menus suspensos para apps do Chat, consulte Adicionar um menu suspenso e Preencher menus suspensos dinamicamente.

Disponível para apps do Google Chat e complementos do Google Workspace.

MULTI_SELECT

Um menu com uma caixa de texto. Os usuários podem digitar e selecionar um ou mais itens. Para complementos do Google Workspace, é necessário preencher os itens usando uma matriz estática de objetos SelectionItem.

Para apps do Google Chat, também é possível preencher itens usando uma fonte de dados dinâmica e sugerir itens automaticamente conforme os usuários digitam no menu. Por exemplo, os usuários podem começar a digitar o nome de um espaço do Google Chat, e o widget sugere o espaço automaticamente. Para preencher dinamicamente os itens de um menu de seleção múltipla, use um dos seguintes tipos de fontes de dados:

  • Dados do Google Workspace: os itens são preenchidos com dados do Google Workspace, como usuários do Google Workspace ou espaços do Google Chat.
  • Dados externos: os itens são preenchidos com base em uma fonte de dados externa ao Google Workspace.

Para ver exemplos de como implementar menus de seleção múltipla para apps do Chat, consulte Adicionar um menu de seleção múltipla.

Disponível para apps do Google Chat e complementos do Google Workspace.

PlatformDataSource

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.

Disponível para apps do Google Chat e indisponível para complementos do Google Workspace.

Representação JSON
{

  "commonDataSource": enum (CommonDataSource),
  "hostAppDataSource": {
    object (HostAppDataSourceMarkup)
  }
}
Campos
A fonte de dados. Confira a seguir uma lista de campos mutuamente exclusivos. No máximo um dos campos será definido em uma resposta:
commonDataSource

enum (CommonDataSource)

Uma fonte de dados compartilhada por todos os aplicativos do Google Workspace, como usuários em uma organização do Google Workspace.

hostAppDataSource

object (HostAppDataSourceMarkup)

Uma fonte de dados exclusiva de um aplicativo host do Google Workspace, como os espaços no Google Chat.

Esse campo é compatível com as bibliotecas de cliente da API do Google, mas não está disponível nas bibliotecas de cliente do Cloud. Para saber mais, consulte Instalar as bibliotecas de cliente.

Fim dos campos mutuamente exclusivos.

CommonDataSource

Uma fonte de dados compartilhada por todos os aplicativos do Google Workspace.

Disponível para apps do Google Chat e indisponível para complementos do Google Workspace.

Tipos enumerados
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.

DataSourceConfig

Um objeto de configuração que ajuda a configurar as fontes de dados de um widget.

Disponível para apps do Google Chat e complementos do Google Workspace que estendem o Google Workspace Studio.

Representação JSON
{

  "remoteDataSource": {
    object (Action)
  },
  "platformDataSource": {
    object (PlatformDataSource)
  }
  "minCharactersTrigger": integer
}
Campos
A fonte de dados. Confira a seguir uma lista de campos mutuamente exclusivos. No máximo um dos campos será definido em uma resposta:
remoteDataSource

object (Action)

Os dados são de um provedor de dados remoto.

platformDataSource

object (PlatformDataSource)

Os dados são de um aplicativo do Google Workspace.

Fim dos campos mutuamente exclusivos.
minCharactersTrigger

integer

O número mínimo de caracteres que o usuário precisa inserir antes que esse provedor de dados seja acionado (ou seja, antes de começar a retornar resultados).

DateTimePicker

Permite que os usuários insiram uma data, uma hora ou ambas. Suporta validação de envio de formulários. Quando Action.all_widgets_are_required é definido como true ou esse widget é especificado em Action.required_widgets, a ação de envio é bloqueada, a menos que um valor seja selecionado. Para ver um exemplo em apps do Google Chat, consulte Permitir que um usuário escolha uma 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 que solicita que as informações sejam inseridas corretamente.

Disponível para apps do Google Chat e complementos do Google Workspace.

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

  "hostAppDataSource": {
    object (HostAppDataSourceMarkup)
  }
}
Campos
name

string

O nome pelo qual o DateTimePicker é identificado em um evento de entrada de formulário.

Para saber 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, uma hora ou uma data e hora. Por exemplo, se os usuários estiverem agendando um horário, use um rótulo como Appointment date ou Appointment date and time.

type

enum (DateTimePickerType)

Se o widget aceita a entrada de uma data, um horário ou data e hora.

valueMsEpoch

string (int64 format)

O valor padrão exibido no widget, em milissegundos desde o tempo de época Unix.

Especifique o valor com base no tipo de seletor (DateTimePickerType):

  • DATE_AND_TIME: uma data e hora do calendário em UTC. Por exemplo, para representar 1º 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 1º 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 em relação ao UTC, em minutos. Se definido, o valueMsEpoch será exibido no fuso horário especificado. Se não for definido, o valor padrão será a configuração de fuso horário do usuário.

Observação: esse campo é em minutos, enquanto os payloads de eventos de interação do usuário normalmente fornecem diferenças de fuso horário em milissegundos (divida por 60000 para converter).

onChangeAction

object (Action)

Acionado quando o usuário clica em Salvar ou Limpar na interface DateTimePicker.

A fonte de dados especificada para representar uma data e hora. Confira a seguir uma lista de campos mutuamente exclusivos. No máximo um dos campos será definido em uma resposta:
hostAppDataSource

object (HostAppDataSourceMarkup)

Uma fonte de dados exclusiva de um aplicativo host do Google Workspace, como e-mails do Gmail, eventos do Google Agenda ou mensagens do Google Chat.

Disponível para complementos do Google Workspace que estendem o Google Workspace Studio. Indisponível para apps do Google Chat.

Fim dos campos mutuamente exclusivos.

DateTimePickerType

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

Disponível para apps do Google Chat e complementos do Google Workspace.

Tipos enumerados
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.

Separador

Esse tipo não tem campos.

Mostra uma divisória entre os widgets como uma linha horizontal. Para ver um exemplo em apps do Google Chat, consulte Adicionar um divisor horizontal entre widgets.

Disponível para apps do Google Chat e complementos do Google Workspace.

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 para incluir mais do que texto ou imagens, use Columns. Para ver um exemplo nos apps do Google Chat, consulte Mostrar uma grade com uma coleção de itens.

Uma grade aceita qualquer número de colunas e itens. O número de linhas é determinado pelos itens divididos pelas colunas. Uma grade com 10 itens e 2 colunas tem 5 linhas. Uma grade com 11 itens e 2 colunas tem 6 linhas.

Disponível para apps do Google Chat e complementos do Google Workspace.

Por exemplo, o JSON a seguir 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 que serão mostrados na grade.

borderStyle

object (BorderStyle)

O estilo de borda a ser aplicado a cada item da grade.

columnCount

integer

O número de colunas que serão mostradas na grade. Um valor padrão será usado se esse campo não for especificado, e esse valor padrão será diferente dependendo de onde a grade é mostrada (caixa de diálogo ou complementar).

onClick

object (OnClick)

Esse callback é reutilizado por cada item de grade individual, mas com o identificador do item adicionado aos parâmetros do callback (na chave "grid_item_identifier").

GridItem

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

Disponível para apps do Google Chat e complementos do Google Workspace.

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 de grade. Esse identificador é retornado nos parâmetros de callback onClick da grade mãe.

image

object (ImageComponent)

A imagem que aparece 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 de grade.

ImageComponent

Representa uma imagem.

Disponível para apps do Google Chat e complementos do Google Workspace.

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.

Disponível para apps do Google Chat e complementos do Google Workspace.

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

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.

Disponível para apps do Google Chat e complementos do Google Workspace.

Tipos enumerados
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 uma 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.

Disponível para apps do Google Chat e complementos do Google Workspace.

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.

Para definir a cor do traço, especifique um valor para os campos red, green e blue. O valor precisa ser um número flutuante entre 0 e 1 com base no valor de cor RGB, em que 0 (0/255) representa a ausência de cor e 1 (255/255) representa a intensidade máxima da cor.

Por exemplo, o código a seguir define a cor como vermelho na intensidade máxima:

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

O campo alpha não está disponível para a cor do traço. Se especificado, esse campo será ignorado.

cornerRadius

integer

O raio do canto da borda.

BorderType

Representa os tipos de borda aplicados aos widgets.

Disponível para apps do Google Chat e complementos do Google Workspace.

Tipos enumerados
BORDER_TYPE_UNSPECIFIED Não use. Não especificado.
NO_BORDER Sem borda.
STROKE Valor padrão. Contorno.

GridItemLayout

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

Disponível para apps do Google Chat e complementos do Google Workspace.

Tipos enumerados
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 um card ou caixa de diálogo. É possível adicionar widgets a cada coluna. Eles aparecem na ordem em que são especificados. Para ver um exemplo em apps do Google Chat, consulte Mostrar cards e caixas de diálogo em colunas.

A altura de cada coluna é determinada pela coluna mais alta. Por exemplo, se a primeira coluna for mais alta que a segunda, as duas colunas 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. É possível 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á movida para baixo da primeira:

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

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

Disponível para apps do Google Chat e complementos do Google Workspace. As interfaces de complementos que aceitam colunas incluem:

  • A caixa de diálogo exibida quando os usuários abrem o complemento em um rascunho de e-mail.
  • A caixa de diálogo mostrada quando os usuários abrem o complemento no menu Adicionar anexo em um evento do Google Agenda.
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.

Complementos do Google Workspace e apps do Chat

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 são alinhados à esquerda, à direita ou no centro de uma coluna.

verticalAlignment

enum (VerticalAlignment)

Especifica se os widgets se alinham à parte de cima, de baixo 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 do HorizontalSizeStyle e da largura dos widgets dentro da coluna.

Complementos do Google Workspace e apps do Chat

Tipos enumerados
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 cartão. Se as duas colunas forem definidas como FILL_AVAILABLE_SPACE, cada uma vai preencher 50% do espaço.
FILL_MINIMUM_SPACE A coluna preenche o mínimo de espaço possível e não mais do que 30% da largura do card.

HorizontalAlignment

Especifica se os widgets são alinhados à esquerda, à direita ou no centro de uma coluna.

Disponível para apps do Google Chat e indisponível para complementos do Google Workspace.

Tipos enumerados
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 à esquerda. Para layouts da direita para a esquerda, alinha à 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 de cima, de baixo ou ao centro de uma coluna.

Complementos do Google Workspace e apps do Chat

Tipos enumerados
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 de cima de uma coluna.
BOTTOM Alinha os widgets à parte de baixo de uma coluna.

Widgets

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

Complementos do Google Workspace e apps do Chat

Representação JSON
{

  "textParagraph": {
    object (TextParagraph)
  },
  "image": {
    object (Image)
  },
  "decoratedText": {
    object (DecoratedText)
  },
  "buttonList": {
    object (ButtonList)
  },
  "textInput": {
    object (TextInput)
  },
  "selectionInput": {
    object (SelectionInput)
  },
  "dateTimePicker": {
    object (DateTimePicker)
  },
  "chipList": {
    object (ChipList)
  }
}
Campos
Confira a seguir uma lista de campos mutuamente exclusivos. No máximo um dos campos será definido em uma resposta:
textParagraph

object (TextParagraph)

Widget de TextParagraph.

image

object (Image)

Widget de Image.

decoratedText

object (DecoratedText)

Widget de DecoratedText.

buttonList

object (ButtonList)

Widget de ButtonList.

textInput

object (TextInput)

Widget de TextInput.

selectionInput

object (SelectionInput)

Widget de SelectionInput.

dateTimePicker

object (DateTimePicker)

Widget de DateTimePicker.

chipList

object (ChipList)

Widget de ChipList.

Fim dos campos mutuamente exclusivos.

ChipList

Uma lista de ícones dispostos horizontalmente, que podem ser rolados na horizontal ou que continuam na próxima linha.

Disponível para apps do Google Chat e complementos do Google Workspace.

Representação JSON
{
  "layout": enum (Layout),
  "chips": [
    {
      object (Chip)
    }
  ]
}
Campos
layout

enum (Layout)

Layout de lista de ícones especificado.

chips[]

object (Chip)

Uma matriz de ícones.

Layout

O layout de lista de ícones.

Tipos enumerados
LAYOUT_UNSPECIFIED Não use. Não especificado.
WRAPPED Valor padrão. A lista de ícones vai para a próxima linha se não houver espaço horizontal suficiente.
HORIZONTAL_SCROLLABLE Os ícones rolam horizontalmente se não couberem no espaço disponível.

Ícone

Um ícone, texto ou ícone e texto em que os usuários podem clicar.

Disponível para apps do Google Chat e complementos do Google Workspace.

Representação JSON
{
  "icon": {
    object (Icon)
  },
  "label": string,
  "onClick": {
    object (OnClick)
  },
  "enabled": boolean,
  "disabled": boolean,
  "altText": string
}
Campos
icon

object (Icon)

A imagem do ícone. Se icon e label forem definidos, o ícone vai aparecer antes do rótulo.

label

string

O texto exibido dentro do ícone.

onClick

object (OnClick)

Opcional. A ação a ser realizada quando um usuário clica no ícone, como abrir um hiperlink ou executar uma função personalizada.

enabled
(deprecated)

boolean

Descontinuado: use disabled.

Se o ícone está em um estado ativo e responde às ações do usuário.

disabled

boolean

Se o ícone está em um estado inativo e ignora as ações do usuário. O valor padrão é false.

altText

string

O texto alternativo usado para acessibilidade.

Defina um texto descritivo que informe aos usuários o que o ícone faz. Por exemplo, se um ícone abrir um hiperlink, escreva: "Abre uma nova guia do navegador e acessa a documentação para desenvolvedores do Google Chat em https://developers.google.com/workspace/chat".

CarouselCard

Um card que pode ser exibido como um item de carrossel. Disponível para apps do Google Chat e indisponível para complementos do Google Workspace.

Representação JSON
{
  "widgets": [
    {
      object (NestedWidget)
    }
  ],
  "footerWidgets": [
    {
      object (NestedWidget)
    }
  ]
}
Campos
widgets[]

object (NestedWidget)

Uma lista de widgets exibidos no card do carrossel. Os widgets são exibidos na ordem em que são especificados.

footerWidgets[]

object (NestedWidget)

Uma lista de widgets mostrada na parte de baixo do card do carrossel. Os widgets são exibidos na ordem em que são especificados.

NestedWidget

Uma lista de widgets que podem ser mostrados em um layout de contêiner, como um CarouselCard. Disponível para apps do Google Chat e indisponível para complementos do Google Workspace.

Representação JSON
{

  "textParagraph": {
    object (TextParagraph)
  },
  "buttonList": {
    object (ButtonList)
  },
  "image": {
    object (Image)
  }
}
Campos
Confira a seguir uma lista de campos mutuamente exclusivos. No máximo um dos campos será definido em uma resposta:
textParagraph

object (TextParagraph)

Um widget de parágrafo de texto.

buttonList

object (ButtonList)

Um widget de lista de botões.

image

object (Image)

Um widget de imagem.

Fim dos campos mutuamente exclusivos.

Visibilidade

Especifica se um elemento da interface está visível ou oculto.

Disponível para complementos do Google Workspace que estendem o Google Workspace Studio. Indisponível para apps do Google Chat.

Tipos enumerados
VISIBILITY_UNSPECIFIED Visibilidade não especificada. Não use.
VISIBLE O elemento da interface está visível.
HIDDEN O elemento da interface está oculto.

EventAction

Representa uma ação que pode ser realizada em um elemento da interface.

Disponível para complementos do Google Workspace que estendem o Google Workspace Studio. Indisponível para apps do Google Chat.

Representação JSON
{
  "actionRuleId": string,
  "postEventTriggers": [
    {
      object (Trigger)
    }
  ],

  "commonWidgetAction": {
    object (CommonWidgetAction)
  }
}
Campos
actionRuleId

string

O identificador exclusivo da ActionRule.

postEventTriggers[]

object (Trigger)

A lista de gatilhos que serão acionados após a execução da EventAction.

A ação a ser realizada. Confira a seguir uma lista de campos mutuamente exclusivos. No máximo um dos campos será definido em uma resposta:
commonWidgetAction

object (CommonWidgetAction)

Ação comum do widget.

Fim dos campos mutuamente exclusivos.

Gatilho

Representa um gatilho.

Disponível para complementos do Google Workspace que estendem o Google Workspace Studio. Indisponível para apps do Google Chat.

Representação JSON
{
  "actionRuleId": string
}
Campos
actionRuleId

string

O identificador exclusivo da ActionRule.

CommonWidgetAction

Representa uma ação que não é específica de um widget.

Disponível para complementos do Google Workspace que estendem o Google Workspace Studio. Indisponível para apps do Google Chat.

Representação JSON
{

  "updateVisibilityAction": {
    object (UpdateVisibilityAction)
  }
}
Campos
A ação a ser realizada. Confira a seguir uma lista de campos mutuamente exclusivos. No máximo um dos campos será definido em uma resposta:
updateVisibilityAction

object (UpdateVisibilityAction)

A ação para atualizar a visibilidade de um widget.

Fim dos campos mutuamente exclusivos.

UpdateVisibilityAction

Representa uma ação que atualiza a visibilidade de um widget.

Disponível para complementos do Google Workspace que estendem o Google Workspace Studio. Indisponível para apps do Google Chat.

Representação JSON
{
  "visibility": enum (Visibility)
}
Campos
visibility

enum (Visibility)

A nova visibilidade.

CollapseControl

Representam um controle de abrir e fechar.

Disponível para apps do Google Chat e complementos do Google Workspace.

Representação JSON
{
  "horizontalAlignment": enum (HorizontalAlignment),
  "expandButton": {
    object (Button)
  },
  "collapseButton": {
    object (Button)
  }
}
Campos
horizontalAlignment

enum (HorizontalAlignment)

O alinhamento horizontal do botão de abrir e fechar.

expandButton

object (Button)

Opcional. Defina um botão personalizável para abrir a seção. Os campos expandButton e collapseButton precisam ser definidos. Se apenas um campo for definido, ele não vai entrar em vigor. Se esse campo não for definido, o botão padrão será usado.

collapseButton

object (Button)

Opcional. Defina um botão personalizável para fechar a seção. Os campos expandButton e collapseButton precisam ser definidos. Se apenas um campo for definido, ele não vai entrar em vigor. Se esse campo não for definido, o botão padrão será usado.

DividerStyle

O estilo de divisor de um card. No momento, usado apenas para divisores entre seções de cards.

Disponível para apps do Google Chat e complementos do Google Workspace.

Tipos enumerados
DIVIDER_STYLE_UNSPECIFIED Não use. Não especificado.
SOLID_DIVIDER Opção padrão. Renderiza um divisor sólido.
NO_DIVIDER Se definido, nenhum divisor será renderizado. Esse estilo remove completamente o divisor do layout. O resultado é equivalente a não adicionar um divisor.

CardAction

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

Disponível para complementos do Google Workspace e indisponível para apps do Google Chat.

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

string

O rótulo que aparece como o item do menu de ações.

onClick

object (OnClick)

A ação onClick para esta ação necessária.

CardFixedFooter

Um rodapé persistente (fixo) que aparece na parte de baixo do card.

Definir fixedFooter sem especificar primaryButton ou secondaryButton causa um erro.

Para apps do Chat, é possível usar rodapés fixos em caixas de diálogo, mas não em mensagens de card. Para ver um exemplo em apps do Google Chat, consulte Adicionar um rodapé persistente.

Disponível para apps do Google Chat e complementos do Google Workspace.

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 cor definidos.

secondaryButton

object (Button)

O botão secundário do rodapé fixo. O botão precisa ser de texto com texto e cor definidos. Se secondaryButton estiver definido, você também precisará definir primaryButton.

DisplayStyle

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

Disponível para complementos do Google Workspace e indisponível para apps do Google Chat.

Tipos enumerados
DISPLAY_STYLE_UNSPECIFIED Não use. Não especificado.
PEEK O cabeçalho do card aparece na parte de baixo da barra lateral, cobrindo parcialmente o card que está no topo da pilha. Ao clicar no cabeçalho, o card é exibido na pilha de cards. Se o card não tiver um cabeçalho, um cabeçalho gerado será usado.
REPLACE Valor padrão. O card é mostrado substituindo a visualização do card de cima na pilha.

ExpressionData

Representa os dados usados para avaliar uma expressão.

Disponível para complementos do Google Workspace que estendem o Google Workspace Studio. Indisponível para apps do Google Chat.

Representação JSON
{
  "id": string,
  "expression": string,
  "conditions": [
    {
      object (Condition)
    }
  ],
  "eventActions": [
    {
      object (EventAction)
    }
  ]
}
Campos
id

string

O identificador exclusivo do ExpressionData.

expression

string

A expressão não compilada.

conditions[]

object (Condition)

A lista de condições determinadas pelo resultado da avaliação da expressão.

eventActions[]

object (EventAction)

A lista de ações em que o ExpressionData pode ser usado.

Condição

Representa uma condição que pode ser usada para acionar uma ação.

Disponível para complementos do Google Workspace que estendem o Google Workspace Studio. Indisponível para apps do Google Chat.

Representação JSON
{
  "actionRuleId": string,

  "expressionDataCondition": {
    object (ExpressionDataCondition)
  }
}
Campos
actionRuleId

string

O identificador exclusivo da ActionRule.

A condição. Confira a seguir uma lista de campos mutuamente exclusivos. No máximo um dos campos será definido em uma resposta:
expressionDataCondition

object (ExpressionDataCondition)

A condição determinada pelos dados da expressão.

Fim dos campos mutuamente exclusivos.

ExpressionDataCondition

Representa uma condição que é avaliada usando a CEL.

Disponível para complementos do Google Workspace que estendem o Google Workspace Studio. Indisponível para apps do Google Chat.

Representação JSON
{
  "conditionType": enum (ConditionType)
}
Campos
conditionType

enum (ConditionType)

O tipo da condição.

ConditionType

O tipo da condição.

Tipos enumerados
CONDITION_TYPE_UNSPECIFIED Tipo de condição não especificado.
EXPRESSION_EVALUATION_SUCCESS A avaliação da expressão foi bem-sucedida.
EXPRESSION_EVALUATION_FAILURE A avaliação da expressão não foi concluída.