Resolver problemas e corrigir cards e caixas de diálogo

Neste guia, descrevemos erros comuns relacionados a cartões que você pode encontrar e como corrigi-los.

Use o Card Builder para criar e visualizar mensagens de cards JSON para apps do Chat:

Abrir o Card Builder

Como os erros do 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 nem é renderizado de maneira inesperada.
  • O card inteiro não vai aparecer.
  • Uma caixa de diálogo fecha, não abre ou não carrega.

Se você encontrar um comportamento como esse, isso significa que há um erro com o card do seu app.

Para referência: uma mensagem de cartão e uma caixa de diálogo livres de erros

Antes de examinar exemplos de cards incorretos, primeiro considere a mensagem e a caixa de diálogo deste card em funcionamento. Para ilustrar cada exemplo de erro e a respectiva correção, o JSON deste card é modificado pela introdução de erros.

Uma mensagem de cartão livre de erros

Esta é uma mensagem de cartão livre de erros que detalha as informações de contato que apresenta um cabeçalho, seções e widgets, como texto e botões decorados:

Uma caixa de diálogo livre de erros

Esta é a caixa de diálogo funcional e sem erros que cria um contato coletando informações dos usuários, com um rodapé e widgets editáveis como entrada de texto e interruptores 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 tem erros de ortografia ou letras maiú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 partes do card que deveriam aparecer não são. Pode ser difícil prever como os cartões serã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 de 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 falta um campo obrigatório, o título.
Figura 1: o cabeçalho deste card não é exibido porque um campo obrigatório, title, está ausente.

Conferir snippet JSON do cartão incorreto

Erro: um campo obrigatório, title, está ausente em header.

    . . .
    "header": {

            "subtitle": "Software Engineer"
          }
    . . .

Mostrar o snippet JSON correto 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 a legenda:

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

Conferir 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",
          }
    . . .

Mostrar o snippet JSON correto 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 escrito incorretamente ou em letras maiúsculas

Neste erro de exemplo, o cartão JSON inclui todos os campos obrigatórios, mas um campo, imageUrl, está escrito incorretamente como imageURL (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á correta. Em caso de dúvida, compare o JSON do cartão com o documento de referência do cartão.

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

Conferir snippet JSON do cartão incorreto

Erro: o campo imageURL está com as 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",
    }
    . . .

Mostrar o snippet JSON correto do cartão

Correção: o campo imageUrl está em letras maiúsculas corretamente.

    . . .
    "header": {
            "title": "Sasha",
            "subtitle": "Software Engineer",
            "imageUrl":
            "https://developers.google.com/chat/images/quickstart-app-avatar.png",
            "imageType": "CIRCLE",
            "imageAltText": "Avatar for Sasha",
          }
    . . .

Erro: o card inteiro não aparece

Às vezes, o card em si não aparece; as causas prováveis são:

Causa: buttonList ou cardFixedFooter especificado incorretamente

Se uma mensagem ou caixa de diálogo de card incluir um widget ButtonList especificado incorretamente ou um widget CardFixedFooter com botões especificados incorretamente, o card inteiro não vai ser exibido e nada aparecerá no lugar. As especificações incorretas podem incluir campos ausentes, campos escritos ou em maiúscula incorretamente ou JSON estruturado incorretamente, como falta de vírgula, 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 do ButtonList.

Exemplo:em um guia de widgets do ButtonList, transmitir uma ação onClick incompleta no primeiro botão impede que todo o card seja renderizado.

Conferir 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 JSON correto do cartão

Correção: o objeto onClick agora tem um campo openLink, para que o card apareça 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, para ou não abre

Se uma caixa de diálogo fechar inesperadamente, não carregar ou não abrir, a causa provável é um problema com a interface do card.

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 a primaryButton ou defini-la 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.

Conferir 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 JSON correto do cartão

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 incorreta de onClick em FixedFooter

Em caixas de diálogo com um widget CardFixedFooter, especificar incorretamente a configuração onClick em qualquer botão ou omiti-la, fazendo com que a caixa de diálogo feche, falhe ou não abra.

Para corrigir esse erro, verifique se cada botão inclui uma configuração onClick especificada corretamente.

Conferir o snippet JSON do cartão incorreto

Erro: o objeto primaryButton tem um campo onClick com uma matriz "parameters" com erros ortográficos, fazendo 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 JSON correto do cartão

Correção: o objeto primaryButton tem um campo onClick com uma matriz "parameters" escrita corretamente, para que a caixa de diálogo funcione conforme 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 exclua o campo name, ela não vai funcionar como esperado. Ele pode fechar, abrir, mas falhar ou não abrir.

Para corrigir esse erro, verifique se cada widget TextInput inclui um campo name apropriado. Verifique se cada campo name no cartão é exclusivo.

Conferir o snippet JSON do cartão incorreto

Erro: o objeto textInput não tem um campo name especificado, fazendo com que a caixa de diálogo feche, falhe ou não abra.

    . . .
    {
      "textInput": {
        "label": "Name",
        "type": "SINGLE_LINE",

      }
    }
    . . .

Mostrar o snippet JSON correto do cartão

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"
      }
    }
    . . .

Falhas nas ações de abrir, enviar ou cancelar caixas de diálogo 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, pode ser porque seu app usa uma arquitetura assíncrona, como Cloud Pub/Sub ou a Create Message.

Abrir, enviar ou cancelar uma caixa de diálogo exige uma resposta síncrona de um app do Chat com uma DialogEventType. Da mesma forma, os aplicativos não oferecem suporte a caixas de diálogo criada com uma arquitetura assíncrona.

Como solução alternativa, considere usar um mensagem de card 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 no app, consulte os registros de erro do app. Consultar os registros pode ajudar a encontrar erros no cartão JSON ou no código do app, e os registros incluem mensagens de erro descritivas para ajudar você a corrigi-los.

Se precisar de ajuda para corrigir erros no app Google Chat, consulte Resolver problemas e corrigir apps do Google Chat e Depurar apps do Chat.