Komponenten einer Karte oder eines Dialogfelds entwerfen

Auf dieser Seite wird beschrieben, wie Sie die Hauptkomponenten der Benutzeroberfläche von Kartennachrichten in Google Chat entwerfen und erstellen.

Karten unterstützen ein definiertes Layout, interaktive UI-Elemente wie Schaltflächen und Rich Media wie Bilder. Mithilfe von Karten kannst du über Kartennachrichten und Dialogfelder Informationen präsentieren, Input einholen oder Nutzern die nächsten Schritte mitteilen.

Mit dem Card Builder kannst du JSON-Kartennachrichten für Chat-Apps entwerfen und als Vorschau ansehen:

Den Card Builder öffnen

Karten und Dialogfelder haben in der Regel die folgenden Komponenten:

  • Ein CardHeader, das den Titel Ihrer Karte enthält.
  • Ein oder mehrere CardSection-Widgets, die den Haupttext der Karte bilden.
  • Ein CardFixedFooter-Widget speziell für Dialogfelder.

Voraussetzungen

  • Ein Google Workspace-Konto mit Zugriff auf Google Chat.
  • Eine veröffentlichte Chat-App. Folgen Sie dieser quickstart, um eine Chat-App zu erstellen.

    • Header hinzufügen

    Das CardHeader-Widget stellt den Header einer Karte dar. Überschriften können einen Titel, eine Unterüberschrift und ein Avatarbild für deine Karte enthalten.

    Sie können CardHeader für Kartennachrichten und Dialogfelder angeben.

    Hier ein Beispiel für eine CardHeader:

    Bereich einer Karte definieren

    Das CardSection-Widget ist ein übergeordneter Container innerhalb einer Karte. Mit Kartenabschnitten können Sie Widgets auf einer Karte gruppieren. Für jeden Kartenabschnitt können Sie eine Kopfzeile und ein oder mehrere Widgets einfügen.

    Sie können CardSection für Kartennachrichten und Dialogfelder angeben.

    Das folgende Beispiel zeigt ein CardSection-Element, das zwei textParagraph-Widgets enthält:

    Das CardFixedFooter-Widget stellt die Fußzeile einer Dialognachricht dar, die von einer Chat-App gesendet wurde. Fußzeilen können eine primäre und eine sekundäre Schaltfläche enthalten.

    Das CardFixedFooter-Widget ist nur für Dialogfelder verfügbar.

    Hier ein Beispiel für ein CardFixedFooter-Widget mit zwei Schaltflächen:

    Fehlerbehebung

    Wenn eine Google Chat-App oder -Karte einen Fehler zurückgibt, wird in der Chat-Oberfläche die Meldung „Ein Fehler ist aufgetreten“ angezeigt. oder „Ihre Anfrage kann nicht verarbeitet werden“. Manchmal wird in der Chat-UI keine Fehlermeldung angezeigt, die Chat-App oder -Karte aber ein unerwartetes Ergebnis, z. B. wird keine Kartennachricht angezeigt.

    Obwohl möglicherweise keine Fehlermeldung in der Chat-UI angezeigt wird, stehen beschreibende Fehlermeldungen und Protokolldaten zur Verfügung, mit denen Sie Fehler beheben können, wenn das Fehler-Logging für Chat-Anwendungen aktiviert ist. Informationen zum Ansehen, Debuggen und Beheben von Fehlern finden Sie unter Google Chat-Fehler beheben.