Texto decorado

O widget DecoratedText exibe texto com recursos opcionais de layout e funcionalidade. Exemplo:

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

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

Exemplo: card de contato

A imagem a seguir mostra 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.

Mensagem de card no Google Chat mostrando um widget DecoratedText.
Figura 1: uma mensagem com card no Google Chat que mostra um widget "DecoratedText".

Este é o JSON do cartão:

JSON

{
  "cardsV2": [
    {
      "cardId": "exampleCard",
      "card": {
        "sections": [
          {
            "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",
                }
              },
              {
                "decoratedText": {
                  "startIcon": {
                    "knownIcon": "STAR",
                  },
                  "text": "<a href=\"https://developers.google.com/chat\">
                    Google Chat Developer Documentation</a>",
                }
              }
            ]
          }
        ]
      }
    }
  ]
}

Formatar texto em um widget DecoratedText

O widget do DecoratedText oferece suporte à formatação HTML de texto simples. Ao configurar o conteúdo de texto desses widgets, inclua as tags HTML correspondentes. Os seguintes formatos são compatíveis:

Formato Exemplo Resultado renderizado
Negrito <b>test</b> test
Itálico <i>test</i> test
Sublinhado <u>test</u> test
Tachado <s>test</s> test
Cor da fonte <font color="#ea9999">test</font> test
Hiperlink <a href="https://www.google.com">google</a> google
Tempo <time>2020-02-16 15:00</time> 16/02/2020 15:00
Nova linha test <br> test teste
teste

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

Obsoleto, substituído por startIcon .

startIcon

object ( Icon )

Ícone exibido na frente do texto.

topLabel

string

O texto que aparece acima text . Sempre trunca.

text

string

Obrigatório. O texto principal.

Suporta formatação simples. Consulte Formatação de texto para ver detalhes sobre a formatação.

wrapText

boolean

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

Isso se aplica apenas a text , não topLabel e bottomLabel .

bottomLabel

string

O texto que aparece abaixo text . Sempre trunca.

onClick

object ( OnClick )

Quando os usuários clicam em topLabel ou bottomLabel , essa ação é acionada.

Campo de união control . Um botão, um interruptor, uma caixa de seleção ou uma imagem que aparece no lado direito do texto no widget decoratedText . control pode ser apenas de um dos tipos a seguir:
button

object ( Button )

Um botão que pode ser clicado para acionar uma ação.

switchControl

object ( SwitchControl )

É possível clicar em um widget de interruptor para alterar o estado e acionar uma ação.

endIcon

object ( Icon )

Ícone exibido após o texto.

Oferece suporte a ícones integrados e personalizados .

Button representação e campos JSON

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

string

O texto exibido no botão.

icon

object ( Icon )

Imagem do ícone. Se icon e text forem definidos, o ícone aparecerá antes do texto.

color

object ( Color )

Se definido, o botão será preenchido com uma cor sólida do plano de fundo, e a cor da fonte será alterada para manter o contraste com a cor do plano de fundo. Por exemplo, um fundo azul pode resultar em texto branco.

Se ela não for definida, o plano de fundo da imagem será branco e a cor da fonte será azul.

Para vermelho, verde e azul, o valor de cada campo é um número float que pode ser expresso de duas maneiras: como um número entre 0 e 255 dividido por 255 (153/255) ou como um valor entre 0 e 1 (0,6). O valor 0 representa a ausência de uma cor e 1 ou 255/255 representa a presença total dessa cor na escala RGB.

Você pode definir alfa, que define um nível de transparência usando esta equação: 

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

Para alfa, 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 o botão é clicado, como abrir um hiperlink ou executar uma função personalizada.

disabled

boolean

Se 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 para que os usuários saibam o que o botão faz. Por exemplo, se um botão abrir um hiperlink, você poderá escrever: "Abre uma nova guia do navegador e navega até a documentação do desenvolvedor do Google Chat em https://developers.google.com/chat" .

Icon

Um ícone exibido em um widget em um card.

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, o valor padrão "Botão" será fornecido. Como prática recomendada, defina uma descrição útil para o que o ícone exibe e, se aplicável, o que ele faz. Por exemplo, A user's account portrait ou Opens a new browser tab and navigates to the Google Chat developer documentation at https://developers.google.com/chat .

Se o ícone 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 )

Estilo de corte aplicado à imagem. Em alguns casos, aplicar um corte CIRCLE faz com que a imagem seja desenhada em um tamanho maior que o ícone integrado.

Campo de união icons . Ícone exibido no widget no card. icons pode ser apenas de um dos tipos a seguir:
knownIcon

string

Exiba um dos ícones integrados fornecidos pelo Google Workspace.

Por exemplo, para exibir um ícone de avião, especifique AIRPLANE . Para um ônibus, especifique BUS .

Para ver uma lista completa de ícones compatíveis, consulte ícones integrados .

iconUrl

string

Mostrar um ícone personalizado hospedado em um URL HTTPS.

Exemplo: 

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

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

ImageType

É a forma usada para cortar a imagem.

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

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 .

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.