Probleme mit Karten und Dialogfeldern beheben

In diesem Leitfaden werden häufige kartenbezogene Fehler beschrieben, die auftreten können, und wie Sie sie beheben können.

Mit dem Card Builder können Sie Nachrichten und Benutzeroberflächen für Chat-Apps entwerfen und in der Vorschau ansehen:

So werden Kartenfehler angezeigt

Kartenfehler können sich auf verschiedene Arten äußern:

• Ein Teil einer Karte, z. B. ein Widget oder eine Komponente, wird nicht angezeigt oder wird auf unerwartete Weise gerendert.
• Die gesamte Karte wird nicht angezeigt.
• Ein Dialogfeld wird geschlossen, nicht geöffnet oder nicht geladen.

Wenn Sie ein solches Verhalten feststellen, liegt ein Fehler mit der Karte Ihrer App vor.

Zur Referenz: eine funktionierende, fehlerfreie Kartenmitteilung und ein funktionierendes, fehlerfreies Dialogfeld

Bevor Sie sich Beispiele für fehlerhafte Karten ansehen, sollten Sie sich zuerst diese funktionierende Kartennachricht und das zugehörige Dialogfeld ansehen. Um jeden Beispiel-Fehler und seine Behebung zu veranschaulichen, wird das JSON dieser Karte durch Einfügen von Fehlern geändert.

Eine fehlerfreie Kartenmitteilung

Hier ist die funktionierende, fehlerfreie Kartenmitteilung mit Kontaktdaten, die eine Kopfzeile, Abschnitte und Widgets wie formatierten Text und Schaltflächen enthält:

Ein fehlerfreier Dialog

Hier ist der funktionierende, fehlerfreie Dialog, mit dem ein Kontakt erstellt wird, indem Informationen von Nutzern erfasst werden. Er enthält eine Fußzeile und bearbeitbare Widgets wie Texteingabe, Schalter und Schaltflächen:

Fehler: Ein Teil einer Karte wird nicht angezeigt

Manchmal werden Karten gerendert, aber ein Teil einer Karte, die Sie erwartet haben, wird nicht angezeigt. Die wahrscheinlichen Ursachen sind:

• Ein erforderliches JSON-Feld fehlt.
• Ein JSON-Feld ist falsch geschrieben oder die Groß- und Kleinschreibung ist falsch.

Ursache: Ein erforderliches JSON-Feld fehlt

In diesem Beispiel fehlt das erforderliche JSON-Feld title. Die Karte wird gerendert, aber Teile, die eigentlich angezeigt werden sollten, fehlen. Es kann schwierig sein, vorherzusagen, wie Karten gerendert werden, wenn Pflichtfelder ausgelassen werden.

Um diesen Fehler zu beheben, fügen Sie das erforderliche JSON-Feld hinzu, in diesem Beispiel title.

Ob ein JSON-Feld erforderlich ist, erfahren Sie in der Referenzdokumentation zu Karten V2. In diesem Beispiel finden Sie die Beschreibung des Felds title auf CardHeader.

Hier sind zwei Beispiele:

