Karten für Google Chat-Apps erstellen

Auf dieser Seite wird beschrieben, wie Sie die Komponenten und die Struktur einer Karte erstellen. Karten sind Benutzeroberflächen, mit denen Google Chat-Apps Informationen von Chat-Nutzern präsentieren und erfassen können. In Chat-Apps können Karten in den folgenden Benutzeroberflächen erstellt und angezeigt werden:

  • Nachrichten, die eine oder mehrere Karten enthalten.
  • Startseiten: Eine Karte, die auf dem Tab Startseite in Direktnachrichten in der Chat App angezeigt wird.
  • Dialogfelder: Karten, die in Nachrichten und auf Startseiten in einem neuen Fenster geöffnet werden.

Auf dieser Seite erfahren Sie mehr über die folgenden Komponenten einer Karte:

  • Überschriften, die in der Regel den Titel einer Karte oder eines Kartenabschnitts enthalten.
  • Abschnitte, die den Hauptteil der Karte bilden, einschließlich Widgets und anderer interaktiver Elemente. In einem Kartenbereich können Sie der Karte mehr Struktur hinzufügen, z. B. Spalten und Raster.
  • Feste Fußzeilen, die unten in Dialogfeldern angezeigt werden, um persistente UI-Elemente wie Schaltflächen zu präsentieren.

Vorbereitung

Eine Google Chat-App, für die interaktive Funktionen aktiviert sind. Wenn Sie eine interaktive Chat-App erstellen möchten, führen Sie einen der folgenden Schnellstarts aus, der auf der gewünschten App-Architektur basiert:

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

Karten-Tool öffnen

Header hinzufügen

Das Widget CardHeader steht für die Überschrift einer Karte. Überschriften können einen Titel, einen Untertitel und ein Avatarbild für Ihre Karte enthalten.

Das folgende Beispiel zeigt ein CardHeader-Objekt:

Eine oder mehrere Kartenbereiche hinzufügen

Das Widget CardSection ist ein übergeordneter Container in einer Karte. Mit Kartenbereichen können Sie Widgets innerhalb einer Karte gruppieren. Für jeden Kartenabschnitt können Sie eine Überschrift und ein oder mehrere Widgets einfügen.

Im folgenden Beispiel wird ein CardSection mit zwei textParagraph-Widgets gezeigt:

Horizontale Trennlinie zwischen Widgets einfügen

Das divider-Widget zeigt eine horizontale Linie über die gesamte Breite einer Karte zwischen vertikal gestapelten Widgets an. Die Linie ist eine visuelle Trennlinie, die Nutzern hilft, zwischen verschiedenen Widgets zu unterscheiden. So lassen sich Karten leichter überfliegen und verstehen.

Die folgende Karte enthält ein divider-Widget zwischen anderen Widget-Typen:

Spalten hinzufügen

Im columns-Widget können bis zu zwei Spalten auf einer Karte angezeigt werden. Sie können jeder Spalte Widgets hinzufügen. Die Widgets werden in der Reihenfolge angezeigt, in der sie angegeben sind. Wenn Sie mehr als zwei Spalten oder Zeilen verwenden möchten, verwenden Sie das Widget grid.

Die Höhe jeder Spalte wird durch die höchste Spalte bestimmt. Wenn die erste Spalte beispielsweise höher als die zweite ist, haben beide Spalten die Höhe der ersten Spalte. Da jede Spalte eine unterschiedliche Anzahl von Widgets enthalten kann, können Sie keine Zeilen definieren oder Widgets zwischen den Spalten ausrichten.

Das folgende Beispiel zeigt eine Karte mit einem columns-Widget mit zwei Textspalten. Wenn Sie nur das Spaltenlayout sehen und das Codebeispiel minimieren möchten, klicken Sie auf  Minimieren. Wenn der Platz begrenzt ist, wie im folgenden Beispiel, wird der Inhalt der zweiten Spalte unter der ersten Spalte umgebrochen.

Spaltenbreite festlegen

Die Spalten werden nebeneinander angezeigt. Sie können die Breite der einzelnen Spalten mit dem Feld horizontalSizeStyle anpassen. Wenn die Bildschirmbreite des Nutzers zu schmal ist, wird die zweite Spalte unter der ersten umgebrochen:

  • Im Web wird die zweite Spalte umgebrochen, wenn die Bildschirmbreite 480 Pixel oder weniger beträgt.
  • Auf iOS-Geräten wird die zweite Spalte umgebrochen, wenn die Bildschirmbreite weniger als oder gleich 300 pt ist.
  • Auf Android-Geräten wird die zweite Spalte umgebrochen, wenn die Bildschirmbreite weniger als 320 dp beträgt.

Im folgenden Beispiel ist eine Karte mit einem columns-Widget zu sehen, das zwei Textspalten mit jeweils vier Elementen enthält. Auf jedes Element in den Spalten wurde horizontalSizeStyle angewendet, um zu steuern, wie viel Platz der Text in jeder Spalte einnimmt:

  • Der erste Textabsatz nimmt mit FILL_MINIMUM_SPACE nicht mehr als 30 % der Kartenbreite ein.
  • Im zweiten Textabsatz wird FILL_AVAILABLE_SPACE verwendet, um den verfügbaren Platz in der Breite der Karte auszufüllen. In diesem Beispiel nimmt sie 70% der Breite der Karte ein.
  • Im dritten Textabsatz ist horizontalSizeStyle nicht definiert. Daher wird der verfügbare Platz auf der Karte standardmäßig ausgefüllt.
  • Der vierte Textabsatz nimmt mit FILL_MINIMUM_SPACE nicht mehr als 30 % der Kartenbreite ein.

