Struktur einer Karte oder eines Dialogfelds formatieren

Auf dieser Seite wird erläutert, wie Sie Widgets in einer Karte oder in einer Dialognachricht formatieren und strukturieren.

Mit dem Card Builder kannst du Karten entwerfen und sie dir als Vorschau ansehen.

Den Card Builder öffnen

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.

    • Karten und Dialogfelder in Spalten anzeigen

    Das columns-Widget zeigt bis zu zwei Spalten in einer Karte oder einem Dialogfeld an. Sie können jeder Spalte Widgets hinzufügen. Die Widgets werden in der angegebenen Reihenfolge angezeigt. Wenn Sie mehr als zwei Spalten einfügen oder Zeilen verwenden möchten, verwenden Sie das grid-Widget.

    Die Höhe der einzelnen Spalten wird durch die höhere Spalte bestimmt. Wenn beispielsweise die erste Spalte höher als die zweite Spalte 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.

    Im folgenden Beispiel wird eine Karte mit einem columns-Widget angezeigt, das zwei Textspalten enthält. Wenn Sie nur das Spaltenlayout ansehen und das Codebeispiel minimieren möchten, klicken Sie auf Minimieren. Wenn der Platz wie im folgenden Beispiel begrenzt ist, wird die zweite Spalte unterhalb der ersten Spalte umgebrochen.

    Breite einer Spalte definieren

    Spalten werden nebeneinander angezeigt. Die Breite der einzelnen Spalten lässt sich mit dem Feld horizontalSizeStyle anpassen. Wenn die Bildschirmbreite des Nutzers zu schmal ist, wird die zweite Spalte unterhalb der ersten umgebrochen:

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

    Im folgenden Beispiel wird eine Karte mit einem columns-Widget angezeigt, das 2 Textspalten mit 4 Elementen in den Spalten enthält. Auf jedes Element in den Spalten wurde horizontalSizeStyle angewendet, um zu beeinflussen, wie viel Platz der Text in jeder Spalte einnimmt:

    • Der erste Textabsatz füllt mit FILL_MINIMUM_SPACE nicht mehr als 30 % der Kartenbreite aus.
    • Im zweiten Absatz wird mit FILL_AVAILABLE_SPACE der verfügbare Platz in der Kartenbreite ausgefüllt. In diesem Beispiel nimmt es 70% der Breite der Karte ein.
    • Im dritten Absatz wird horizontalSizeStyle nicht definiert. Daher füllt er standardmäßig den verfügbaren Platz der Karte aus.
    • Der vierte Textabsatz füllt mit FILL_MINIMUM_SPACE nicht mehr als 30 % der Kartenbreite aus.

    Horizontale Ausrichtung einer Spalte definieren

    Sie können Widgets horizontal an der linken, rechten Seite oder Mitte einer Spalte ausrichten. Dazu definieren Sie das Feld horizontalAligment. Wenn das Feld horizontalAlignment nicht definiert ist, werden die Widgets in der Spalte linksbündig.

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

    Im folgenden Beispiel wird Text innerhalb einer Spalte horizontal in der Mitte ausgerichtet:

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

    Vertikale Ausrichtung einer Spalte definieren

    Sie können Widgets vertikal am oberen oder unteren Rand oder in der Mitte einer Spalte ausrichten. Dazu definieren Sie das Feld verticalAlignment. Wenn das Feld verticalAlignment nicht definiert ist, werden Widgets in einer Spalte am oberen Rand ausgerichtet.

    Im folgenden Beispiel wird Text in einer Spalte vertikal am oberen Rand ausgerichtet:

    Im folgenden Beispiel wird Text innerhalb einer Spalte in der Mitte vertikal ausgerichtet:

    Im folgenden Beispiel wird Text innerhalb einer Spalte am unteren Rand vertikal ausgerichtet:

    Horizontale Trennung zwischen Widgets hinzufügen

    Das divider-Widget zeigt eine horizontale Linie, die die Breite einer Karte zwischen vertikal gestapelten Widgets einnimmt. Die Linie dient als Trennlinie und hilft Nutzern, zwischen Widgets zu unterscheiden. So lassen sich Karten leichter scannen und verstehen.

    Die folgende Karte besteht aus einem divider-Widget zwischen anderen Arten von Widgets:

    Raster mit mehreren Elementen anzeigen

    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 wird durch die Anzahl der Elemente geteilt durch die Spalten bestimmt. 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, mit denen Nutzer einheitliche Daten eingeben können, sowie Aktionen bei Änderung, bei denen es sich um Actions handelt, die ausgeführt werden, wenn eine Änderung im Texteingabefeld vorgenommen wird, z. B. wenn ein Nutzer Text hinzufügt oder löscht.

    Das folgende Beispiel zeigt ein zweispaltiges Raster mit einem einzelnen Element:

    Legen Sie fest, wo Text mit einem Bild in einem Raster erscheint

    Im Feld gridItemLayout können Sie in jedem gridItem definieren, 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 Element im Raster angezeigt

    Das folgende Beispiel ist ein Raster mit drei Spalten mit Text und einem Bild in jedem Raster. Das erste Raster definiert Text, der über dem Bild erscheint. Das zweite Raster definiert Text, der unter dem Bild erscheint, und das dritte Raster definiert nicht die Position des Texts.

    Rahmen zu UI-Elementen hinzufügen

    Bei Elementen, die in einem column- oder grid-Widget angezeigt werden, können Sie diesen UI-Elementen einen Rahmen hinzufügen. Definieren Sie dazu ein borderType-Feld und ein borderStyle-Feld. Wenn kein Feld borderStyle definiert ist, wird standardmäßig kein Rahmen angezeigt. Sie können eine borderType definieren, die auf alle Elemente in einem Widget angewendet wird, oder den Stil auf jedes einzelne Element innerhalb eines Widgets anwenden.

    Das folgende Beispiel zeigt ein zweispaltiges Raster mit einem Bild in jedem Raster, in dem Rahmentyp, -stil und -farbe für alle Elemente im Raster definiert wurden.

    Das folgende Beispiel zeigt ein Raster aus drei Spalten mit einem Bild in jedem Raster. Stil und Typ des Rahmens werden einzeln definiert. Das erste Bild hat einen Rahmen als STROKE. Das zweite Bild hat einen Rahmen als NO_BORDER. Für das dritte Bild ist kein Rahmen definiert.

    Fehlerbehebung

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

    Obwohl eine Fehlermeldung möglicherweise nicht in der Chat-Benutzeroberfläche angezeigt wird, sind beschreibende Fehlermeldungen und Protokolldaten verfügbar, mit denen Sie Fehler beheben können, wenn die Fehlerprotokollierung für Chat-Apps aktiviert ist. Informationen zum Aufrufen, Debuggen und Beheben von Fehlern finden Sie im Hilfeartikel Google Chat-Fehler beheben.