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 cartes que vous pouvez rencontrer et explique comment les corriger.

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

Ouvrir l'outil de création de cartes

Affichage des erreurs de fiche

Les erreurs de carte 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 complète ne s'affiche pas.
  • Une boîte de dialogue se ferme, ne s'ouvre pas ou ne se charge pas.

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

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

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

Message de carte 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 et des boutons décorés:

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. Elle comporte un pied de page et des widgets modifiables tels que des champs de saisie de texte, des boutons et des boutons d'activation/de désactivation:

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

Il arrive que des fiches s'affichent, mais qu'une partie de la fiche que vous attendiez ne s'affiche pas. Les causes probables sont les suivantes:

  • Un champ JSON obligatoire est manquant.
  • Un champ JSON est mal orthographié ou mal mis en majuscules.

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 qui devraient apparaître ne le font pas. Il peut être difficile de prévoir l'affichage des fiches lorsque des champs obligatoires sont omis.

Pour corriger cette erreur, ajoutez le champ JSON requis (title dans cet exemple).

Pour savoir si un champ JSON est obligatoire, consultez la documentation de référence de Cards v2. Dans cet exemple, consultez la description du champ title sur CardHeader.

Voici deux exemples :

Exemple 1: Si vous spécifiez subtitle, mais que vous omettez l'title obligatoire, l'en-tête entier s'affichera en blanc:

L'en-tête de cette fiche ne s'affiche pas, car un champ obligatoire, le 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é

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

    . . .
    "header": {

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

Afficher l'extrait JSON de carte correct

Correction: 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 title obligatoire, l'image s'affiche comme prévu, mais pas les sous-titres:

L'en-tête de cette fiche ne s'affiche pas, car un champ obligatoire, le 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é

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 carte correct

Correction: 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 mal mis en majuscules

Dans cet exemple d'erreur, le fichier JSON de la fiche inclut tous les champs requis, mais un champ, imageUrl, est mal mis en majuscules en tant que imageURL (majuscule R majuscule L), ce qui entraîne une erreur: l'image qu'il pointe n'est pas affichée.

Pour corriger cette erreur et d'autres comme elle, utilisez le format JSON approprié. Dans ce cas, imageUrl est correct. En cas de doute, comparez le fichier JSON de la carte avec le document de référence sur la carte.

L'en-tête de cette fiche ne s'affiche pas, car un champ obligatoire, le 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é

Erreur: Le champ imageURL n'est pas correctement mis en majuscules. 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 carte correct

Correction: Le champ imageUrl est correctement mis en majuscule.

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

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

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

Si un message ou une boîte de dialogue de fiche inclut un widget ButtonList ou un widget CardFixedFooter avec des boutons mal spécifiés, la fiche entière ne s'affiche pas et rien ne s'affiche à la place. Les spécifications incorrectes peuvent inclure des champs manquants, des champs mal orthographiés ou mal mis en majuscules, ou un fichier JSON mal structuré (par exemple, une virgule, une citation ou une accolade manquante).

Pour résoudre ce problème, comparez le fichier JSON de la carte avec le document de référence sur la carte. En particulier, comparez les widgets ButtonList au guide des widgets ButtonList.

Exemple:dans un guide de widget ButtonList, transmettre une action onClick incomplète dans le premier bouton empêche le rendu de l'intégralité de la fiche.

Afficher l'extrait JSON de la fiche incorrect

Erreur: Aucun champ n'est spécifié pour l'objet onClick. Par conséquent, la carte entière n'apparaît pas.

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


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

Afficher l'extrait JSON de carte correct

Correction: L'objet onClick comporte désormais un champ openLink, de sorte que la fiche s'affiche 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, le problème est probablement lié à son interface de carte.

Voici les raisons les plus courantes:

Cause: CardFixedFooter ne contient pas de primaryButton

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

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

Afficher l'extrait JSON de la fiche incorrect

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 carte correct

Correction: Un champ primaryButton est désormais spécifié pour fixedFooter, de sorte que la boîte de dialogue fonctionne 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 avec un widget CardFixedFooter, spécifier le paramètre onClick sur un bouton de manière incorrecte ou l'omettre, ce qui entraîne la fermeture de la boîte de dialogue, l'échec de la charge ou l'absence d'ouverture.

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

Afficher l'extrait JSON de la fiche incorrect

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 carte correct

Correction: 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 contient pas de name

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

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 incorrect

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

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

      }
    }
    . . .

Afficher l'extrait JSON de carte correct

Correction: Un champ name est désormais spécifié pour textInput, de sorte que la boîte de dialogue fonctionne comme prévu.

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

Les actions d'ouverture, d'envoi ou d'annulation de 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 travaillez avec 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 de l'API Create Message (Créer un message).

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 carte au lieu d'une boîte de dialogue.

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

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

Pour savoir comment résoudre les erreurs de l'application Google Chat, consultez Résoudre les problèmes et corriger les erreurs de l'application Google Chat et Déboguer des applications Chat.