Horizontale Ausrichtung einer Spalte definieren

Sie können Widgets horizontal links, rechts oder in der Mitte einer Spalte ausrichten, indem Sie das Feld horizontalAligment definieren. Wenn das Feld horizontalAlignment nicht definiert ist, werden Widgets in einer Spalte links ausgerichtet.

Im folgenden Beispiel wird Text innerhalb einer Spalte horizontal links ausgerichtet:

Im folgenden Beispiel wird Text innerhalb einer Spalte horizontal zentriert:

Im folgenden Beispiel wird Text innerhalb einer Spalte horizontal rechts ausgerichtet:

Vertikale Ausrichtung einer Spalte definieren

Sie können Widgets vertikal oben, unten oder in der Mitte einer Spalte ausrichten, indem Sie das Feld verticalAlignment definieren. Wenn das Feld verticalAlignment nicht definiert ist, werden Widgets in einer Spalte oben ausgerichtet.

Im folgenden Beispiel wird Text innerhalb einer Spalte vertikal oben ausgerichtet:

Im folgenden Beispiel wird Text innerhalb einer Spalte vertikal zentriert:

Im folgenden Beispiel wird Text innerhalb einer Spalte vertikal unten ausgerichtet:

Raster hinzufügen, um eine Sammlung von Elementen anzuzeigen

Das grid-Widget zeigt ein Raster mit einer Sammlung von Elementen an. Ein Raster unterstützt eine beliebige Anzahl von Spalten und Elementen. Die Anzahl der Zeilen ergibt sich durch die Anzahl der Elemente geteilt durch die Anzahl der Spalten. Ein Raster mit 10 Elementen und 2 Spalten hat 5 Zeilen. Ein Raster mit 11 Elementen und 2 Spalten hat 6 Zeilen.

Das Widget unterstützt Vorschläge, die Nutzern helfen, einheitliche Daten einzugeben, und Actions-Änderungsaktionen, die ausgeführt werden, wenn sich das Texteingabefeld ändert, z. B. wenn ein Nutzer Text hinzufügt oder löscht.

Das folgende Beispiel zeigt ein Raster mit zwei Spalten und einem einzelnen Element:

Mit dem Feld gridItemLayout können Sie festlegen, wo Text mit einem Bild in einem Raster angezeigt wird. In diesem Feld können Sie festlegen, ob der Text über oder unter dem Element im Raster angezeigt werden soll. Wenn gridItemLayout nicht definiert ist, wird der Text standardmäßig unter dem Artikel im Raster angezeigt.

Das folgende Beispiel zeigt ein Raster mit drei Spalten, in denen jeweils Text und ein Bild zu sehen sind. Im ersten Raster wird Text definiert, der über dem Bild angezeigt wird. Im zweiten Raster wird Text definiert, der unter dem Bild angezeigt wird. Im dritten Raster wird die Position des Texts nicht definiert.

Raster oder Spalte einen Rahmen hinzufügen

Für Elemente, die in einem column- oder grid-Widget angezeigt werden, können Sie diesen UI-Elementen einen Rahmen hinzufügen, indem Sie ein borderType-Feld und ein borderStyle-Feld definieren. Wenn kein borderStyle-Feld definiert ist, wird standardmäßig kein Rahmen angezeigt. Sie können ein borderType definieren, das auf alle Elemente in einem Widget angewendet wird, oder das Styling auf jedes einzelne Element in einem Widget anwenden.

Das folgende Beispiel zeigt ein Raster mit zwei Spalten und einem Bild in jeder Spalte. Rahmentyp, Stil und Farbe wurden so definiert, dass sie auf alle Elemente im Raster angewendet werden.

Das folgende Beispiel zeigt ein Raster mit drei Spalten, in denen sich jeweils ein Bild befindet. Rahmenstil und -typ sind individuell definiert. Das erste Bild hat einen Rahmen, der als STROKE definiert ist. Das zweite Bild hat einen Rahmen, der als NO_BORDER definiert ist. Für das dritte Bild ist kein Rahmen definiert.

Das Widget CardFixedFooter steht für den Footer einer Dialognachricht, die von einer Chat-App gesendet wurde. Footer können eine primäre und eine sekundäre Schaltfläche enthalten.

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

Im folgenden Beispiel wird ein CardFixedFooter-Widget mit zwei Schaltflächen verwendet:

Fehlerbehebung

Wenn eine Google Chat-App oder Karte einen Fehler zurückgibt, wird in der Chat-Benutzeroberfläche die Meldung „Ein Fehler ist aufgetreten“ angezeigt. oder „Ihre Anfrage konnte nicht verarbeitet werden“ Manchmal wird in der Chat-Benutzeroberfläche keine Fehlermeldung angezeigt, aber die Chat-App oder -Karte führt zu einem unerwarteten Ergebnis. Beispielsweise wird möglicherweise keine Kartennachricht angezeigt.

Auch wenn in der Chat-Benutzeroberfläche keine Fehlermeldung angezeigt wird, sind beschreibende Fehlermeldungen und Protokolldaten verfügbar, die Ihnen bei der Fehlerbehebung helfen, wenn die Fehlerprotokollierung für Chat-Apps aktiviert ist. Informationen zum Ansehen, Entfernen und Beheben von Fehlern finden Sie unter Google Chat-Fehler beheben.