Résoudre les problèmes liés aux fiches et aux boîtes de dialogue

Ce guide décrit les erreurs courantes liées aux fiches que vous pouvez rencontrer et comment les corriger.

Utilisez Card Builder pour concevoir et prévisualiser les messages et les interfaces utilisateur des applications Chat :

Ouvrir Card Builder

Comment les erreurs de fiche s'affichent-elles ?

Les erreurs de fiche se manifestent de plusieurs manières :

  • Une partie d'une fiche, comme un widget ou un composant, ne s'affiche pas ou s'affiche de manière inattendue.
  • La fiche entière ne s'affiche pas.
  • Une boîte de dialogue se ferme, ne s'ouvre pas ou ne se charge pas.

Si vous rencontrez ce type de comportement, cela signifie qu'il y a une erreur avec la fiche de votre application.

Pour référence : message de fiche et boîte de dialogue fonctionnels et sans erreur

Avant d'examiner des exemples de fiches erronées, examinez d'abord ce message de fiche et cette boîte de dialogue fonctionnels. Pour illustrer chaque erreur et sa correction, le code JSON de cette fiche est modifié en introduisant des erreurs.

Message de fiche sans erreur

Voici le message de fiche fonctionnel et sans erreur qui détaille les coordonnées et comporte un en-tête, des sections et des widgets tels que du texte décoré et des boutons :

Boîte de dialogue sans erreur

Voici la boîte de dialogue fonctionnelle et sans erreur qui crée un contact en collectant des informations auprès des utilisateurs, et qui comporte un pied de page, des widgets modifiables tels que des entrées de texte et des boutons d'activation/de désactivation, ainsi que des boutons :

Erreur : une partie d'une fiche ne s'affiche pas

Parfois, les fiches s'affichent, mais une partie de la fiche que vous vous attendiez à voir n'apparaît pas. Les causes probables sont les suivantes :

  • Un champ JSON obligatoire est manquant.
  • Un champ JSON est mal orthographié ou sa mise en majuscules est incorrecte.

Cause : un champ JSON obligatoire est manquant

Dans cet exemple d'erreur, un champ JSON obligatoire, title, est manquant. Par conséquent, la fiche s'affiche, mais certaines parties de la fiche qui devraient apparaître ne le sont pas. Il peut être difficile de prédire comment les fiches s'affichent lorsque des champs obligatoires sont omis.

Pour corriger cette erreur, ajoutez le champ JSON obligatoire. Dans cet exemple, il s'agit de title.

Pour savoir si un champ JSON est obligatoire ou non, consultez la documentation de référence sur les fiches v2. Dans cet exemple, reportez-vous à la description du champ title sur CardHeader.

Voici deux exemples :

Exemple 1 : si vous spécifiez subtitle mais que vous omettez le champ obligatoire title, l'en-tête entier apparaît vide :

L'en-tête de cette fiche ne s'affiche pas, car le champ obligatoire "Titre" est manquant.
Figure 1: L'en-tête de cette fiche ne s'affiche pas, car un champ obligatoire, title, est manquant.

Afficher l'extrait JSON de la fiche erronée

