Risolvere i problemi e correggere schede e finestre di dialogo

Questa guida descrive gli errori comuni relativi alle schede che potresti riscontrare e come correggerli.

Utilizza Card Builder per progettare e visualizzare l'anteprima di messaggi delle schede JSON per le app di chat:

Apri il generatore di schede

Come vengono visualizzati gli errori delle schede

Gli errori delle schede si manifestano in diversi modi:

  • Parte di una scheda, ad esempio un widget o un componente, non viene visualizzata o non viene visualizzata in modo imprevisto.
  • Non viene visualizzata l'intera scheda.
  • Una finestra di dialogo si chiude, non si apre o non si carica.

Se riscontri comportamenti di questo tipo, significa che c'è un errore con la scheda dell'app.

Come riferimento: una scheda funzionante e priva di errori con un messaggio e una finestra di dialogo

Prima di esaminare esempi di schede errati, considera questo messaggio e questa finestra di dialogo funzionanti. Per illustrare ogni errore di esempio e la relativa correzione, il codice JSON di questa scheda viene modificato introducendo errori.

Un messaggio relativo alla scheda senza errori

Ecco il messaggio funzionante e privo di errori della scheda con i dati di contatto contiene intestazione, sezioni e widget, come testo e pulsanti decorati:

Una finestra di dialogo senza errori

Ecco una finestra di dialogo funzionante e senza errori che crea un contatto raccogliendo informazioni dagli utenti, con un piè di pagina e widget modificabili come l'inserimento di testo Interruttori e pulsanti:

Errore: parte della carta non viene visualizzata

A volte le schede vengono visualizzate, ma parte di una che ti aspettavi di vedere non appare. le cause più probabili sono:

  • Manca un campo JSON obbligatorio.
  • Un campo JSON contiene errori di ortografia o è in maiuscolo.

Causa: manca un campo JSON obbligatorio

In questo errore di esempio, manca un campo JSON obbligatorio, title. Di conseguenza, la scheda viene visualizzata, ma le parti che dovrebbero essere visualizzate no. Può essere difficile prevedere il modo in cui le schede vengono visualizzate quando i campi obbligatori sono omessi.

Per correggere questo errore, aggiungi il campo JSON richiesto. in questo esempio, title.

Per sapere se è necessario un campo JSON, consulta la documentazione di riferimento di Cards v2. In questo esempio, fai riferimento alla descrizione del campo title su CardHeader.

Di seguito sono riportati due esempi:

Esempio 1: se specifichi subtitle, ma se ometti il valore title obbligatorio, l'intera intestazione viene visualizzata vuota:

L'intestazione di questa scheda non viene visualizzata perché manca un campo obbligatorio, ovvero il titolo.
Figura 1: l'intestazione di questa scheda non viene visualizzata perché manca un campo obbligatorio, title.

Visualizza lo snippet JSON della scheda errato