Beispiel 1: Wenn Sie subtitle angeben, aber das erforderliche title weglassen, ist der gesamte Header leer:

    . . .
    "header": {

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

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

Beispiel 2: Wenn Sie subtitle, imageUrl, imageType und imageAltText angeben, aber das erforderliche title weglassen, wird das Bild wie erwartet gerendert, der Untertitel jedoch nicht:

    . . .
    "header": {

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

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

Ursache: Falsch geschriebene oder falsch formatierte JSON-Datei

In diesem Beispiel enthält das Karten-JSON alle erforderlichen Felder. Ein Feld, imageUrl, ist jedoch falsch geschrieben: imageURL (großes R, großes L). Das führt zu einem Fehler: Das Bild, auf das verwiesen wird, wird nicht gerendert.

Um diesen und ähnliche Fehler zu beheben, verwenden Sie die richtige JSON-Formatierung. In diesem Fall ist imageUrl richtig. Sehen Sie im Zweifelsfall in der Kartenreferenz nach, ob das JSON der Karte korrekt ist.

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

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

Fehler: Eine ganze Karte wird nicht angezeigt

Manchmal wird die Karte selbst nicht angezeigt. Die wahrscheinlichen Ursachen sind:

• Ein ButtonList-Widget wurde falsch angegeben.
• Ein CardFixedFooter-Widget hat einen falsch angegebenen Button.

Ursache: buttonList oder cardFixedFooter wurde falsch angegeben.

Wenn eine Kartenmitteilung oder ein Dialogfeld ein falsch angegebenes ButtonList-Widget oder ein CardFixedFooter-Widget mit falsch angegebenen Schaltflächen enthält, wird die gesamte Karte nicht angezeigt und es erscheint nichts an ihrer Stelle. Falsche Spezifikationen können fehlende Felder, falsch geschriebene oder großgeschriebene Felder oder falsch strukturierte JSON-Daten sein, z. B. ein fehlendes Komma, Anführungszeichen oder eine geschweifte Klammer.

Prüfen Sie das JSON der Karte anhand des Referenzdokuments für Karten, um diesen Fehler zu beheben. Vergleichen Sie insbesondere alle ButtonList-Widgets mit dem ButtonList-Widget-Leitfaden.

Beispiel:Wenn Sie in einer ButtonList-Widget-Anleitung in der ersten Schaltfläche eine unvollständige onClick-Aktion übergeben, wird die gesamte Karte nicht gerendert.

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


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

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

Fehler: Ein Dialogfeld wird geschlossen, bleibt hängen oder wird nicht geöffnet

Wenn ein Dialogfeld unerwartet geschlossen wird, nicht geladen wird oder sich nicht öffnet, liegt die wahrscheinliche Ursache in einem Problem mit der zugehörigen Kartenschnittstelle.

Das kann folgende Gründe haben:

• Das CardFixedFooter-Widget hat keine primaryButton.
• Ein Button im CardFixedFooter-Widget hat keine onClick-Aktion oder die onClick-Aktion ist falsch angegeben.
• In einem TextInput-Widget fehlt das Feld name.

Ursache: CardFixedFooter hat keine primaryButton

In Dialogfeldern mit einem CardFixedFooter-Widget muss ein primaryButton mit Text und Farbe angegeben werden. Wenn Sie primaryButton auslassen oder falsch festlegen, wird das gesamte Dialogfeld nicht angezeigt.

Um diesen Fehler zu beheben, muss das CardFixedFooter-Widget ein korrekt angegebenes primaryButton enthalten.

    . . .
    "fixedFooter": {

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

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

Ursache: Falsche onClick-Einstellung in FixedFooter

In Dialogfeldern mit einem CardFixedFooter-Widget wird die Einstellung onClick für einen beliebigen Button falsch angegeben oder weggelassen, was dazu führt, dass das Dialogfeld geschlossen wird, nicht geladen wird oder sich nicht öffnet.

Um diesen Fehler zu beheben, muss für jede Schaltfläche eine korrekt angegebene onClick-Einstellung vorhanden sein.

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

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

Ursache: TextInput hat keine name

Wenn ein Dialogfeld ein TextInput-Widget enthält, in dem das Feld name ausgeschlossen ist, verhält sich das Dialogfeld nicht wie erwartet. Sie wird möglicherweise geschlossen, geöffnet, aber nicht geladen oder gar nicht geöffnet.

Um diesen Fehler zu beheben, muss jedes TextInput-Widget ein entsprechendes name-Feld enthalten. Jedes name-Feld auf der Karte muss eindeutig sein.

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

      }
    }
    . . .
    

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

Dialogfeld „Öffnen“, „Senden“ oder „Abbrechen“ schlägt bei asynchroner App-Architektur fehl

Wenn Ihre Chat-App bei der Arbeit mit Dialogfeldern die Fehlermeldung Could not load dialog. Invalid response returned by bot. zurückgibt, liegt das möglicherweise daran, dass Ihre App eine asynchrone Architektur wie Cloud Pub/Sub oder die API-Methode Create Message verwendet.

Zum Öffnen, Senden oder Abbrechen eines Dialogfelds ist eine synchrone Antwort von einer Chat-App mit einem RenderActions-Objekt erforderlich (z. B. action.navigations mit pushCard oder endNavigation). Dialogfelder werden daher nicht von Apps unterstützt, die mit einer asynchronen Architektur erstellt wurden.

Als Workaround können Sie anstelle eines Dialogfelds eine Karten-Nachricht verwenden.

Andere Fehler bei Karten und Dialogfeldern

Wenn die auf dieser Seite beschriebenen Korrekturen den kartenbezogenen Fehler in Ihrer App nicht beheben, fragen Sie die Fehlerlogs der App ab. Durch Abfragen der Logs können Sie Fehler im Karten-JSON oder im App-Code finden. Die Logs enthalten aussagekräftige Fehlermeldungen, die Ihnen helfen, die Fehler zu beheben.

Weitere Informationen

Hilfe bei der Behebung von Google Chat-App-Fehlern finden Sie unter Fehlerbehebung bei Google Chat-Apps und Chat-Apps debuggen.