Erreur : un champ obligatoire, title, est manquant dans header.

    . . .
    "header": {

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

Afficher l'extrait JSON de la fiche correcte

Corrigé : le champ obligatoire, title, fait partie de la spécification header.

    . . .
    "header": {
            "title": "Sasha",
            "subtitle": "Software Engineer"
          }
    . . .

Exemple 2 : si vous spécifiez subtitle, imageUrl, imageType et imageAltText, mais que vous omettez le champ obligatoire title, l'image s'affiche comme prévu, mais pas le sous-titre :

L'en-tête de cette fiche ne s'affiche pas, car le champ obligatoire "Titre" est manquant.
Figure 2 : L'en-tête de cette fiche n'affiche pas le sous-titre, car un champ obligatoire, title, est manquant, mais l'image s'affiche comme prévu.

Afficher l'extrait JSON de la fiche erronée

Erreur : un champ obligatoire, title, est manquant dans header.

    . . .
    "header": {

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

Afficher l'extrait JSON de la fiche correcte

Corrigé : le champ obligatoire, title, fait partie de la spécification header.

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

Cause : JSON mal orthographié ou dont la mise en majuscules est incorrecte

Dans cet exemple d'erreur, le code JSON de la fiche inclut tous les champs requis, mais un champ, imageUrl, est mal orthographié et mis en majuscules de manière incorrecte (imageURL au lieu de imageUrl). L'image vers laquelle il pointe ne s'affiche pas.RL

Pour corriger cette erreur et d'autres erreurs similaires, utilisez le format JSON correct. Dans ce cas, imageUrl est correct. En cas de doute, comparez le code JSON de la fiche avec le document de référence de la fiche.

L'en-tête de cette fiche ne s'affiche pas, car le champ obligatoire "Titre" est manquant.
Figure 3: L'en-tête de cette fiche n'affiche pas le sous-titre, car un champ obligatoire, title, est manquant, mais l'image s'affiche comme prévu.

Afficher l'extrait JSON de la fiche erronée

Erreur : la mise en majuscules du champ imageURL est incorrecte. La valeur doit être imageUrl.

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

Afficher l'extrait JSON de la fiche correcte

Corrigé : la mise en majuscules du champ imageUrl est correcte.

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

Erreur : une fiche entière ne s'affiche pas

Parfois, la fiche elle-même ne s'affiche pas. Les causes probables sont les suivantes :

  • Un widget ButtonList est spécifié de manière incorrecte.
  • Un widget CardFixedFooter comporte un bouton spécifié de manière incorrecte.

Cause : buttonList ou cardFixedFooter spécifié de manière incorrecte

Si un message de fiche ou une boîte de dialogue inclut un widget ButtonList spécifié de manière incorrecte ou un widget CardFixedFooter avec des boutons spécifiés de manière incorrecte, la fiche entière ne s'affiche pas et rien n'apparaît à sa place. Les spécifications incorrectes peuvent inclure des champs manquants, des champs mal orthographiés ou dont la mise en majuscules est incorrecte, ou un code JSON mal structuré, tel qu'une virgule, des guillemets ou une accolade manquants.

Pour corriger cette erreur, comparez le code JSON de la fiche avec le document de référence de la fiche. En particulier, comparez tous les widgets ButtonList avec le guide des widgets ButtonList.

Exemple : Dans un guide de widget ButtonList, le fait de transmettre une action onClick incomplète dans le premier bouton empêche l'affichage de la fiche entière.

Afficher l'extrait JSON de la fiche erronée

Erreur : aucun champ n'est spécifié pour l'objet onClick. Par conséquent, la fiche entière ne s'affiche pas.

    . . .
    {
      "buttonList": {
        "buttons": [
          {
            "text": "Share",
            "onClick": {


              }
            }
          },
          {
            "text": "Edit",
            "onClick": {
              "action": {
                "function": "goToView",
                "parameters": [
                  {
                    "key": "viewType",
                    "value": "EDIT",
                  }
                ],
              }
            }
          },
        ],
      },
    }
    . . .

Afficher l'extrait JSON de la fiche correcte

Corrigé : l'objet onClick comporte désormais un champ openLink. La fiche s'affiche donc comme prévu.

    . . .
    {
      "buttonList": {
        "buttons": [
          {
            "text": "Share",
            "onClick": {
              "openLink": {
                "url": "https://example.com/share",
              }
            }
          },
          {
            "text": "Edit",
            "onClick": {
              "action": {
                "function": "goToView",
                "parameters": [
                  {
                    "key": "viewType",
                    "value": "EDIT",
                  }
                ],
              }
            }
          },
        ],
      },
    }
    . . .

Erreur : une boîte de dialogue se ferme, se bloque ou ne s'ouvre pas

Si une boîte de dialogue se ferme de manière inattendue, ne se charge pas ou ne s'ouvre pas, la cause probable est un problème lié à son interface de fiche.

Voici les raisons les plus courantes :

  • Le CardFixedFooter widget ne comporte pas de primaryButton.
  • Un bouton du widget CardFixedFooter ne comporte pas d'action onClick, ou son action onClick est spécifiée de manière incorrecte.
  • Un widget TextInput ne comporte pas de champ name.

Cause : CardFixedFooter ne comporte pas de primaryButton

Dans les boîtes de dialogue comportant un widget CardFixedFooter, il est obligatoire de spécifier un primaryButton avec du texte et une couleur. Si vous omettez le primaryButton ou si vous le définissez de manière incorrecte, la boîte de dialogue entière ne s'affiche pas.

Pour corriger cette erreur, assurez-vous que le widget CardFixedFooter inclut un primaryButton spécifié correctement.

Afficher l'extrait JSON de la fiche erronée

Erreur : aucun champ primaryButton n'est spécifié pour l'objet fixedFooter, ce qui empêche le chargement ou l'ouverture de la boîte de dialogue.

    . . .
    "fixedFooter": {

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

Afficher l'extrait JSON de la fiche correcte

Corrigé : un champ primaryButton est désormais spécifié pour fixedFooter. La boîte de dialogue fonctionne donc comme prévu.

    . . .
    "fixedFooter": {
      "primaryButton": {
        "text": "Submit",
        "color": {
          "red": 0,
          "blue": 1,
          "green": 0
        },
        "onClick": {
          . . .
      },
      "secondaryButton": {
        . . .
        }
      }
    }
    . . .

Cause : paramètre onClick incorrect dans FixedFooter

Dans les boîtes de dialogue comportant un widget CardFixedFooter, si vous spécifiez le paramètre onClick de manière incorrecte sur un bouton ou si vous l'omettez, la boîte de dialogue se ferme, ne se charge pas ou ne s'ouvre pas.

Pour corriger cette erreur, assurez-vous que chaque bouton inclut un paramètre onClick spécifié correctement.

Afficher l'extrait JSON de la fiche erronée

Erreur : l'objet primaryButton comporte un champ onClick avec un tableau `parameters` mal orthographié, ce qui empêche le chargement ou l'ouverture de la boîte de dialogue.

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

Afficher l'extrait JSON de la fiche correcte

Corrigé : l'objet primaryButton comporte un champ onClick avec un tableau `parameters` correctement orthographié. La boîte de dialogue fonctionne donc comme prévu.

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

Cause : TextInput ne comporte pas de name

Si une boîte de dialogue inclut un TextInput widget qui exclut le champ name, la boîte de dialogue ne se comporte pas comme prévu. Elle peut se fermer, s'ouvrir sans se charger ou ne pas s'ouvrir.

Pour corriger cette erreur, assurez-vous que chaque widget TextInput inclut un champ name approprié. Assurez-vous que chaque champ name de la fiche est unique.

Afficher l'extrait JSON de la fiche erronée

Erreur : aucun champ name n'est spécifié pour l'objet textInput, ce qui empêche la fermeture, le chargement ou l'ouverture de la boîte de dialogue.

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

      }
    }
    . . .

