Resolver problemas e corrigir cards e caixas de diálogo

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:

O cabeçalho deste card não é exibido porque um campo obrigatório, o título, está ausente.
Figura 1: o cabeçalho desse card não é mostrado porque um campo obrigatório title está ausente.

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:

O cabeçalho deste card não é exibido porque um campo obrigatório, o título, está ausente.
Figura 2: o cabeçalho desse card não exibe o subtítulo porque um campo obrigatório, title, está ausente, mas a imagem é renderizada conforme esperado.

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.

O cabeçalho deste card não é exibido porque um campo obrigatório, o título, está ausente.
Figura 3: o cabeçalho desse card não exibe o subtítulo porque um campo obrigatório, title, está ausente, mas a imagem é renderizada conforme esperado.

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:

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:

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.

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.