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 résoudre.

Créez et prévisualisez des fiches avec Card Builder.

Ouvrez l'outil de création de cartes

Affichage des erreurs de carte

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 ne s'affiche pas entièrement.
  • 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 que la carte de votre application présente une erreur.

À titre de référence: un message et une boîte de dialogue fonctionnels et sans erreur

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

Un message de carte sans erreur

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

Une boîte de dialogue sans erreur

Voici la boîte de dialogue sans erreur fonctionnelle qui crée un contact en collectant des informations auprès des utilisateurs, avec un pied de page, des widgets modifiables comme des boutons de saisie, des commutateurs et de la saisie de texte:

Erreur: Une partie d'une carte ne s'affiche pas

Il arrive que des fiches s'affichent, mais qu'une partie de celles que vous pensiez voir n'apparaisse pas. Voici les causes les plus probables:

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

Cause: champ JSON obligatoire manquant

Dans cet exemple d'erreur, un champ JSON obligatoire, title, est manquant. Par conséquent, la carte s'affiche, mais certaines parties censées s'afficher ne le sont pas. Il peut être difficile de prévoir comment les cartes s'affichent lorsque des champs obligatoires sont omis.

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

Pour savoir si un champ JSON est requis, consultez la documentation de référence sur Cards 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 title obligatoire, l'en-tête complet reste vide:

L'en-tête de cette fiche ne s'affiche pas, car il manque un champ obligatoire (titre).
Figure 1: L'en-tête de cette fiche ne s'affiche pas, car il manque un champ obligatoire, title.

Afficher l'extrait JSON de carte erronée

Erreur: Il manque un champ obligatoire (title) dans header.

    . . .
    "header": {

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

Afficher l'extrait de code 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 le sous-titre.

L'en-tête de cette fiche ne s'affiche pas, car il manque un champ obligatoire (titre).
Figure 2: L'en-tête de cette fiche n'affiche pas de sous-titre, car il manque un champ obligatoire, title, mais l'image s'affiche comme prévu.

Afficher l'extrait JSON de carte erronée

Erreur: Il manque un champ obligatoire (title) 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 de code 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: code JSON mal orthographié ou en majuscules

Dans cet exemple d'erreur, le fichier JSON de la carte inclut tous les champs obligatoires, mais l'un des champs imageUrl n'est pas correctement mis en majuscules avec la valeur imageURL (R majuscule L), ce qui provoque une erreur: l'image vers laquelle elle pointe ne s'affiche pas.

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

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

Afficher l'extrait JSON de carte 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 de code JSON de carte correct

Correction: la mise en majuscule 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 carte entière ne s'affiche pas

Il arrive que la carte ne s'affiche pas. Voici les causes les plus probables:

Cause: valeur incorrecte pour buttonList ou cardFixedFooter

Si un message ou une boîte de dialogue de fiche inclut un widget ButtonList mal spécifié ou un widget CardFixedFooter avec des boutons mal spécifiés, 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 en majuscules, ou un fichier JSON mal structuré, comme une virgule, un guillemet ou une accolade.

Pour corriger cette erreur, comparez le code JSON de la carte à celui de la carte. En particulier, comparez les widgets ButtonList au guide des widgets ButtonList.

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

Afficher l'extrait JSON de carte erronée

Erreur: Aucun champ n'a été spécifié pour l'objet onClick, la carte n'apparaît donc pas dans son intégralité.

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


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

Afficher l'extrait de code JSON de carte correct

Correction: l'objet onClick comporte désormais un champ openLink, de sorte que la carte 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 dû à l'interface de la fiche.

Voici les raisons les plus courantes qui peuvent expliquer ce problème:

Motif: CardFixedFooter n'a pas de primaryButton

Dans les boîtes de dialogue comportant un widget CardFixedFooter, vous devez spécifier un primaryButton contenant à la fois le texte et la couleur. Si vous omettez primaryButton ou si vous le définissez de manière incorrecte, la boîte de dialogue entière ne s'affichera pas.

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

Afficher l'extrait JSON de carte 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 de code JSON de carte correct

Correction: fixedFooter comporte désormais un champ primaryButton spécifié, 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 contenant un widget CardFixedFooter, spécifier de manière incorrecte le paramètre onClick sur un bouton ou l'omettre, ce qui entraîne la fermeture, l'échec du chargement ou l'ouverture de la boîte de dialogue

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

Afficher l'extrait JSON de carte 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 de code 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"
          }
        }
      }
    }
    . . .

Motif: TextInput n'a 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. Elle peut se fermer, s'ouvrir, mais ne pas 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 carte erronée

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

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

      }
    }
    . . .

Afficher l'extrait de code JSON de carte correct

Correction: textInput comporte désormais un champ name spécifié, 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 é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, il est possible qu'elle utilise une architecture asynchrone, telle que Cloud Pub/Sub ou la méthode d'API Create 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 sous forme de fiche au lieu d'une boîte de dialogue.

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

Si les corrections décrites sur cette page ne permettent pas de résoudre l'erreur liée aux cartes rencontrée par votre application, interrogez les journaux d'erreurs de l'application. Interroger les journaux peut vous aider à détecter les erreurs dans le code JSON des cartes ou le code de l'application. Les journaux contiennent des messages d'erreur descriptifs pour vous aider à les corriger.

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