Risolvere i problemi e correggere schede e finestre di dialogo

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

Progetta e visualizza l'anteprima delle schede con Card Builder.

Apri Card Builder

Come vengono visualizzati gli errori delle schede

Gli errori delle schede si manifestano in diversi modi:

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

Se riscontri un comportamento come questo, significa che si è verificato un errore con la scheda della tua app.

Come riferimento: un messaggio della scheda e una finestra di dialogo funzionanti e senza errori

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

Un messaggio della carta senza errori

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

Una finestra di dialogo senza errori

Ecco la finestra di dialogo funzionante e senza errori che crea un contatto raccogliendo informazioni dagli utenti, con un piè di pagina e widget modificabili, come input di testo, sensori e pulsanti:

Errore: parte della carta non viene visualizzata

A volte le schede vengono visualizzate, ma una parte di una scheda che avevi previsto non viene visualizzata. 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 non le parti della scheda che dovrebbero essere visualizzate. Può essere difficile prevedere come vengono visualizzate le schede quando vengono omessi i campi obbligatori.

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

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

Ecco due esempi:

Esempio 1: se specifichi subtitle ma ometti il valore title richiesto, l'intera intestazione appare 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 il 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 specifichi subtitle, imageUrl, imageType e imageAltText, ma ometti il valore title richiesto, l'immagine viene visualizzata come previsto, ma non per il sottotitolo:

L'intestazione di questa scheda non viene visualizzata perché manca un campo obbligatorio, ovvero il titolo.
Figura 2: nell'intestazione di questa scheda non viene visualizzato il sottotitolo perché manca il 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 scritto in modo errato o in maiuscolo

In questo errore di esempio, il codice JSON della scheda include tutti i campi richiesti, ma un campo, imageUrl, è scritto in modo errato 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 è corretto. 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: nell'intestazione di questa scheda non viene visualizzato il sottotitolo perché manca il campo obbligatorio title, ma l'immagine viene visualizzata come previsto.

Visualizza lo snippet JSON della scheda errato

Errore: il campo imageURL non è scritto correttamente sulle lettere maiuscole. 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 correttamente.

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

Errore: una scheda non viene visualizzata intera

A volte la scheda non viene visualizzata; le cause probabili sono:

Causa: valori buttonList o cardFixedFooter specificati in modo errato

Se un messaggio della scheda o una finestra di dialogo 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 al suo posto non viene visualizzato nulla. Le specifiche errate potrebbero includere campi mancanti, campi scritti in modo errato o con lettere maiuscole o JSON non correttamente strutturati, ad esempio una virgola, una virgoletta o una parentesi graffa mancante.

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

Esempio: in una guida per i widget di ButtonList, se passi un'azione onClick incompleta nel primo pulsante, impedisci il rendering dell'intera scheda.

Visualizza lo snippet JSON della scheda errato

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

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


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

Visualizza lo snippet JSON della scheda corretto

Risolto: l'oggetto onClick ora dispone di 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 viene caricata o non si apre, probabilmente la causa è un problema con l'interfaccia della scheda.

Di seguito sono riportate 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 o l'impostazione di primaryButton impedisce in modo errato 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 un campo primaryButton, pertanto la finestra di dialogo non si carica o non si apre.

    . . .
    "fixedFooter": {

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

Visualizza lo snippet JSON della scheda corretto

Risolto: 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 onClick errata in FixedFooter

Nelle finestre di dialogo con un widget CardFixedFooter, specificare in modo errato l'impostazione onClick su un pulsante o ometterla, causando la chiusura, il caricamento o il mancato caricamento della finestra di dialogo.

Per correggere questo errore, assicurati che ogni pulsante includa un'impostazione 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

Risolto: l'oggetto primaryButton ha un campo onClick con un array "parameters" scritto correttamente, in modo che la finestra di dialogo funzioni 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 si carica o non si apre.

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 è specificato alcun campo name e ciò causa la chiusura della finestra di dialogo, il caricamento o l'apertura della finestra di dialogo non riuscita.

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

      }
    }
    . . .

Visualizza lo snippet JSON della scheda corretto

Risolto: 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 delle finestre di dialogo non riescono con un'architettura asincrona dell'app

Se la tua app Chat restituisce il messaggio di errore Could not load dialog. Invalid response returned by bot. mentre utilizzi le finestre di dialogo, è possibile che l'app utilizzi un'architettura asincrona, come Cloud Pub/Sub o il metodo dell'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 DialogEventType. Di conseguenza, le finestre di dialogo non sono supportate da app create con un'architettura asincrona.

In alternativa, valuta l'utilizzo di un messaggio con scheda anziché di una finestra di dialogo.

Altri errori di schede e finestre di dialogo

Se le correzioni descritte in questa pagina non risolvono l'errore relativo alla carta riscontrato nella tua app, esegui una query nei log degli errori dell'app. Eseguire query sui log può aiutarti a trovare errori nel codice JSON della scheda o nel codice dell'app; i log includono messaggi di errore descrittivi per aiutarti a correggerli.

Per informazioni su come correggere gli errori nell'app Google Chat, vedi Risolvere i problemi e correggere l'app Google Chat e Eseguire il debug delle app di chat.