Afficher l'extrait JSON de la fiche correcte

Corrigé : un champ name est désormais spécifié pour textInput. La boîte de dialogue fonctionne donc comme prévu.

    . . .
    {
      "textInput": {
        "label": "Name",
        "type": "SINGLE_LINE",
        "name": "contactName"
      }
    }
    . . .

Les actions d'ouverture, d'envoi ou d'annulation d'une boîte de dialogue échouent avec une architecture d'application asynchrone

Si votre application Chat renvoie le message d'erreur Could not load dialog. Invalid response returned by bot. lorsque vous utilisez des boîtes de dialogue, cela peut être dû au fait que votre application utilise une architecture asynchrone, comme Cloud Pub/Sub ou la méthode Create Message API.

L'ouverture, l'envoi ou l'annulation d'une boîte de dialogue nécessite une réponse synchrone d'une application Chat avec un DialogEventType. Par conséquent, les boîtes de dialogue ne sont pas compatibles avec les applications créées avec une architecture asynchrone.

Pour contourner ce problème, envisagez d'utiliser un message de fiche au lieu d'une boîte de dialogue.

Autres erreurs liées aux fiches et aux boîtes de dialogue

Si les corrections décrites sur cette page ne résolvent pas l'erreur liée à la fiche que rencontre votre application, interrogez les journaux d'erreurs de l'application. L'interrogation des journaux peut vous aider à trouver des erreurs dans le code JSON de la fiche ou le code de l'application. Les journaux incluent des messages d'erreur descriptifs pour vous aider à les corriger.

Pour obtenir de l'aide sur la résolution des erreurs liées aux applications Google Chat, consultez Résoudre les problèmes et corriger les erreurs liées aux applications Google Chat et Déboguer les applications Chat.