Errore: un campo obbligatorio, title, non è presente in header.

    . . .
    "header": {

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

Visualizza lo snippet JSON della scheda corretto

Corretto: il campo obbligatorio title fa parte della specifica header.

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

Esempio 2: se vengono specificati subtitle, imageUrl, imageType e imageAltText, ma l'omissione del valore title obbligatorio comporta il rendering dell'immagine come previsto, ma non il sottotitolo:

L'intestazione di questa scheda non viene visualizzata perché manca un campo obbligatorio, ovvero il titolo.
Figura 2: l'intestazione di questa scheda non mostra il sottotitolo perché manca un campo obbligatorio, title, ma l'immagine viene visualizzata come previsto.

Visualizza lo snippet JSON della scheda errato

Errore: un campo obbligatorio, title, non è presente in header.

    . . .
    "header": {

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

Visualizza lo snippet JSON della scheda corretto

Corretto: il campo obbligatorio title fa parte della specifica 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 non scritto correttamente o in maiuscolo

In questo errore di esempio, il codice JSON della scheda include tutti i campi richiesti, ma un campo, imageUrl è in maiuscolo come imageURL (R maiuscola L maiuscola), causando un errore: l'immagine a cui rimanda non viene visualizzata.

Per correggere questo errore e altri errori simili, utilizza la formattazione JSON corretta. In questo caso, imageUrl è la risposta corretta. In caso di dubbi, confronta il codice JSON della carta con il documento di riferimento della carta.

L'intestazione di questa scheda non viene visualizzata perché manca un campo obbligatorio, ovvero il titolo.
Figura 3: l'intestazione di questa scheda non mostra il sottotitolo perché manca un campo obbligatorio, title, ma l'immagine viene visualizzata come previsto.

Visualizza lo snippet JSON della scheda errato

Errore: le lettere maiuscole del campo imageURL sono errate. Dovrebbe essere imageUrl.

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

Visualizza lo snippet JSON della scheda corretto

Corretto: il campo imageUrl è in maiuscolo.

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

Errore: non viene visualizzata una carta intera

A volte la carta stessa non viene visualizzata; le cause più probabili sono:

Causa: buttonList o cardFixedFooter specificati in modo errato

Se il messaggio o la finestra di dialogo di una scheda include un widget ButtonList specificato in modo errato o un widget CardFixedFooter con pulsanti specificati in modo errato, l'intera scheda non viene visualizzata e non viene visualizzato nulla al suo posto. Le specifiche non corrette potrebbero includere campi mancanti, campi scritti in modo errato o con iniziale maiuscola o JSON strutturato in modo errato, ad esempio virgole, virgolette o parentesi graffe mancanti.

Per correggere questo errore, confronta il codice JSON della scheda con il documento di riferimento della scheda. In particolare, confronta i widget ButtonList con la guida ai widget ButtonList.

Esempio:in una guida ai widget ButtonList, trasmettere un'azione onClick incompleta nel primo pulsante impedisce il rendering dell'intera scheda.

Visualizza lo snippet JSON della scheda errato

Errore: per l'oggetto onClick non sono stati specificati campi, quindi non viene visualizzata l'intera scheda.

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


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

Visualizza lo snippet JSON della scheda corretto

Risolto: ora l'oggetto onClick ha un campo openLink, quindi la scheda viene visualizzata come previsto.

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

Errore: una finestra di dialogo si chiude, si blocca o non si apre

Se una finestra di dialogo si chiude inaspettatamente, non si carica o non si apre, probabilmente la causa è un problema dell'interfaccia della scheda.

Ecco le cause più comuni:

Causa: CardFixedFooter non ha primaryButton

Nelle finestre di dialogo con un widget CardFixedFooter, è necessario specificare un primaryButton con testo e colore. L'omissione del parametro primaryButton o l'impostazione errata impedisce la visualizzazione dell'intera finestra di dialogo.

Per correggere questo errore, assicurati che il widget CardFixedFooter includa un valore primaryButton specificato correttamente.

Visualizza lo snippet JSON della scheda errato

Errore: per l'oggetto fixedFooter non è stato specificato alcun campo primaryButton e ciò causa il mancato caricamento o l'apertura della finestra di dialogo.

    . . .
    "fixedFooter": {

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

Visualizza lo snippet JSON della scheda corretto

Risolto: per fixedFooter ora è specificato un campo primaryButton, quindi la finestra di dialogo funziona come previsto.

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

Causa: impostazione di onClick errata in FixedFooter

Nelle finestre di dialogo con un widget CardFixedFooter, la specifica dell'impostazione onClick in modo errato o la sua omissione, determinando la chiusura, il mancato caricamento o la mancata apertura della finestra di dialogo.

Per correggere questo errore, assicurati che ogni pulsante includa un'impostazione di onClick specificata correttamente.

Visualizza lo snippet JSON della scheda errato

Errore: l'oggetto primaryButton ha un campo onClick con un array "parameters" con errori ortografici che impedisce il caricamento o l'apertura della finestra di dialogo.

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

Visualizza lo snippet JSON della scheda corretto

Fisso: l'oggetto primaryButton ha un campo onClick con un array di "parametri" scritto correttamente, quindi la finestra di dialogo funziona come previsto.

    . . .
    "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 non ha name

Se una finestra di dialogo include un widget TextInput che esclude il campo name, la finestra di dialogo non si comporta come previsto. Potrebbe chiudersi, aprirsi ma non caricarsi o non aprirsi.

Per correggere questo errore, assicurati che ogni widget TextInput includa un campo name appropriato. Assicurati che ogni campo name della scheda sia univoco.

Visualizza lo snippet JSON della scheda errato

Errore: per l'oggetto textInput non è stato specificato alcun campo name e ciò causa la chiusura, il mancato caricamento o l'apertura della finestra di dialogo.

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

      }
    }
    . . .

Visualizza lo snippet JSON della scheda corretto

Risolto: per textInput ora è specificato un campo name, quindi la finestra di dialogo funziona come previsto.

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

Le azioni di apertura, invio o annullamento della finestra di dialogo non riescono con un'architettura delle app asincrona

Se l'app Chat restituisce il messaggio di errore Could not load dialog. Invalid response returned by bot. mentre lavori con dialogs, è possibile che la tua app utilizza un'architettura asincrona, come Cloud Pub/Sub o Metodo API Create Message.

L'apertura, l'invio o l'annullamento di una finestra di dialogo richiede una risposta sincrona da un'app di Chat con un DialogEventType Di conseguenza, le finestre di dialogo non sono supportate dalle app creato con un'architettura asincrona.

Come soluzione alternativa, considera l'utilizzo di un messaggio nella scheda invece che in una finestra di dialogo.

Altri errori nelle schede e nelle finestre di dialogo

Se le correzioni descritte in questa pagina non risolvono l'errore relativo alla scheda riscontrato con la tua app, esegui una query nei log degli errori dell'app. L'esecuzione di query sui log consente di individuare errori nel codice dell'app o nel file JSON della scheda. I log includono messaggi di errore descrittivi che ti aiutano a risolverli.

Per informazioni sulla correzione degli errori dell'app Google Chat, vedi Risolvere i problemi e correggere l'app Google Chat e Eseguire il debug delle app di chat.