Risolvere i problemi e correggere schede e finestre di dialogo

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

Utilizza lo strumento per la creazione di schede per progettare e visualizzare l'anteprima di interfacce utente e messaggistica per le app di chat:

Apri lo strumento per la creazione di schede

Come vengono visualizzati gli errori delle schede

Gli errori delle schede si manifestano in diversi modi:

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

Se riscontri un comportamento simile, significa che è presente un errore nella scheda della tua app.

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

Prima di esaminare gli esempi di schede errate, considera prima questo messaggio e questa finestra di dialogo della scheda funzionante. Per illustrare ogni esempio di errore e la relativa correzione, il JSON di questa scheda viene modificato introducendo errori.

Un messaggio relativo a una carta senza errori

Ecco il messaggio della scheda funzionante e privo di errori che fornisce i dati di contatto e include un'intestazione, sezioni e widget come testo decorato e pulsanti:

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, pulsanti e pulsanti di attivazione/disattivazione:

Errore: parte di una scheda non viene visualizzata

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

  • Manca un campo JSON obbligatorio.
  • Un campo JSON contiene un errore ortografico o le lettere iniziali sono in maiuscolo in modo errato.

Causa: manca un campo JSON obbligatorio

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

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

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

Di seguito sono riportati due esempi:

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

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

Visualizza snippet JSON della scheda errato

Errore: in header manca un campo obbligatorio, title.

    . . .
    "header": {

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

Visualizza lo snippet JSON corretto della scheda

È stato risolto il problema: 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 title obbligatorio, l'immagine viene visualizzata come previsto, ma non il sottotitolo:

L'intestazione di questa scheda non viene visualizzata perché manca un campo obbligatorio, 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.

Visualizzare lo snippet JSON della scheda errato

Errore: in header manca un campo obbligatorio, title.

    . . .
    "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 corretto della scheda

È stato risolto il problema: 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 con lettere maiuscole

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

Per correggere questo errore e altri simili, utilizza la formattazione JSON corretta. In questo caso, imageUrl è corretto. In caso di dubbi, controlla il codice JSON della scheda con il documento di riferimento della scheda.

L'intestazione di questa scheda non viene visualizzata perché manca un campo obbligatorio, 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.

Visualizzare lo snippet JSON della scheda errato

Errore: le lettere maiuscole del campo imageURL non sono corrette. Deve 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 corretto della scheda

È stato risolto il problema: le lettere maiuscole del campo imageUrl sono corrette.

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

Errore: un'intera scheda non viene visualizzata

A volte la scheda stessa non viene visualizzata. Le cause più probabili sono:

Causa: buttonList o cardFixedFooter specificati in modo errato

Se un messaggio o una finestra di dialogo della scheda include un widget ButtonList 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 possono includere campi mancanti, campi con ortografia o maiuscole errate o JSON strutturato in modo improprio, ad esempio una virgola, una virgolette o una parentesi graffa mancante.

Per correggere questo errore, controlla il file JSON della scheda in base al documento di riferimento della scheda. In particolare, confronta i widget ButtonList con la guida ai widget ButtonList.

Esempio: in una ButtonListguida ai widget, il passaggio di un'azione onClick incompleta nel primo pulsante impedisce il rendering dell'intera scheda.

Visualizzare lo snippet JSON della scheda errato

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

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


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

Visualizzare lo snippet JSON corretto della scheda

È stato risolto il problema: l'oggetto onClick ora 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 in modo imprevisto, non si carica o non si apre, la causa probabile è un problema con l'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. Se ometti primaryButton o lo imposti in modo errato, l'intera finestra di dialogo non viene visualizzata.

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

Visualizzare lo snippet JSON della scheda errato

Errore: nell'oggetto fixedFooter non è specificato alcun campo primaryButton, pertanto la finestra di dialogo non riesce a caricarsi o aprirsi.

    . . .
    "fixedFooter": {

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

Visualizzare lo snippet JSON corretto della scheda

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

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

Causa: impostazione errata di onClick in FixedFooter

Nelle finestre di dialogo con un widget CardFixedFooter, specificare erroneamente l'impostazione onClick su un pulsante o ometterla causa la chiusura, il mancato caricamento o la mancata apertura della finestra di dialogo.

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

Visualizzare lo snippet JSON della scheda errato

Errore: l'oggetto primaryButton ha un campo onClick con un array "parameters" scritto male, causando il mancato 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"
          }
        }
      }
    }
    . . .

Visualizzare lo snippet JSON corretto della scheda

Risolto: l'oggetto primaryButton ha un campo onClick con un array "parameters" 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 nella scheda sia univoco.

Visualizzare lo snippet JSON della scheda errato

Errore: l'oggetto textInput non ha un campo name specificato, causando la chiusura, il mancato caricamento o l'apertura della finestra di dialogo.

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

      }
    }
    . . .

Visualizzare lo snippet JSON corretto della scheda

Risolto: ora textInput ha un campo name specificato, 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 vanno a buon fine con un'architettura dell'app asincrona

Se l'app Chat restituisce il messaggio di erroreCould not load dialog. Invalid response returned by bot. durante l'utilizzo delle dialoghe, è 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 un dialogo richiede una risposta sincrona da un'app di chat con un DialogEventType. Di conseguenza, le conversazioni non sono supportate dalle app costruite con un'architettura asincrona.

Come soluzione alternativa, valuta la possibilità di utilizzare un messaggio della scheda anziché una finestra di dialogo.

Altri errori relativi a 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 sui log degli errori dell'app. L'esecuzione di query sui log può aiutarti a trovare errori nel codice JSON o dell'app della scheda. Inoltre, i log includono messaggi di errore descrittivi che ti aiutano a correggerli.

Per assistenza su come correggere gli errori dell'app Google Chat, consulta Risolvere i problemi e correggere l'app Google Chat ed Eseguire il debug delle app di Chat.