In diesem Leitfaden werden häufige Fehler im Zusammenhang mit Karten beschrieben und erläutert, wie sie behoben werden können.
Mit dem Card Builder kannst du Karten entwerfen und sie dir als Vorschau ansehen.
Den Card Builder öffnenSo werden Kartenfehler angezeigt
Kartenfehler treten auf verschiedene Weise auf:
- Ein Teil einer Karte, z. B. ein Widget oder eine Komponente, wird nicht auf unerwartete Weise angezeigt oder gerendert.
- Es wird nicht die gesamte Karte angezeigt.
- Ein Dialogfeld wird geschlossen, nicht geöffnet oder nicht geladen.
Wenn ein solches Verhalten auftritt, liegt ein Fehler mit der Karte Ihrer App vor.
Zur Information: eine funktionierende, fehlerfreie Kartenmeldung und ein Dialogfenster
Bevor Sie sich fehlerhafte Kartenbeispiele genauer ansehen, sollten Sie sich zuerst diese Nachricht und den Dialog ansehen, der für die Karte funktioniert. Um die einzelnen Beispielfehler und deren Behebung zu veranschaulichen, wird der JSON-Code dieser Karte durch die Einfügung von Fehlern modifiziert.
Fehlerfreie Kartenmeldung
Hier ist die funktionierende, fehlerfreie Kartennachricht mit Kontaktdaten, die eine Kopfzeile, Abschnitte und Widgets wie dekorierten Text und Schaltflächen enthält:
Ein fehlerfreies Dialogfeld
Hier sehen Sie das funktionierende, fehlerfreie Dialogfeld, in dem Informationen von Nutzern gesammelt werden. Es enthält eine Fußzeile und bearbeitbare Widgets wie Texteingabe, Schalter und Schaltflächen, um einen Kontakt zu erstellen:
Fehler: Ein Teil einer Karte wird nicht angezeigt
Manchmal werden Karten gerendert, aber ein Teil einer Karte, den Sie erwartet haben, nicht erscheint. Mögliche Ursachen sind:
- Ein erforderliches JSON-Feld fehlt.
- Ein JSON-Feld ist falsch geschrieben oder enthält falsche Groß- und Kleinschreibung.
Ursache: Erforderliches JSON-Feld fehlt
In diesem Beispielfehler fehlt das erforderliche JSON-Feld title. Die Karte wird dann zwar gerendert, aber Teile der Karte, die eigentlich zu sehen sein sollten, nicht. 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 ist das title.
Informationen dazu, ob ein JSON-Feld erforderlich ist, findest du in der Referenzdokumentation zu Cards v2. Sehen Sie sich in diesem Beispiel die Beschreibung des Feldes title auf CardHeader an.
Hier sind zwei Beispiele:
Beispiel 1: Wenn Sie subtitle angeben, aber die erforderliche title weglassen, erscheint der gesamte Header leer:
title fehlt.Fehlerhaftes JSON-Karten-JSON-Snippet ansehen
Fehler: Ein Pflichtfeld (title) fehlt in header.
. . .
"header": {
"subtitle": "Software Engineer"
}
. . .
Richtiges JSON-Snippet für Karte ansehen
Behoben: Das Pflichtfeld title ist Teil der header-Spezifikation.
. . .
"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, aber nicht der Untertitel:
title fehlt. Das Bild wird jedoch wie erwartet gerendert.Fehlerhaftes JSON-Karten-JSON-Snippet ansehen
Fehler: Ein Pflichtfeld (title) fehlt in header.
. . .
"header": {
"subtitle": "Software Engineer",
"imageUrl":
"https://developers.google.com/chat/images/quickstart-app-avatar.png",
"imageType": "CIRCLE",
"imageAltText": "Avatar for Sasha",
}
. . .
Richtiges JSON-Snippet für Karte ansehen
Behoben: Das Pflichtfeld title ist Teil der header-Spezifikation.
. . .
"header": {
"title": "Sasha",
"subtitle": "Software Engineer",
"imageUrl":
"https://developers.google.com/chat/images/quickstart-app-avatar.png",
"imageType": "CIRCLE",
"imageAltText": "Avatar for Sasha",
}
. . .
Ursache: Falsche Schreibweise oder Groß-/Kleinschreibung von JSON
In diesem Beispielfehler enthält die JSON-Datei der Karte alle erforderlichen Felder, aber ein Feld, imageUrl, ist fälschlicherweise als imageURL (großes L für R) großgeschrieben. Dies führt zu einem Fehler: Das Bild, auf das es verweist, wird nicht gerendert.
Um diesen und ähnliche Fehler zu beheben, verwenden Sie die richtige JSON-Formatierung. In diesem Fall ist imageUrl richtig. Prüfe im Zweifelsfall den JSON-Code der Karte mit dem Referenzdokument der Card.
title fehlt. Das Bild wird jedoch wie erwartet gerendert.Fehlerhaftes JSON-Karten-JSON-Snippet ansehen
Fehler: Im Feld imageURL ist die Groß- und Kleinschreibung falsch. Er sollte imageUrl lauten.
. . .
"header": {
"title": "Sasha",
"subtitle": "Software Engineer",
"imageURL":
"https://developers.google.com/chat/images/quickstart-app-avatar.png",
"imageType": "CIRCLE",
"imageAltText": "Avatar for Sasha",
}
. . .
Richtiges JSON-Snippet für Karte ansehen
Fest: Das Feld imageUrl ist in der korrekten Groß- und Kleinschreibung geschrieben.
. . .
"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. Mögliche Ursachen sind:
- Ein
ButtonList-Widget ist falsch angegeben. - Ein
CardFixedFooter-Widget hat eine falsch angegebene Schaltfläche.
Ursache: buttonList oder cardFixedFooter falsch angegeben
Wenn eine Kartenmeldung 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 an ihrer Stelle wird nichts angezeigt. Falsche Spezifikationen können fehlende Felder, falsch geschriebene oder großgeschriebene Felder oder falsch strukturierte JSON-Daten umfassen, z. B. fehlendes Komma, Anführungszeichen oder geschweifte Klammern.
Um diesen Fehler zu beheben, gleichen Sie die JSON-Daten der Karte mit dem Referenzdokument der Karte ab. Vergleichen Sie insbesondere alle ButtonList-Widgets mit der ButtonList-Widget-Übersicht.
Beispiel:Wenn in einer ButtonList-Widget-Anleitung eine unvollständige onClick-Aktion in der ersten Schaltfläche übergeben wird, wird die gesamte Karte nicht gerendert.
Fehlerhaftes JSON-Karten-JSON-Snippet ansehen
Fehler: Für das onClick-Objekt sind keine Felder angegeben. Daher wird nicht die gesamte Karte angezeigt.
. . .
{
"buttonList": {
"buttons": [
{
"text": "Share",
"onClick": {
}
}
},
{
"text": "Edit",
"onClick": {
"action": {
"function": "goToView",
"parameters": [
{
"key": "viewType",
"value": "EDIT",
}
],
}
}
},
],
},
}
. . .
Richtiges JSON-Snippet für Karte ansehen
Behoben: Das onClick-Objekt verfügt jetzt über ein openLink-Feld, sodass die Karte wie erwartet angezeigt wird.
. . .
{
"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, angehalten oder nicht geöffnet
Wenn ein Dialogfeld unerwartet geschlossen, nicht geladen oder nicht geöffnet wird, liegt wahrscheinlich ein Problem mit der Kartenoberfläche vor.
Dies sind die häufigsten Gründe:
- Das
CardFixedFooter-Widget hat keinprimaryButton. - Eine Schaltfläche im
CardFixedFooter-Widget hat keineonClick-Aktion oder ihreonClick-Aktion ist falsch angegeben. - In einem
TextInput-Widget fehlt das Feldname.
Ursache: CardFixedFooter enthält kein primaryButton
In Dialogfeldern mit einem CardFixedFooter-Widget muss ein primaryButton sowohl mit Text als auch mit Farbe angegeben werden. Wenn primaryButton weggelassen wird oder falsch eingestellt wird, wird nicht das gesamte Dialogfeld angezeigt.
Achten Sie darauf, dass das CardFixedFooter-Widget eine korrekt angegebene primaryButton enthält, um diesen Fehler zu beheben.
Fehlerhaftes JSON-Karten-JSON-Snippet ansehen
Fehler: Für das fixedFooter-Objekt ist kein primaryButton-Feld angegeben. Dadurch kann das Dialogfeld nicht geladen oder geöffnet werden.
. . .
"fixedFooter": {
"onClick": {
. . .
},
"secondaryButton": {
. . .
}
}
}
. . .
Richtiges JSON-Snippet für Karte ansehen
Behoben: Für fixedFooter ist jetzt ein primaryButton-Feld angegeben, sodass das Dialogfeld wie erwartet funktioniert.
. . .
"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 eine Schaltfläche falsch angegeben oder ausgelassen. Das führt dazu, dass das Dialogfeld geschlossen wird, nicht geladen wird oder nicht geöffnet wird.
Achten Sie darauf, dass jede Schaltfläche eine korrekt angegebene onClick-Einstellung enthält, um diesen Fehler zu beheben.
Fehlerhaftes JSON-Karten-JSON-Snippet ansehen
Fehler: Das primaryButton-Objekt enthält ein onClick-Feld mit einem falsch geschriebenen „parameters“-Array. Das führt dazu, dass das Dialogfeld nicht geladen oder geöffnet wird.
. . .
"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"
}
}
}
}
. . .
Richtiges JSON-Snippet für Karte ansehen
Behoben: Das primaryButton-Objekt hat ein onClick-Feld mit einem richtig geschriebenen „parameters“-Array, sodass das Dialogfeld wie erwartet funktioniert.
. . .
"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 enthält kein name
Wenn ein Dialogfeld ein TextInput-Widget enthält, das das Feld name ausschließt, verhält sich das Dialogfeld nicht wie erwartet. Sie wird möglicherweise geschlossen oder geöffnet, lässt sich aber nicht laden oder wird nicht geöffnet.
Achten Sie darauf, dass jedes TextInput-Widget ein entsprechendes name-Feld enthält, um diesen Fehler zu beheben. Jedes name-Feld auf der Karte muss eindeutig sein.
Fehlerhaftes JSON-Karten-JSON-Snippet ansehen
Fehler: Für das textInput-Objekt ist kein name-Feld angegeben. Dies kann dazu führen, dass das Dialogfeld geschlossen wird, nicht geladen wird oder nicht geöffnet wird.
. . .
{
"textInput": {
"label": "Name",
"type": "SINGLE_LINE",
}
}
. . .
Richtiges JSON-Snippet für Karte ansehen
Behoben: Für textInput ist jetzt ein name-Feld angegeben, sodass das Dialogfeld wie erwartet funktioniert.
. . .
{
"textInput": {
"label": "Name",
"type": "SINGLE_LINE",
"name": "contactName"
}
}
. . .
Aktionen zum Öffnen, Senden oder Abbrechen schlagen bei einer asynchronen App-Architektur fehl
Wenn Ihre Chat-Anwendung beim Arbeiten mit Dialogfeldern die Fehlermeldung Could not load dialog. Invalid response returned by bot. zurückgibt, verwendet die Anwendung möglicherweise eine asynchrone Architektur wie Cloud Pub/Sub oder die API-Methode Nachricht erstellen.
Zum Öffnen, Senden oder Abbrechen eines Dialogfelds ist eine synchrone Antwort von einer Chat-App mit einem DialogEventType erforderlich.
Daher werden Dialogfelder nicht von Anwendungen unterstützt, die mit einer asynchronen Architektur erstellt wurden.
Um das Problem zu umgehen, können Sie eine Kartennachricht anstelle eines Dialogfelds verwenden.
Andere Karten- und Dialogfeldfehler
Wenn die auf dieser Seite beschriebenen Fehlerbehebungen den kartenbezogenen Fehler in Ihrer App nicht beheben, fragen Sie die Fehlerprotokolle der App ab. Durch Abfragen der Protokolle können Sie Fehler im Karten-JSON- oder App-Code finden. Die Protokolle enthalten beschreibende Fehlermeldungen, die Ihnen bei der Behebung helfen.
Weitere Informationen
Hilfe zum Beheben von Fehlern in der Google Chat App finden Sie in den Hilfeartikeln Fehlerbehebung in der Google Chat App und Fehler in Chat-Apps beheben.