O widget DecoratedText
mostra texto com recursos opcionais de layout e funcionalidade. Por exemplo:
- Mostre um
icon
na frente do texto comstartIcon
. - Mostre um título antes do texto com
topLabel
. - Adicione um botão clicável com
button
ou um botão alternável comswitchControl
.
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 ( |
Campos | |
---|---|
icon
|
O uso foi suspenso e substituído por
|
startIcon
|
Ícone exibido na frente do texto. |
topLabel
|
O texto que aparece acima de
|
text
|
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
|
A configuração de ajuste de texto. Se for
Só se aplica a
|
bottomLabel
|
O texto que aparece abaixo de
|
onClick
|
Esta ação é acionada quando os usuários clicam em
|
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
|
Um botão em que um usuário pode clicar para acionar uma ação. |
switchControl
|
Um widget de alternância em que um usuário pode clicar para mudar o estado e acionar uma ação. |
endIcon
|
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 ( |
Campos | |
---|---|
altText
|
Opcional. Uma descrição do ícone usado para acessibilidade. Se não for especificado, será fornecido o valor padrão
Se o ícone estiver definido em um |
imageType
|
O estilo de corte aplicado à imagem. Em alguns casos, aplicar um
corte |
Campo de união
icons . O ícone exibido no widget do card.
icons
pode ser apenas de um dos tipos a seguir:
|
|
knownIcon
|
Mostre um dos ícones integrados fornecidos pelo Google Workspace.
Por exemplo, para exibir um ícone de avião, especifique
Para uma lista completa de ícones compatíveis, consulte ícones integrados. |
iconUrl
|
Mostre um ícone personalizado hospedado em um URL HTTPS. Por exemplo:
Os tipos de arquivos aceitos incluem
|
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 |
Campos | |
---|---|
Campo de união
|
|
action
|
Se especificado, uma ação será acionada por este
|
openLink
|
Se especificado, este |
openDynamicLinkAction
|
Um complemento aciona essa ação quando é necessário abrir um link. Ele é diferente do |
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 ( |
Campos | |
---|---|
function
|
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[]
|
Lista de parâmetros de ação. |
loadIndicator
|
Especifica o indicador de carregamento que a ação mostra ao fazer a chamada para a ação. |
persistValues
|
Indica se os valores do formulário persistem após a ação. O valor padrão é
Se
Se for |
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
Ao especificar uma
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. |
OpenLink
Representa um
evento onClick
que abre um hiperlink.
Representação JSON |
---|
{ "url": string, "openAs": enum ( |
Campos | |
---|---|
url
|
O URL a ser aberto. |
openAs
|
Como abrir um link. Indisponível nos apps de chat. |
onClose
|
Se o cliente se esquece de um link depois de abri-lo ou o observa até a janela ser fechada. Indisponível nos apps de chat. |
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
(não um
Image
) e defina uma
ação
ImageComponent
onClick
.
Representação JSON |
---|
{ "text": string, "icon": { object ( |
Campos | |
---|---|
text
|
O texto exibido dentro do botão. |
icon
|
A imagem do ícone. Se
|
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
Como opção, defina
Para
Por exemplo, a cor a seguir representa um vermelho meio transparente:
|
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
|
Se for |
altText
|
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 ( |
Campos | |
---|---|
name
|
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
|
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
|
Quando
|
onChangeAction
|
A ação a ser executada quando o estado da chave muda, como qual função será executada. |
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.