Este guia descreve erros comuns relacionados a cards que podem ser encontrados e como corrigi-los.
Crie e visualize cards com o Criador de cards.
Abra o Criador de cards.Como os erros de card aparecem
Os erros no cartão se manifestam de várias maneiras:
- Parte de um card, como um widget ou componente, não aparece ou é renderizada de maneira inesperada.
- O card não aparece por completo.
- Uma caixa de diálogo fecha, não abre ou não carrega.
Caso você encontre um comportamento como esse, isso significa que há um erro no card do seu app.
Para referência: uma mensagem e uma caixa de diálogo de cartão sem erros
Antes de examinar exemplos de cards incorretos, primeiro considere a mensagem e a caixa de diálogo do card. Para ilustrar cada exemplo de erro e a respectiva correção, o JSON deste card é modificado com a introdução de erros.
Mensagem de cartão sem erros
Esta é a mensagem de card sem erros que detalha os dados de contato que apresentam um cabeçalho, seções e widgets, como texto e botões decorados:
Uma caixa de diálogo sem erros
Esta é a caixa de diálogo sem erros que cria um contato coletando informações dos usuários, apresentando um rodapé e widgets editáveis, como entrada de texto, chaves e botões:
Erro: parte de um card não aparece
Às vezes, os cards são renderizados, mas parte de um card que você esperava ver não aparece. As causas prováveis são:
- Um campo JSON obrigatório está ausente.
- Um campo JSON contém erros de ortografia ou letras maiúsculas e minúsculas.
Causa: campo JSON obrigatório ausente
Neste erro de exemplo, um campo JSON obrigatório, title
, está ausente. Como resultado, o card é renderizado, mas as partes dele que devem aparecer não são. Pode ser difícil prever como os cartões são renderizados quando os campos obrigatórios são omitidos.
Para corrigir esse erro, adicione o campo JSON obrigatório. Neste exemplo, title
.
Para saber se um campo JSON é obrigatório, consulte a documentação de referência do Cards v2. Neste exemplo, consulte a descrição do campo title
em CardHeader
.
Veja dois exemplos:
Exemplo 1: especificar subtitle
, mas omitir o title
obrigatório faz com que todo o cabeçalho apareça em branco:
Exibir snippet JSON do cartão incorreto
Erro: um campo obrigatório, title
, está ausente em header
.
. . . "header": { "subtitle": "Software Engineer" } . . .
Visualizar o snippet correto do JSON do cartão
Corrigido: o campo obrigatório, title
, faz parte da especificação header
.
. . . "header": { "title": "Sasha", "subtitle": "Software Engineer" } . . .
Exemplo 2: especificar subtitle
, imageUrl
, imageType
e imageAltText
, mas omitir o title
necessário faz com que a imagem seja renderizada conforme o esperado, mas não o subtítulo:
Exibir snippet JSON do cartão incorreto
Erro: um campo obrigatório, title
, está ausente em header
.
. . . "header": { "subtitle": "Software Engineer", "imageUrl": "https://developers.google.com/chat/images/quickstart-app-avatar.png", "imageType": "CIRCLE", "imageAltText": "Avatar for Sasha", } . . .
Visualizar o snippet correto do JSON do cartão
Corrigido: o campo obrigatório, title
, faz parte da especificação header
.
. . . "header": { "title": "Sasha", "subtitle": "Software Engineer", "imageUrl": "https://developers.google.com/chat/images/quickstart-app-avatar.png", "imageType": "CIRCLE", "imageAltText": "Avatar for Sasha", } . . .
Causa: JSON com ortografia ou letras maiúsculas incorretas
Neste exemplo de erro, o JSON do cartão inclui todos os campos necessários, mas um campo imageUrl
é capitalizado incorretamente como imageURL
(capital R
maiúsculo L
), o que causa um erro: a imagem para a qual ele aponta não é renderizada.
Para corrigir esse e outros erros semelhantes, use a formatação JSON correta. Nesse caso, imageUrl
está correto. Em caso de dúvida, compare o JSON do cartão com o documento de referência.
Exibir snippet JSON do cartão incorreto
Erro: o campo imageURL
está com letras maiúsculas incorretas. Deve ser imageUrl
.
. . . "header": { "title": "Sasha", "subtitle": "Software Engineer", "imageURL": "https://developers.google.com/chat/images/quickstart-app-avatar.png", "imageType": "CIRCLE", "imageAltText": "Avatar for Sasha", } . . .
Visualizar o snippet correto do JSON do cartão
Corrigido: o campo imageUrl
está com as letras maiúsculas corretas.
. . . "header": { "title": "Sasha", "subtitle": "Software Engineer", "imageUrl": "https://developers.google.com/chat/images/quickstart-app-avatar.png", "imageType": "CIRCLE", "imageAltText": "Avatar for Sasha", } . . .
Erro: um card inteiro não é exibido
Às vezes, o cartão em si não aparece. As causas prováveis são:
- Um widget
ButtonList
foi especificado incorretamente. - Um widget
CardFixedFooter
tem um botão especificado incorretamente.
Causa: buttonList
ou cardFixedFooter
especificados incorretamente
Se uma mensagem ou caixa de diálogo do card incluir um widget ButtonList
especificado incorretamente ou um widget CardFixedFooter
com botões especificados incorretamente, o card inteiro não será mostrado, e nada vai aparecer no lugar. Especificações incorretas podem incluir campos ausentes, com letras maiúsculas ou com erros de ortografia ou JSON estruturado de forma inadequada, como falta de vírgulas, aspas ou chaves.
Para corrigir esse erro, compare o JSON do cartão com o documento de referência do cartão. Especificamente, compare todos os widgets ButtonList
com o guia de widgets ButtonList
.
Exemplo:em um guia do widget ButtonList
, transmitir uma ação onClick
incompleta no primeiro botão impede a renderização de todo o card.
Visualizar o snippet JSON do cartão incorreto
Erro: o objeto onClick
não tem campos especificados, então o card inteiro não aparece.
. . . { "buttonList": { "buttons": [ { "text": "Share", "onClick": { } } }, { "text": "Edit", "onClick": { "action": { "function": "goToView", "parameters": [ { "key": "viewType", "value": "EDIT", } ], } } }, ], }, } . . .
Mostrar o snippet correto JSON do card
Corrigido: o objeto onClick
agora tem um campo openLink
, então o card aparece conforme esperado.
. . . { "buttonList": { "buttons": [ { "text": "Share", "onClick": { "openLink": { "url": "https://example.com/share", } } }, { "text": "Edit", "onClick": { "action": { "function": "goToView", "parameters": [ { "key": "viewType", "value": "EDIT", } ], } } }, ], }, } . . .
Erro: uma caixa de diálogo fecha, trava ou não abre
Se uma caixa de diálogo fecha inesperadamente, não carrega ou não abre, a causa provável é um problema com a interface da placa.
Estes são os motivos mais comuns:
- O widget
CardFixedFooter
não tem umprimaryButton
. - Um botão no widget
CardFixedFooter
não tem uma açãoonClick
ou a açãoonClick
foi especificada incorretamente. - Um widget
TextInput
não tem um camponame
.
Causa: CardFixedFooter
não tem primaryButton
Em caixas de diálogo com um widget CardFixedFooter
, é necessário especificar um primaryButton
com texto e cor. Omitir primaryButton
ou defini-lo incorretamente impede que toda a caixa de diálogo apareça.
Para corrigir esse erro, verifique se o widget CardFixedFooter
inclui um primaryButton
especificado corretamente.
Visualizar o snippet JSON do cartão incorreto
Erro: o objeto fixedFooter
não tem um campo primaryButton
especificado, fazendo com que a caixa de diálogo não seja carregada ou aberta.
. . . "fixedFooter": { "onClick": { . . . }, "secondaryButton": { . . . } } } . . .
Mostrar o snippet correto JSON do card
Correção: o fixedFooter
agora tem um campo primaryButton
especificado, então a caixa de diálogo funciona conforme o esperado.
. . . "fixedFooter": { "primaryButton": { "text": "Submit", "color": { "red": 0, "blue": 1, "green": 0 }, "onClick": { . . . }, "secondaryButton": { . . . } } } . . .
Causa: configuração de onClick
incorreta em FixedFooter
Em caixas de diálogo com um widget CardFixedFooter
, ao especificar ou omitir a configuração onClick
em qualquer botão incorretamente, isso faz com que a caixa de diálogo seja fechada, falhe ao carregar ou não abra.
Para corrigir esse erro, verifique se cada botão inclui uma configuração de onClick
especificada corretamente.
Visualizar o snippet JSON do cartão incorreto
Erro: o objeto primaryButton
tem um campo onClick
com uma matriz "parameters" incorreta, o que faz com que a caixa de diálogo não seja carregada ou aberta.
. . . "fixedFooter": { "primaryButton": { "text": "Submit", "color": { "red": 0, "blue": 1, "green": 0 }, "onClick": { "action": { "function": "setLanguageType", "parrammetters": [ { "key": "languageType", "value": "C++" } ] } } }, "secondaryButton": { "text": "Cancel", "onClick": { "action": { "function": "reset" } } } } . . .
Mostrar o snippet correto JSON do card
Correção: o objeto primaryButton
tem um campo onClick
com uma matriz de "parameters" escrita corretamente. Portanto, a caixa de diálogo funciona conforme o esperado.
. . . "fixedFooter": { "primaryButton": { "text": "Submit", "color": { "red": 0, "blue": 1, "green": 0 }, "onClick": { "action": { "function": "setLanguageType", "parameters": [ { "key": "languageType", "value": "C++" } ] } } }, "secondaryButton": { "text": "Cancel", "onClick": { "action": { "function": "reset" } } } } . . .
Causa: TextInput
não tem name
Se uma caixa de diálogo incluir um widget TextInput
que exclui o campo name
, ela não vai se comportar como esperado. Ele pode fechar, abrir, mas não carregar ou não abrir.
Para corrigir esse erro, verifique se cada widget TextInput
inclui um campo name
apropriado. Verifique se cada campo name
no card é único.
Visualizar o snippet JSON do cartão incorreto
Erro: o objeto textInput
não tem um campo name
especificado, o que faz com que a caixa de diálogo seja fechada, falhe ao carregar ou abra.
. . . { "textInput": { "label": "Name", "type": "SINGLE_LINE", } } . . .
Mostrar o snippet correto JSON do card
Correção: o textInput
agora tem um campo name
especificado, então a caixa de diálogo funciona conforme o esperado.
. . . { "textInput": { "label": "Name", "type": "SINGLE_LINE", "name": "contactName" } } . . .
As ações de abertura, envio ou cancelamento da caixa de diálogo falham com uma arquitetura de app assíncrona.
Se o app do Chat retornar a mensagem de erro
Could not load dialog. Invalid response returned by bot.
ao trabalhar com
caixas de diálogo, é possível que ele
use uma arquitetura assíncrona, como o
Cloud Pub/Sub ou o
método de API Create Message.
Para abrir, enviar ou cancelar uma caixa de diálogo, é necessário
ter uma resposta síncrona de um app do Chat com uma
DialogEventType
.
Da mesma forma, caixas de diálogo não são compatíveis com apps
criados com uma arquitetura assíncrona.
Como solução alternativa, use uma mensagem de cartão em vez de uma caixa de diálogo.
Outros erros no card e na caixa de diálogo
Se as correções descritas nesta página não resolverem o erro relacionado ao cartão do app, consulte os registros de erros do app. Consultar os registros pode ajudar a encontrar erros no JSON do cartão ou no código do app, e os registros incluem mensagens de erro descritivas para ajudar na correção.
Temas relacionados
Se precisar de ajuda para corrigir erros do app Google Chat, consulte Resolver problemas e corrigir o app Google Chat e Depurar apps do Chat.