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 et explique comment les corriger.

---

Utilisez le générateur de cartes pour concevoir et prévisualiser des messages de cartes JSON pour les applications Chat:

Ouvrir Card Builder

---

Affichage des erreurs dans les cartes

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

• Une partie d'une carte, comme un widget ou un composant, ne s'affiche pas ou ne s'affiche pas de manière inattendue.
• La fiche entière n'apparaît 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 au niveau de la carte de votre application.

Pour référence: un message et une boîte de dialogue fonctionnels et exempts d'erreur de la carte

Avant d'examiner des exemples de fiches erronées, tenez d'abord compte de ce message de fiche de travail et de cette boîte de dialogue. 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 fonctionnel et sans erreur qui contient les coordonnées des personnes comporte un en-tête, des sections et des widgets, comme du texte et des boutons décorés:

Une boîte de dialogue sans erreur

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

Erreur: Une partie de la carte ne s'affiche pas

Il arrive que les fiches s'affichent, mais qu'une partie de celle que vous vous attendiez à voir n'y apparaisse pas. les causes probables sont les suivantes:

• Un champ JSON obligatoire est manquant.
• Un champ JSON est mal orthographié ou utilise une majuscule incorrecte.

Cause: champ JSON obligatoire manquant

Dans cet exemple d'erreur, un champ JSON obligatoire (title) est manquant. Par conséquent, la fiche s'affiche, mais pas certaines parties censées apparaître. Il peut être difficile de prévoir le rendu des fiches lorsque les champs obligatoires sont omis.

Pour corriger cette erreur, ajoutez le champ JSON obligatoire. dans cet exemple, title.

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

Voici deux exemples :

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

<ph type="x-smartling-placeholder">

</ph>

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

Afficher l'extrait JSON d'une carte erronée

Erreur: Il manque un champ obligatoire, title, dans header.

    . . .
    "header": {

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

Afficher l'extrait de code JSON correct de la carte

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 en omettant la valeur title obligatoire, l'image s'affiche comme prévu, mais pas le sous-titre:

<ph type="x-smartling-placeholder">

</ph>

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 d'une 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 correct de la carte

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 avec une majuscule

Dans cet exemple d'erreur, le fichier JSON de la carte inclut tous les champs obligatoires, mais l'un des champs imageUrl n'utilise pas la même majuscule que imageURL (avec une majuscule en début de R L), ce qui génère une erreur: l'image vers laquelle elle pointe ne s'affiche pas.

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

<ph type="x-smartling-placeholder">

</ph>

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 d'une carte erronée

Erreur: L'utilisation des majuscules dans le 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 correct de la carte

Correction: la casse 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 ne s'affiche pas dans son intégralité

Parfois, la carte n'apparaît pas. les causes probables sont les suivantes:

• La spécification d'un widget ButtonList est incorrecte.
• Un bouton est mal spécifié dans un widget CardFixedFooter.

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

Si un message ou une boîte de dialogue sous forme de fiche contient un widget ButtonList mal spécifié ou un widget CardFixedFooter dont les boutons sont mal spécifiés, la fiche ne s'affiche pas entièrement, et rien ne s'affiche à sa place. Les spécifications incorrectes peuvent inclure des champs manquants, des champs mal orthographiés ou en majuscules, ou du code JSON mal structuré (par exemple, une virgule, une accolade ou une accolade manquante).

Pour corriger cette erreur, comparez le format JSON de la carte au 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 au niveau du premier bouton empêche l'affichage de la fiche entière.

Afficher l'extrait de code JSON d'une carte erroné

Erreur: Aucun champ n'est spécifié pour l'objet onClick. Toute la fiche ne s'affiche donc pas.

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


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

Afficher l'extrait de code JSON correspondant à la carte

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 lié à l'interface de sa carte.

Voici les raisons les plus courantes:

• Le widget CardFixedFooter ne comporte pas de primaryButton.
• Un bouton du widget CardFixedFooter n'a pas d'action onClick, ou son action onClick n'est pas correctement spécifiée.
• Il manque un champ name dans un widget TextInput.

Cause: CardFixedFooter n'a pas de primaryButton

Dans les boîtes de dialogue contenant un widget CardFixedFooter, vous devez spécifier un primaryButton avec du texte et une couleur. Si vous ne renseignez pas le champ primaryButton ou si vous le définissez de manière incorrecte, toute 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 de code JSON d'une carte erroné

Erreur: Aucun champ primaryButton n'est spécifié pour l'objet fixedFooter. Par conséquent, la boîte de dialogue ne se charge pas ou ne s'ouvre pas.

    . . .
    "fixedFooter": {

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

Afficher l'extrait de code JSON correspondant à la carte

Correction: un champ primaryButton est désormais spécifié pour fixedFooter afin 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, vous devez spécifier de manière incorrecte le paramètre onClick d'un bouton ou l'omettre, ce qui entraîne la fermeture, l'échec du chargement ou l'absence 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 de code JSON d'une carte erroné

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 correspondant à la carte

Correction: l'objet primaryButton comporte un champ onClick avec un tableau "parameters" correctement orthographié, de sorte que la boîte de dialogue fonctionne 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 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. Il 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 de code JSON d'une carte erroné

Erreur: Aucun champ name n'est spécifié pour l'objet textInput. Par conséquent, la boîte de dialogue se ferme, ne se charge pas ou ne s'ouvre pas.

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

      }
    }
    . . .
    

Afficher l'extrait de code JSON correspondant à la carte

Correction: un champ name est désormais spécifié pour textInput afin 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. en travaillant avec boîtes de dialogue, il se peut que votre application utilise une architecture asynchrone, telle que Cloud Pub/Sub ou Créer un message.

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

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

Autres erreurs de carte et de boîte de dialogue

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

Articles associés

Pour obtenir de l'aide sur la résolution des erreurs dans l'application Google Chat, consultez Dépanner et corriger les applications Google Chat et Déboguer les applications Chat.