Você tem cinco minutos? Responda a uma pesquisa rápida para nos ajudar a melhorar a documentação do desenvolvedor do Google Chat.

Texto decorado

O widget DecoratedText mostra texto com recursos opcionais de layout e funcionalidade. Por exemplo:

  • Mostre um icon na frente do texto com startIcon.
  • Mostre um título antes do texto com topLabel.
  • Adicione um botão clicável com button ou um botão alternável com switchControl.

Use o widget DecoratedText quando precisar apresentar informações de maneira fácil de consumir e interativa. O widget é perfeito para cartões de contato, atualizações de status de pedidos e notificações de tíquetes de trabalho.

Confira a seguir um card que consiste em um widget DecoratedText usado para mostrar detalhes de contato, como endereço de e-mail, status on-line, número de telefone e site:

Formatar texto em um widget DecoratedText

O widget DecoratedText oferece suporte a formatação HTML de texto simples. Ao definir o conteúdo de texto desses widgets, basta incluir as tags HTML correspondentes. Para mais informações sobre quais tags HTML são compatíveis, consulte Formatação de texto do card.

Representação e campos JSON

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)

O uso foi suspenso e substituído por startIcon.

startIcon

object (Icon)

Ícone exibido na frente do texto.

topLabel

string

O texto que aparece acima de text. Sempre trunca.

text

string

Obrigatório. O texto principal.

Compatível com 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 for true, o texto vai ser ajustado e exibido em várias linhas. Caso contrário, o texto fica truncado.

Só se aplica a text, não a topLabel e bottomLabel.

bottomLabel

string

O texto que aparece abaixo de text. Sempre une.

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)

Um ícone exibido após o texto.

Oferece suporte a ícones integrados e personalizados.

Icon

Um ícone exibido em um widget em um card. Para ver um exemplo nos apps do Google Chat, consulte Ícone.

Oferece suporte a í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, para 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 estiver 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 card. 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.

Por exemplo:

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

Os tipos de arquivos aceitos incluem .png e .jpg.

Tipo de imagem

Forma usada para cortar a imagem.

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

Ao clicar

Representa como responder quando os usuários clicam em um elemento interativo em um cartão, 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 será acionada por este onClick.

card

object (Card)

Um novo cartão é enviado para a pilha de cartões após um clique, se especificado.

Compatível com os complementos do Google Workspace, mas não com os 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 para invocar quando o elemento que o contém for clicado ou ativado de outra forma.

Para 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 mostra 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 a ação ser acionada. Para permitir que o usuário faça mudanças enquanto a ação é processada, defina LoadIndicator como NONE. Para mensagens de cards 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 é 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 um action, como abrir um link ou executar 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.

Botão

Um botão de texto, ícone ou texto e ícone em que os usuários podem clicar. Veja um exemplo nos apps do Google Chat em 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 definido, o botão vai ser preenchido com uma cor de plano de fundo sólida, e a cor da fonte vai mudar para manter o contraste. Por exemplo, definir um plano de fundo azul provavelmente resulta em texto branco.

Se não for definido, 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.

Como opção, 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 a seguir representa um vermelho meio 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 for true, o botão será exibido 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".

SwitchControl

Uma chave no 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 chave é 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 muda, como qual função será executada.

controlType

enum (ControlType)

Como a chave aparece na interface do usuário.

Resolver problemas

Quando um app ou card do Google Chat retorna um erro, a interface do Chat mostra uma mensagem dizendo "Ocorreu um erro" ou "Não foi possível processar sua solicitação". Às vezes, a IU do Chat não mostra nenhuma mensagem de erro, mas o app ou o card do Chat produz um resultado inesperado. Por exemplo, uma mensagem de card pode não aparecer.

Embora uma mensagem de erro talvez não apareça na IU do Chat, mensagens de erro descritivas e dados de registro estão disponíveis para ajudar a corrigir erros quando o registro de erros nos apps do Chat está ativado. Se precisar de ajuda para ver, depurar e corrigir erros, consulte Resolver problemas e corrigir erros do Google Chat.