Resolver problemas e corrigir cards e caixas de diálogo

Este guia descreve erros comuns relacionados a cards que podem ocorrer e como corrigi-los.

Use o Card Builder para criar e visualizar mensagens e interfaces do usuário para apps do Chat:

Abrir o Card Builder

Como os erros de card aparecem

Os erros de card 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 inteiro não aparece.
  • Uma caixa de diálogo fecha, não abre ou não carrega.

Se você encontrar um comportamento como esse, significa que há um erro no card do app.

Para referência: uma mensagem e uma caixa de diálogo de card funcionando e sem erros

Antes de examinar exemplos de cards com erros, considere esta mensagem e caixa de diálogo de card funcionando. Para ilustrar cada exemplo de erro e a correção, o JSON desse card é modificado pela introdução de erros.

Uma mensagem de card sem erros

Confira a mensagem de card funcionando e sem erros que detalha as informações de contato com um cabeçalho, seções e widgets, como texto decorado e botões:

Uma caixa de diálogo sem erros

Confira a caixa de diálogo funcionando 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 está com erro de ortografia ou capitalização incorreta.

Causa: falta um campo JSON obrigatório

Neste exemplo de erro, um campo JSON obrigatório, title, está ausente. Como resultado, o card é renderizado, mas partes dele que deveriam aparecer não aparecem. Pode ser difícil prever como os cards 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 ou não, consulte a documentação de referência do Cards v2. Neste exemplo, consulte a descrição do title campo em CardHeader.

Veja dois exemplos:

Exemplo 1: especificar subtitle, mas omitir o title obrigatório faz com que o cabeçalho inteiro apareça em branco:

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

Ver snippet JSON de card com erros

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

    . . .
    "header": {

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

Ver snippet JSON de card correto

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 obrigatório faz com que a imagem seja renderizada conforme o esperado, mas não o subtítulo:

O cabeçalho do card não aparece porque um campo obrigatório, o título, está ausente.
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.

Ver snippet JSON de card com erros

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

    . . .
    "header": {

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

Ver snippet JSON de card correto

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 erros de ortografia ou capitalização

Neste exemplo de erro, o JSON do card inclui todos os campos necessários, mas um campo, imageUrl, está com a capitalização incorreta como imageURL (letra R e L maiúsculas), o que causa um erro: a imagem para a qual ele aponta não é renderizada.

Para corrigir esse erro e outros semelhantes, use a formatação JSON correta. Nesse caso, imageUrl está correto. Em caso de dúvida, verifique o JSON do card no documento de referência do card.

O cabeçalho do card não aparece porque um campo obrigatório, o título, está ausente.
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.

Ver snippet JSON de card com erros

Erro: o campo imageURL está com a capitalização incorreta. 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",
    }
    . . .

Ver snippet JSON de card correto

Corrigido: o campo imageUrl está com a capitalização correta.

    . . .
    "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 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 será mostrado e nada vai aparecer no lugar dele. Especificações incorretas podem incluir campos ausentes, campos com erros de ortografia ou capitalização ou JSON estruturado incorretamente, como uma vírgula, aspas ou chave ausente.

Para corrigir esse erro, verifique o JSON do card no documento de referência do card. Em particular, compare todos os widgets ButtonList com o guia de widgets ButtonList.

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

Ver snippet JSON de card com erros

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

Ver snippet JSON de card correto

Corrigido: o objeto onClick agora tem um campo openLink, então o card aparece conforme o 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 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 CardFixedFooter widget, é necessário especificar um primaryButton com texto e cor. Omitir o primaryButton ou defini-lo incorretamente impede que a caixa de diálogo inteira apareça.

Para corrigir esse erro, verifique se o widget CardFixedFooter inclui um primaryButton especificado corretamente.

Ver snippet JSON de card com erros

Erro: o objeto fixedFooter não tem um campo primaryButton especificado, fazendo com que a caixa de diálogo não carregue ou abra.

    . . .
    "fixedFooter": {

        "onClick": {
          . . .
      },
      "secondaryButton": {
        . . .
        }
      }
    }
    . . .

Ver snippet JSON de card correto

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

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

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

Ver snippet JSON de card com erros

Erro: o objeto primaryButton tem um campo onClick com uma matriz `parameters` com erros de ortografia, fazendo com que a caixa de diálogo não carregue ou abra.

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

Ver snippet JSON de card correto

Corrigido: o objeto primaryButton tem um campo onClick com uma matriz `parameters` com a ortografia correta, então 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, a caixa de diálogo não se comporta conforme o esperado. Ela 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 é exclusivo.

Ver snippet JSON de card com erros

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

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

      }
    }
    . . .

Ver snippet JSON de card correto

Corrigido: 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 de caixas 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, isso pode ocorrer porque o app usa uma arquitetura assíncrona, como o Cloud Pub/Sub ou o método da API Create Message.

A abertura, o envio ou o cancelamento de uma caixa de diálogo exigem uma resposta síncrona de um app do Chat com um DialogEventType. Portanto, as caixas de diálogo não são compatíveis com apps criados com uma arquitetura assíncrona arquitetura.

Como solução alternativa, considere usar uma mensagem de card em vez de uma caixa de diálogo.

Outros erros de card e caixa de diálogo

Se as correções descritas nesta página não resolverem o erro relacionado ao card que o app está enfrentando, consulte os registros de erros do app. A consulta dos registros pode ajudar a encontrar erros no JSON do card ou no código do app, e os registros incluem mensagens de erro descritivas para ajudar você a corrigi-los.

Para receber ajuda na correção de erros do app Google Chat, consulte Solucionar problemas e corrigir erros do app Google Chat e Depurar apps do Chat.