Cards v2

Infokarte

Benutzeroberfläche einer Karte, die in einer Google Chat-Nachricht oder einem Google Workspace-Add-on angezeigt wird

Karten unterstützen ein definiertes Layout, interaktive UI-Elemente wie Schaltflächen und Rich Media-Elemente wie Bilder. Verwenden Sie Karten, um detaillierte Informationen zu präsentieren, Informationen von Nutzern zu sammeln und Nutzer zum nächsten Schritt zu leiten.

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

Card Builder öffnen

Informationen zum Erstellen von Karten finden Sie in der folgenden Dokumentation:

Beispiel: Kartennachricht für eine Google Chat-App

Beispiel für eine Kontaktkarte

Verwenden Sie den folgenden JSON-Code, um die Beispielkartennachricht in Google Chat zu erstellen:

{
  "cardsV2": [
    {
      "cardId": "unique-card-id",
      "card": {
        "header": {
           "title": "Sasha",
           "subtitle": "Software Engineer",
           "imageUrl":
           "https://developers.google.com/chat/images/quickstart-app-avatar.png",
           "imageType": "CIRCLE",
           "imageAltText": "Avatar for Sasha"
         },
         "sections": [
           {
             "header": "Contact Info",
             "collapsible": true,
             "uncollapsibleWidgetsCount": 1,
             "widgets": [
               {
                 "decoratedText": {
                   "startIcon": {
                     "knownIcon": "EMAIL"
                   },
                   "text": "sasha@example.com"
                 }
               },
               {
                 "decoratedText": {
                   "startIcon": {
                     "knownIcon": "PERSON"
                   },
                   "text": "<font color=\"#80e27e\">Online</font>"
                 }
               },
               {
                 "decoratedText": {
                   "startIcon": {
                     "knownIcon": "PHONE"
                   },
                   "text": "+1 (555) 555-1234"
                 }
               },
               {
                 "buttonList": {
                   "buttons": [
                     {
                       "text": "Share",
                       "onClick": {
                        "openLink": {
                           "url": "https://example.com/share"
                         }
                       }
                     },
                     {
                       "text": "Edit",
                       "onClick": {
                         "action": {
                           "function": "goToView",
                           "parameters": [
                             {
                               "key": "viewType",
                               "value": "EDIT"
                             }
                           ]
                         }
                       }
                     }
                   ]
                 }
               }
             ]
           }
         ]
       }
    }
  ]
}
JSON-Darstellung
{
  "header": {
    object (CardHeader)
  },
  "sections": [
    {
      object (Section)
    }
  ],
  "sectionDividerStyle": enum (DividerStyle),
  "cardActions": [
    {
      object (CardAction)
    }
  ],
  "name": string,
  "fixedFooter": {
    object (CardFixedFooter)
  },
  "displayStyle": enum (DisplayStyle),
  "peekCardHeader": {
    object (CardHeader)
  }
}
Felder
header

object (CardHeader)

Die Überschrift der Karte. Eine Kopfzeile enthält normalerweise ein einleitendes Bild und einen Titel. Überschriften werden immer oben auf einer Karte angezeigt.

sections[]

object (Section)

Enthält eine Sammlung von Widgets. Jeder Bereich hat eine eigene optionale Überschrift. Die einzelnen Abschnitte sind durch eine Trennlinie voneinander getrennt. Ein Beispiel in Google Chat-Apps findest du im Abschnitt „Karten“.

sectionDividerStyle

enum (DividerStyle)

Der Trennungsstil zwischen Abschnitten.

cardActions[]

object (CardAction)

Die Aktionen der Karte. Aktionen werden dem Symbolleistenmenü der Karte hinzugefügt.

Verfügbar für Google Workspace-Add-ons und nicht für Google Chat-Apps.

Die folgende JSON-Datei erstellt beispielsweise ein Kartenaktionsmenü mit den Optionen Settings und Send Feedback:

"cardActions": [
  {
    "actionLabel": "Settings",
    "onClick": {
      "action": {
        "functionName": "goToView",
        "parameters": [
          {
            "key": "viewType",
            "value": "SETTING"
         }
        ],
        "loadIndicator": "LoadIndicator.SPINNER"
      }
    }
  },
  {
    "actionLabel": "Send Feedback",
    "onClick": {
      "openLink": {
        "url": "https://example.com/feedback"
      }
    }
  }
]
name

string

Name der Karte. Wird als Karten-ID bei der Kartennavigation verwendet.

Verfügbar für Google Workspace-Add-ons und nicht für Google Chat-Apps.

displayStyle

enum (DisplayStyle)

In Google Workspace-Add-ons werden die Anzeigeeigenschaften von peekCardHeader festgelegt.

Verfügbar für Google Workspace-Add-ons und nicht für Google Chat-Apps.

peekCardHeader

object (CardHeader)

Bei der Anzeige von kontextbezogenen Inhalten fungiert die Kopfzeile der Peek-Karte als Platzhalter, sodass der Nutzer vorwärts zwischen den Startseitenkarten und den Kontextkarten wechseln kann.

Verfügbar für Google Workspace-Add-ons und nicht für Google Chat-Apps.

CardHeader

Stellt eine Kartenüberschrift dar. Ein Beispiel in Google Chat-Apps findest du unter Kartenheader.

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.

JSON-Darstellung
{
  "title": string,
  "subtitle": string,
  "imageType": enum (ImageType),
  "imageUrl": string,
  "imageAltText": string
}
Felder
title

string

Erforderlich. Der Titel der Kartenüberschrift. Die Kopfzeile hat eine feste Höhe: Wenn sowohl ein Titel als auch ein Untertitel angegeben sind, wird jeweils eine Zeile eingenommen. Wenn nur der Titel angegeben ist, nimmt er beide Zeilen ein.

subtitle

string

Der Untertitel der Kartenüberschrift. Falls angegeben, wird es in einer eigenen Zeile unter dem title angezeigt.

imageType

enum (ImageType)

Die Form, die zum Zuschneiden des Bildes verwendet wird.

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.

imageUrl

string

Die HTTPS-URL des Bildes in der Kopfzeile der Karte.

imageAltText

string

Der alternative Text dieses Bildes, der für die Barrierefreiheit verwendet wird.

ImageType

Die Form, die zum Zuschneiden des Bildes verwendet wird.

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.

Enums
SQUARE Standardwert. Wendet eine quadratische Maske auf das Bild an. Ein Bild mit 4 x 3 wird beispielsweise zu 3 x 3.
CIRCLE Wendet eine kreisförmige Maske auf das Bild an. Ein Bild im Format 4 x 3 wird beispielsweise zu einem Kreis mit einem Durchmesser von 3.

Abschnitt

Ein Abschnitt enthält eine Sammlung von Widgets, die vertikal in der angegebenen Reihenfolge gerendert werden.

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.

JSON-Darstellung
{
  "header": string,
  "widgets": [
    {
      object (Widget)
    }
  ],
  "collapsible": boolean,
  "uncollapsibleWidgetsCount": integer
}
Felder
header

string

Text, der oben in einem Abschnitt angezeigt wird. Unterstützt einfachen HTML-formatierten Text. Weitere Informationen zum Formatieren von Text finden Sie unter Text in Google Chat-Apps formatieren und Text in Google Workspace-Add-ons formatieren.

widgets[]

object (Widget)

Alle Widgets im Abschnitt. Muss mindestens ein Widget enthalten.

collapsible

boolean

Gibt an, ob dieser Bereich minimiert werden kann.

In den minimierbaren Bereichen werden einige oder alle Widgets ausgeblendet. Nutzer können den Bereich aber maximieren, um ausgeblendete Widgets einzublenden, indem sie auf Mehr anzeigen klicken. Nutzer können die Widgets wieder ausblenden, indem sie auf Weniger anzeigen klicken.

Wenn Sie festlegen möchten, welche Widgets ausgeblendet sind, geben Sie uncollapsibleWidgetsCount an.

uncollapsibleWidgetsCount

integer

Die Anzahl der nicht minimierbaren Widgets, die auch dann sichtbar bleiben, wenn ein Abschnitt minimiert wird.

Wenn ein Abschnitt beispielsweise fünf Widgets enthält und uncollapsibleWidgetsCount auf 2 gesetzt ist, werden immer die ersten beiden Widgets angezeigt und die letzten drei standardmäßig minimiert. uncollapsibleWidgetsCount wird nur berücksichtigt, wenn collapsible gleich true ist.

Widget

Jede Karte besteht aus Widgets.

Ein Widget ist ein zusammengesetztes Objekt, das Text, Bilder, Schaltflächen oder andere Objekttypen darstellen kann.

JSON-Darstellung
{
  "horizontalAlignment": enum (HorizontalAlignment),

  // Union field data can be only one of the following:
  "textParagraph": {
    object (TextParagraph)
  },
  "image": {
    object (Image)
  },
  "decoratedText": {
    object (DecoratedText)
  },
  "buttonList": {
    object (ButtonList)
  },
  "textInput": {
    object (TextInput)
  },
  "selectionInput": {
    object (SelectionInput)
  },
  "dateTimePicker": {
    object (DateTimePicker)
  },
  "divider": {
    object (Divider)
  },
  "grid": {
    object (Grid)
  },
  "columns": {
    object (Columns)
  }
  // End of list of possible types for union field data.
}
Felder
horizontalAlignment

enum (HorizontalAlignment)

Gibt an, ob Widgets links, rechts oder mittig in einer Spalte ausgerichtet werden.

Union-Feld data. Ein Widget kann nur eines der folgenden Elemente haben. Sie können mehrere Widget-Felder verwenden, um mehr Elemente anzuzeigen. Für data ist nur einer der folgenden Werte zulässig:
textParagraph

object (TextParagraph)

Zeigt einen Textabsatz an. Unterstützt einfachen HTML-formatierten Text. Weitere Informationen zum Formatieren von Text finden Sie unter Text in Google Chat-Apps formatieren und Text in Google Workspace-Add-ons formatieren.

Mit der folgenden JSON-Datei wird beispielsweise ein fett formatierter Text erstellt:

"textParagraph": {
  "text": "  <b>bold text</b>"
}
image

object (Image)

Zeigt ein Bild an.

Mit der folgenden JSON-Datei wird beispielsweise ein Bild mit alternativem Text erstellt:

"image": {
  "imageUrl":
  "https://developers.google.com/chat/images/quickstart-app-avatar.png",
  "altText": "Chat app avatar"
}
decoratedText

object (DecoratedText)

Zeigt ein dekoriertes Textelement an.

Mit der folgenden JSON-Datei wird beispielsweise ein dekoriertes Text-Widget erstellt, das die E-Mail-Adresse anzeigt:

"decoratedText": {
  "icon": {
    "knownIcon": "EMAIL"
  },
  "topLabel": "Email Address",
  "text": "sasha@example.com",
  "bottomLabel": "This is a new Email address!",
  "switchControl": {
    "name": "has_send_welcome_email_to_sasha",
    "selected": false,
    "controlType": "CHECKBOX"
  }
}
buttonList

object (ButtonList)

Eine Liste mit Schaltflächen.

Mit der folgenden JSON-Datei werden beispielsweise zwei Schaltflächen erstellt. Die erste ist eine blaue Textschaltfläche und die zweite ist eine Bildschaltfläche, die einen Link öffnet:

"buttonList": {
  "buttons": [
    {
      "text": "Edit",
      "color": {
        "red": 0,
        "green": 0,
        "blue": 1,
        "alpha": 1
      },
      "disabled": true,
    },
    {
      "icon": {
        "knownIcon": "INVITE",
        "altText": "check calendar"
      },
      "onClick": {
        "openLink": {
          "url": "https://example.com/calendar"
        }
      }
    }
  ]
}
textInput

object (TextInput)

Zeigt ein Textfeld an, in das Nutzer Text eingeben können.

Mit der folgenden JSON-Datei wird beispielsweise eine Texteingabe für eine E-Mail-Adresse erstellt:

"textInput": {
  "name": "mailing_address",
  "label": "Mailing Address"
}

Als weiteres Beispiel erstellt die folgende JSON-Datei eine Texteingabe für eine Programmiersprache mit statischen Vorschlägen:

"textInput": {
  "name": "preferred_programing_language",
  "label": "Preferred Language",
  "initialSuggestions": {
    "items": [
      {
        "text": "C++"
      },
      {
        "text": "Java"
      },
      {
        "text": "JavaScript"
      },
      {
        "text": "Python"
      }
    ]
  }
}
selectionInput

object (SelectionInput)

Zeigt ein Auswahlsteuerelement an, mit dem Nutzer Elemente auswählen können. Auswahlsteuerelemente können Kontrollkästchen, Optionsfelder, Schalter oder Drop-down-Menüs sein.

Mit der folgenden JSON-Datei wird beispielsweise ein Drop-down-Menü erstellt, in dem Nutzer eine Größe auswählen können:

"selectionInput": {
  "name": "size",
  "label": "Size"
  "type": "DROPDOWN",
  "items": [
    {
      "text": "S",
      "value": "small",
      "selected": false
    },
    {
      "text": "M",
      "value": "medium",
      "selected": true
    },
    {
      "text": "L",
      "value": "large",
      "selected": false
    },
    {
      "text": "XL",
      "value": "extra_large",
      "selected": false
    }
  ]
}
dateTimePicker

object (DateTimePicker)

Zeigt ein Widget an, in das Nutzer ein Datum, eine Uhrzeit oder ein Datum und eine Uhrzeit eingeben können.

Mit der folgenden JSON-Datei wird beispielsweise eine Datums-/Uhrzeitauswahl zur Planung eines Termins erstellt:

"dateTimePicker": {
  "name": "appointment_time",
  "label": "Book your appointment at:",
  "type": "DATE_AND_TIME",
  "valueMsEpoch": "796435200000"
}
divider

object (Divider)

Trennt Widgets durch eine horizontale Linie.

Mit der folgenden JSON-Datei wird beispielsweise eine Trennlinie erstellt:

"divider": {
}
grid

object (Grid)

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 Obergrenze der Anzahl von Elementen geteilt durch die Anzahl der Spalten bestimmt. Ein Raster mit 10 Elementen und 2 Spalten hat 5 Zeilen. Ein Raster mit 11 Elementen und 2 Spalten hat 6 Zeilen.

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.

Mit der folgenden JSON-Datei wird beispielsweise ein zweispaltiges Raster mit einem einzelnen Element erstellt:

"grid": {
  "title": "A fine collection of items",
  "columnCount": 2,
  "borderStyle": {
    "type": "STROKE",
    "cornerRadius": 4
  },
  "items": [
    {
      "image": {
        "imageUri": "https://www.example.com/image.png",
        "cropStyle": {
          "type": "SQUARE"
        },
        "borderStyle": {
          "type": "STROKE"
        }
      },
      "title": "An item",
      "textAlignment": "CENTER"
    }
  ],
  "onClick": {
    "openLink": {
      "url": "https://www.example.com"
    }
  }
}
columns

object (Columns)

Es können bis zu zwei Spalten angezeigt werden.

Wenn Sie mehr als zwei Spalten einbeziehen oder Zeilen verwenden möchten, verwenden Sie das Grid-Widget.

Mit der folgenden JSON-Datei werden beispielsweise zwei Spalten erstellt, die jeweils Textabsätze enthalten:

"columns": {
  "columnItems": [
    {
      "horizontalSizeStyle": "FILL_AVAILABLE_SPACE",
      "horizontalAlignment": "CENTER",
      "verticalAlignment": "CENTER",
      "widgets": [
        {
          "textParagraph": {
            "text": "First column text paragraph"
          }
        }
      ]
    },
    {
      "horizontalSizeStyle": "FILL_AVAILABLE_SPACE",
      "horizontalAlignment": "CENTER",
      "verticalAlignment": "CENTER",
      "widgets": [
        {
          "textParagraph": {
            "text": "Second column text paragraph"
          }
        }
      ]
    }
  ]
}

TextParagraph

Ein Absatz mit Text, der Formatierung unterstützt. Ein Beispiel in Google Chat-Apps finden Sie unter Textabsatz. Weitere Informationen zum Formatieren von Text finden Sie unter Text in Google Chat-Apps formatieren und Text in Google Workspace-Add-ons formatieren.

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.

JSON-Darstellung
{
  "text": string
}
Felder
text

string

Der Text, der im Widget angezeigt wird.

Bild

Ein Bild, das durch eine URL angegeben wird und die Aktion onClick haben kann. Ein Beispiel finden Sie unter Image.

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.

JSON-Darstellung
{
  "imageUrl": string,
  "onClick": {
    object (OnClick)
  },
  "altText": string
}
Felder
imageUrl

string

Die HTTPS-URL, auf der das Image gehostet wird.

Beispiel:

https://developers.google.com/chat/images/quickstart-app-avatar.png
onClick

object (OnClick)

Wenn ein Nutzer auf das Bild klickt, löst der Klick diese Aktion aus.

altText

string

Der alternative Text dieses Bildes, der für die Barrierefreiheit verwendet wird.

OnClick

Stellt dar, wie reagiert wird, wenn Nutzer auf ein interaktives Element auf einer Karte klicken, z. B. eine Schaltfläche.

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.

JSON-Darstellung
{

  // Union field data can be only one of the following:
  "action": {
    object (Action)
  },
  "openLink": {
    object (OpenLink)
  },
  "openDynamicLinkAction": {
    object (Action)
  },
  "card": {
    object (Card)
  }
  // End of list of possible types for union field data.
}
Felder

Union-Feld data.

Für data ist nur einer der folgenden Werte zulässig:

action

object (Action)

Wenn angegeben, wird durch diesen onClick eine Aktion ausgelöst.

card

object (Card)

Nach dem Klicken wird eine neue Karte in den Kartenstapel verschoben, sofern angegeben.

Verfügbar für Google Workspace-Add-ons und nicht für Google Chat-Apps.

Aktion

Eine Aktion, die das Verhalten beim Senden des Formulars beschreibt. Sie können beispielsweise ein Apps Script-Skript aufrufen, um das Formular zu verarbeiten. Wird die Aktion ausgelöst, werden die Formularwerte an den Server gesendet.

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.

JSON-Darstellung
{
  "function": string,
  "parameters": [
    {
      object (ActionParameter)
    }
  ],
  "loadIndicator": enum (LoadIndicator),
  "persistValues": boolean,
  "interaction": enum (Interaction)
}
Felder
function

string

Eine benutzerdefinierte Funktion, die ausgelöst wird, wenn auf das Containerelement geklickt oder es anderweitig aktiviert wird.

Informationen zur Verwendung finden Sie unter Interaktive Karten erstellen.

parameters[]

object (ActionParameter)

Liste der Aktionsparameter.

loadIndicator

enum (LoadIndicator)

Gibt die Ladeanzeige an, die die Aktion anzeigt, während der Call-to-die-Aktion ausgeführt wird.

persistValues

boolean

Gibt an, ob Formularwerte nach der Aktion erhalten bleiben. Der Standardwert ist false.

Beim Wert true bleiben Formularwerte erhalten, nachdem die Aktion ausgelöst wurde. Damit der Nutzer Änderungen vornehmen kann, während die Aktion verarbeitet wird, setze LoadIndicator auf NONE. Bei Kartennachrichten in Chat-Apps musst du auch den ResponseType der Aktion auf UPDATE_MESSAGE setzen und denselben cardId von der Karte verwenden, die die Aktion enthielt.

Bei false werden die Formularwerte gelöscht, wenn die Aktion ausgelöst wird. Um zu verhindern, dass der Nutzer Änderungen vornimmt, während die Aktion verarbeitet wird, setzen Sie LoadIndicator auf SPINNER.

interaction

enum (Interaction)

Optional. Erforderlich beim Öffnen eines Dialogfelds.

Was Sie als Reaktion auf eine Interaktion mit einem Nutzer tun sollten, z. B. wenn ein Nutzer auf eine Schaltfläche in einer Kartennachricht klickt.

Wenn keine Angabe erfolgt, führt die Anwendung wie gewohnt ein action aus, z. B. das Öffnen eines Links oder das Ausführen einer Funktion.

Durch Angabe eines interaction kann die App auf spezielle interaktive Weise reagieren. Wenn Sie beispielsweise interaction auf OPEN_DIALOG setzen, kann über die Anwendung ein Dialogfeld geöffnet werden. Wenn angegeben, wird keine Ladeanzeige angezeigt. Wenn dieses Attribut für ein Add-on angegeben wird, wird die gesamte Karte entfernt und im Client wird nichts angezeigt.

Verfügbar für Google Chat-Apps und nicht für Google Workspace-Add-ons.

ActionParameter

Liste der Zeichenfolgenparameter, die beim Aufrufen der Aktionsmethode angegeben werden sollen. Stellen Sie sich zum Beispiel drei Schlummerschaltflächen vor: „Jetzt pausieren“, „An einem Tag zurückstellen“ oder „Nächste Woche zurückstellen“. Sie können action method = snooze() verwenden und den Schlummertyp und die Schlummerzeit in der Liste der Stringparameter übergeben.

Weitere Informationen finden Sie unter CommonEventObject.

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.

JSON-Darstellung
{
  "key": string,
  "value": string
}
Felder
key

string

Der Name des Parameters für das Aktionsskript.

value

string

Wert des Parameters.

LoadIndicator

Gibt die Ladeanzeige an, die die Aktion anzeigt, während der Call-to-die-Aktion ausgeführt wird.

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.

Enums
SPINNER Ein rotierendes Ladesymbol zeigt an, dass Inhalte geladen werden.
NONE Es wird nichts angezeigt.

Interaktion

Optional. Erforderlich beim Öffnen eines Dialogfelds.

Was Sie als Reaktion auf eine Interaktion mit einem Nutzer tun sollten, z. B. wenn ein Nutzer auf eine Schaltfläche in einer Kartennachricht klickt.

Wenn keine Angabe erfolgt, führt die Anwendung wie gewohnt ein action aus, z. B. das Öffnen eines Links oder das Ausführen einer Funktion.

Durch Angabe eines interaction kann die App auf spezielle interaktive Weise reagieren. Wenn Sie beispielsweise interaction auf OPEN_DIALOG setzen, kann über die Anwendung ein Dialogfeld geöffnet werden.

Wenn angegeben, wird keine Ladeanzeige angezeigt. Wenn dieses Attribut für ein Add-on angegeben wird, wird die gesamte Karte entfernt und im Client wird nichts angezeigt.

Verfügbar für Google Chat-Apps und nicht für Google Workspace-Add-ons.

Enums
INTERACTION_UNSPECIFIED Standardwert. action wird wie gewohnt ausgeführt.
OPEN_DIALOG

Öffnet ein Dialogfeld, eine kartenbasierte Oberfläche mit Fenstern, über die Chat-Apps mit Nutzern interagieren.

Wird nur von Chat-Apps als Reaktion auf Klicks auf Schaltflächen auf Nachrichten unterstützt. Wenn dieses Attribut für ein Add-on angegeben wird, wird die gesamte Karte entfernt und im Client wird nichts angezeigt.

Verfügbar für Google Chat-Apps und nicht für Google Workspace-Add-ons.

OpenAs

Wenn durch eine OnClick-Aktion ein Link geöffnet wird, kann der Client ihn entweder als Fenster in voller Größe (wenn dies der vom Client verwendete Frame verwendet wird) oder als Overlay (z. B. Pop-up) öffnen. Die Implementierung hängt von den Funktionen der Clientplattform ab. Der ausgewählte Wert wird möglicherweise ignoriert, wenn der Client ihn nicht unterstützt. FULL_SIZE wird von allen Clients unterstützt.

Verfügbar für Google Workspace-Add-ons und nicht für Google Chat-Apps.

Enums
FULL_SIZE Der Link wird in voller Größe geöffnet (wenn es sich um den vom Client verwendeten Frame handelt).
OVERLAY Der Link wird als Overlay geöffnet, beispielsweise als Pop-up.

OnClose

Was der Client tut, wenn ein Link, der durch eine OnClick-Aktion geöffnet wird, geschlossen wird.

Die Implementierung hängt von den Funktionen der Clientplattform ab. Ein Webbrowser kann beispielsweise einen Link in einem Pop-up-Fenster mit einem OnClose-Handler öffnen.

Wenn sowohl der OnOpen- als auch der OnClose-Handler festgelegt sind und die Clientplattform nicht beide Werte unterstützen kann, hat OnClose Vorrang.

Verfügbar für Google Workspace-Add-ons und nicht für Google Chat-Apps.

Enums
NOTHING Standardwert. Die Karte wird nicht aufgeladen und es passiert nichts.
RELOAD

Die Karte wird aktualisiert, nachdem das untergeordnete Fenster geschlossen wurde.

Bei Verwendung in Verbindung mit OpenAs.OVERLAY fungiert das untergeordnete Fenster als modales Dialogfeld und die übergeordnete Karte wird blockiert, bis das untergeordnete Fenster geschlossen wird.

DecoratedText

Ein Widget, das Text mit optionalen Elementen anzeigt, z. B. einem Label über oder unter dem Text, einem Symbol vor dem Text, einem Auswahl-Widget oder einer Schaltfläche nach dem Text. Ein Beispiel in Google Chat-Apps finden Sie unter Verzierter Text.

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.

JSON-Darstellung
{
  "icon": {
    object (Icon)
  },
  "startIcon": {
    object (Icon)
  },
  "topLabel": string,
  "text": string,
  "wrapText": boolean,
  "bottomLabel": string,
  "onClick": {
    object (OnClick)
  },

  // Union field control can be only one of the following:
  "button": {
    object (Button)
  },
  "switchControl": {
    object (SwitchControl)
  },
  "endIcon": {
    object (Icon)
  }
  // End of list of possible types for union field control.
}
Felder
icon
(deprecated)

object (Icon)

Zugunsten von startIcon verworfen.

startIcon

object (Icon)

Das Symbol vor dem Text

topLabel

string

Der Text, der über text angezeigt wird. Wird immer abgeschnitten.

text

string

Erforderlich. Der Haupttext.

Unterstützt einfache Formatierung Weitere Informationen zum Formatieren von Text finden Sie unter Text in Google Chat-Apps formatieren und Text in Google Workspace-Add-ons formatieren.

wrapText

boolean

Die Einstellung für den Zeilenumbruch. Bei true wird der Text umgebrochen und auf mehreren Zeilen angezeigt. Andernfalls wird der Text abgeschnitten.

Gilt nur für text, nicht für topLabel und bottomLabel.

bottomLabel

string

Der Text, der unter text angezeigt wird. Umschließt immer.

onClick

object (OnClick)

Diese Aktion wird ausgelöst, wenn Nutzer auf topLabel oder bottomLabel klicken.

Union-Feld control. Eine Schaltfläche, ein Schalter, ein Kästchen oder ein Bild, die bzw. das im decoratedText-Widget auf der rechten Seite des Textes angezeigt wird. Für control ist nur einer der folgenden Werte zulässig:
button

object (Button)

Eine Schaltfläche, auf die Nutzende klicken können, um eine Aktion auszulösen.

switchControl

object (SwitchControl)

Ein Schalter-Widget, auf das ein Nutzer klicken kann, um seinen Status zu ändern und eine Aktion auszulösen.

endIcon

object (Icon)

Ein Symbol, das nach dem Text angezeigt wird.

Unterstützt integrierte und benutzerdefinierte Symbole.

Icon

Ein Symbol, das in einem Widget auf einer Karte angezeigt wird. Ein Beispiel in Google Chat-Apps finden Sie unter Symbol.

Unterstützt integrierte und benutzerdefinierte Symbole.

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.

JSON-Darstellung
{
  "altText": string,
  "imageType": enum (ImageType),

  // Union field icons can be only one of the following:
  "knownIcon": string,
  "iconUrl": string,
  "materialIcon": {
    object (MaterialIcon)
  }
  // End of list of possible types for union field icons.
}
Felder
altText

string

Optional. Eine Beschreibung des Symbols, das für die Barrierefreiheit verwendet wird. Wenn keine Vorgabe erfolgt, wird der Standardwert Button angegeben. Als Best Practice sollten Sie eine hilfreiche Beschreibung dafür festlegen, was das Symbol angezeigt wird und falls zutreffend, welche Funktion es hat. Beispiel: A user's account portrait oder Opens a new browser tab and navigates to the Google Chat developer documentation at https://developers.google.com/chat.

Wenn das Symbol in einem Button festgelegt ist, wird altText als Hilfstext angezeigt, wenn der Nutzer den Mauszeiger auf die Schaltfläche bewegt. Wenn durch die Schaltfläche jedoch auch text festgelegt wird, wird der altText des Symbols ignoriert.

imageType

enum (ImageType)

Der Zuschnittstil, der auf das Bild angewendet wird. In einigen Fällen führt das Zuschneiden des Bilds auf CIRCLE dazu, dass es größer als ein integriertes Symbol gezeichnet wird.

Union-Feld icons. Das im Widget auf der Karte angezeigte Symbol. Für icons ist nur einer der folgenden Werte zulässig:
knownIcon

string

Zeigen Sie eines der integrierten Symbole von Google Workspace an.

Wenn beispielsweise ein Flugzeugsymbol angezeigt werden soll, geben Sie AIRPLANE an. Geben Sie für einen Bus BUS an.

Eine vollständige Liste der unterstützten Symbole finden Sie unter Integrierte Symbole.

iconUrl

string

Benutzerdefiniertes Symbol anzeigen, das unter einer HTTPS-URL gehostet wird.

Beispiel:

"iconUrl":
"https://developers.google.com/chat/images/quickstart-app-avatar.png"

Zu den unterstützten Dateitypen gehören .png und .jpg.

materialIcon

object (MaterialIcon)

Rufe eines der Material-Symbole von Google auf.

Wenn Sie beispielsweise ein Kästchensymbol einblenden möchten, verwenden Sie

"materialIcon": {
  "name": "check_box"
}

Verfügbar für Google Chat-Apps und nicht für Google Workspace-Add-ons.

MaterialIcon

Ein Material-Symbol von Google mit mehr als 2.500 Optionen.

Wenn Sie beispielsweise ein Kästchensymbol mit benutzerdefinierter Gewichtung und Note einblenden möchten, geben Sie Folgendes ein:

{
  "name": "check_box",
  "fill": true,
  "weight": 300,
  "grade": -25
}

Verfügbar für Google Chat-Apps und nicht für Google Workspace-Add-ons.

JSON-Darstellung
{
  "name": string,
  "fill": boolean,
  "weight": integer,
  "grade": integer
}
Felder
name

string

Der im Material-Symbol von Google definierte Symbolname, z. B. check_box. Alle ungültigen Namen werden abgebrochen und durch einen leeren String ersetzt. Das Symbol wird dann nicht mehr gerendert.

fill

boolean

Gibt an, ob das Symbol als ausgefüllt gerendert wird. Der Standardwert ist "false".

Wenn du eine Vorschau der verschiedenen Symboleinstellungen ansehen möchtest, rufe Google-Schriftartensymbole auf und passe die Einstellungen unter Anpassen an.

weight

integer

Die Strichstärke des Symbols. Sie haben die Wahl zwischen {100, 200, 300, 400, 500, 600, 700}. Wird keine Angabe gemacht, wird der Standardwert 400 verwendet. Wenn ein anderer Wert angegeben ist, wird der Standardwert verwendet.

Wenn du eine Vorschau der verschiedenen Symboleinstellungen ansehen möchtest, rufe Google-Schriftartensymbole auf und passe die Einstellungen unter Anpassen an.

grade

integer

Gewicht und Grad haben Einfluss auf die Stärke eines Symbols. Anpassungen der Note sind detaillierter als Gewichtsanpassungen und haben einen geringen Einfluss auf die Größe des Symbols. Wählen Sie {-25, 0, 200} aus. Wenn keine Angabe vorhanden ist, wird der Standardwert 0 verwendet. Wenn ein anderer Wert angegeben ist, wird der Standardwert verwendet.

Wenn du eine Vorschau der verschiedenen Symboleinstellungen ansehen möchtest, rufe Google-Schriftartensymbole auf und passe die Einstellungen unter Anpassen an.

Schaltfläche

Ein Text, ein Symbol oder eine Text- und Symbolschaltfläche, auf die die Nutzenden klicken können. Ein Beispiel in Google Chat-Apps finden Sie unter Liste der Schaltflächen.

Wenn Sie ein Bild als anklickbare Schaltfläche festlegen möchten, geben Sie ein Image (kein ImageComponent) an und legen Sie eine onClick-Aktion fest.

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.

JSON-Darstellung
{
  "text": string,
  "icon": {
    object (Icon)
  },
  "color": {
    object (Color)
  },
  "onClick": {
    object (OnClick)
  },
  "disabled": boolean,
  "altText": string
}
Felder
text

string

Der auf der Schaltfläche angezeigte Text.

icon

object (Icon)

Das Symbolbild. Wenn sowohl icon als auch text festgelegt sind, wird das Symbol vor dem Text angezeigt.

color

object (Color)

Wenn diese Option aktiviert ist, wird die Schaltfläche mit einer einfarbigen Hintergrundfarbe gefüllt und die Schriftfarbe ändert sich, um den Kontrast zur Hintergrundfarbe beizubehalten. Wenn Sie beispielsweise einen blauen Hintergrund festlegen, wird wahrscheinlich weißer Text angezeigt.

Wenn die Richtlinie nicht konfiguriert ist, ist der Bildhintergrund weiß und die Schriftfarbe blau.

Für Rot, Grün und Blau ist der Wert jedes Feldes eine float-Zahl, die Sie auf zwei Arten ausdrücken können: als Zahl zwischen 0 und 255 geteilt durch 255 (153/255) oder als Wert zwischen 0 und 1 (0,6). 0 steht für das Fehlen einer Farbe und 1 oder 255/255 für das vollständige Vorhandensein dieser Farbe auf der RGB-Skala.

Legen Sie optional alpha fest. Damit wird mithilfe der folgenden Gleichung ein Transparenzgrad festgelegt:

pixel color = alpha * (this color) + (1.0 - alpha) * (background color)

Für alpha entspricht der Wert 1 einer Volltonfarbe und ein Wert von 0 einer vollständig transparenten Farbe.

Die folgende Farbe stellt beispielsweise ein halb transparentes Rot dar:

"color": {
   "red": 1,
   "green": 0,
   "blue": 0,
   "alpha": 0.5
}
onClick

object (OnClick)

Erforderlich. Die Aktion, die ausgeführt werden soll, wenn Nutzende auf die Schaltfläche klicken, wie z. B. das Öffnen eines Hyperlinks oder das Ausführen einer benutzerdefinierten Funktion.

disabled

boolean

Beim Wert true wird die Schaltfläche inaktiv angezeigt und reagiert nicht auf Nutzeraktionen.

altText

string

Der alternative Text, der für die Barrierefreiheit verwendet wird.

Legen Sie eine Beschreibung fest, die Nutzende über die Funktion der Schaltfläche informiert. Wenn beispielsweise durch eine Schaltfläche ein Hyperlink geöffnet wird, können Sie Folgendes schreiben: „Öffnet einen neuen Browsertab und navigiert zur Entwicklerdokumentation für Google Chat unter https://developers.google.com/chat".“

Farbe

Ermöglicht die Darstellung einer Farbe im RGBA-Farbraum. Diese Darstellung wurde entwickelt, um die Konvertierung zu und von Farbdarstellungen in verschiedenen Sprachen vor Kompaktheitsgrad zu vereinfachen. Die Felder dieser Darstellung lassen sich beispielsweise dem Konstruktor von java.awt.Color in Java ganz einfach zur Verfügung stellen. Sie können sie aber auch ganz einfach an die Methode +colorWithRed:green:blue:alpha von UIColor in iOS übergeben. Außerdem lässt sie sich mit nur wenig Arbeit in JavaScript als CSS-String rgba() formatieren.

Diese Referenzseite enthält keine Informationen zum absoluten Farbraum, der zur Interpretation des RGB-Werts verwendet werden sollte, z. B. sRGB, Adobe RGB, DCI-P3 und BT.2020. Standardmäßig sollte für Anwendungen der sRGB-Farbraum verwendet werden.

Wenn eine Farbgleichheit entschieden werden muss, behandeln Implementierungen, sofern nicht anders angegeben, zwei Farben gleich, wenn sich alle Rot-, Grün-, Blau- und Alpha-Werte jeweils um höchstens 1e-5 unterscheiden.

Beispiel (Java):

 import com.google.type.Color;

 // ...
 public static java.awt.Color fromProto(Color protocolor) {
   float alpha = protocolor.hasAlpha()
       ? protocolor.getAlpha().getValue()
       : 1.0;

   return new java.awt.Color(
       protocolor.getRed(),
       protocolor.getGreen(),
       protocolor.getBlue(),
       alpha);
 }

 public static Color toProto(java.awt.Color color) {
   float red = (float) color.getRed();
   float green = (float) color.getGreen();
   float blue = (float) color.getBlue();
   float denominator = 255.0;
   Color.Builder resultBuilder =
       Color
           .newBuilder()
           .setRed(red / denominator)
           .setGreen(green / denominator)
           .setBlue(blue / denominator);
   int alpha = color.getAlpha();
   if (alpha != 255) {
     result.setAlpha(
         FloatValue
             .newBuilder()
             .setValue(((float) alpha) / denominator)
             .build());
   }
   return resultBuilder.build();
 }
 // ...

Beispiel (iOS/Obj-C):

 // ...
 static UIColor* fromProto(Color* protocolor) {
    float red = [protocolor red];
    float green = [protocolor green];
    float blue = [protocolor blue];
    FloatValue* alpha_wrapper = [protocolor alpha];
    float alpha = 1.0;
    if (alpha_wrapper != nil) {
      alpha = [alpha_wrapper value];
    }
    return [UIColor colorWithRed:red green:green blue:blue alpha:alpha];
 }

 static Color* toProto(UIColor* color) {
     CGFloat red, green, blue, alpha;
     if (![color getRed:&red green:&green blue:&blue alpha:&alpha]) {
       return nil;
     }
     Color* result = [[Color alloc] init];
     [result setRed:red];
     [result setGreen:green];
     [result setBlue:blue];
     if (alpha <= 0.9999) {
       [result setAlpha:floatWrapperWithValue(alpha)];
     }
     [result autorelease];
     return result;
}
// ...

Beispiel (JavaScript):

// ...

var protoToCssColor = function(rgb_color) {
   var redFrac = rgb_color.red || 0.0;
   var greenFrac = rgb_color.green || 0.0;
   var blueFrac = rgb_color.blue || 0.0;
   var red = Math.floor(redFrac * 255);
   var green = Math.floor(greenFrac * 255);
   var blue = Math.floor(blueFrac * 255);

   if (!('alpha' in rgb_color)) {
      return rgbToCssColor(red, green, blue);
   }

   var alphaFrac = rgb_color.alpha.value || 0.0;
   var rgbParams = [red, green, blue].join(',');
   return ['rgba(', rgbParams, ',', alphaFrac, ')'].join('');
};

var rgbToCssColor = function(red, green, blue) {
  var rgbNumber = new Number((red << 16) | (green << 8) | blue);
  var hexString = rgbNumber.toString(16);
  var missingZeros = 6 - hexString.length;
  var resultBuilder = ['#'];
  for (var i = 0; i < missingZeros; i++) {
     resultBuilder.push('0');
  }
  resultBuilder.push(hexString);
  return resultBuilder.join('');
};

// ...
JSON-Darstellung
{
  "red": number,
  "green": number,
  "blue": number,
  "alpha": number
}
Felder
red

number

Der Rotanteil der Farbe als Wert im Intervall [0, 1].

green

number

Der Grünanteil der Farbe als Wert im Intervall [0, 1].

blue

number

Der Blauanteil der Farbe als Wert im Intervall [0, 1].

alpha

number

Der Anteil dieser Farbe, der auf den Pixel angewendet werden soll. Die endgültige Pixelfarbe wird durch folgende Gleichung definiert:

pixel color = alpha * (this color) + (1.0 - alpha) * (background color)

Der Wert 1,0 entspricht einer soliden Farbdarstellung, während die Farbe bei einem Wert von 0,0 vollständig transparent ist. Dabei wird anstelle eines einfachen Float-Skalarwerts eine Wrapper-Nachricht verwendet, sodass zwischen einem Standardwert und dem zurückgesetzten Wert unterschieden werden kann. Wird dieses Farbobjekt weggelassen, wird es als Vollfarbe dargestellt, so als ob dem Alphawert explizit der Wert 1,0 gegeben worden wäre.

SwitchControl

Entweder eine Ein/Aus-Schaltfläche oder ein Kästchen in einem decoratedText-Widget.

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.

Wird nur im decoratedText-Widget unterstützt.

JSON-Darstellung
{
  "name": string,
  "value": string,
  "selected": boolean,
  "onChangeAction": {
    object (Action)
  },
  "controlType": enum (ControlType)
}
Felder
name

string

Der Name, durch den das Schalter-Widget in einem Formulareingabeereignis identifiziert wird.

Weitere Informationen zum Arbeiten mit Formulareingaben finden Sie unter Formulardaten empfangen.

value

string

Der von einem Nutzer eingegebene Wert, der bei einem Formulareingabeereignis zurückgegeben wurde.

Weitere Informationen zum Arbeiten mit Formulareingaben finden Sie unter Formulardaten empfangen.

selected

boolean

Bei true ist der Schalter ausgewählt.

onChangeAction

object (Action)

Aktion, die ausgeführt werden soll, wenn sich der Schalterstatus ändert, z. B. die auszuführende Funktion.

controlType

enum (ControlType)

So wird der Schalter auf der Benutzeroberfläche angezeigt

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.

ControlType

So wird der Schalter auf der Benutzeroberfläche angezeigt

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.

Enums
SWITCH Ein Schalter.
CHECKBOX Zugunsten von CHECK_BOX verworfen.
CHECK_BOX Ein Kästchen.

ButtonList

Eine Liste mit horizontal angeordneten Schaltflächen. Ein Beispiel in Google Chat-Apps finden Sie unter Liste der Schaltflächen.

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.

JSON-Darstellung
{
  "buttons": [
    {
      object (Button)
    }
  ]
}
Felder
buttons[]

object (Button)

Ein Array mit Schaltflächen.

TextInput

Ein Feld, in das Nutzer Text eingeben können. Unterstützt Vorschläge und Aktionen bei Änderungen Ein Beispiel in Google Chat-Apps finden Sie unter Texteingabe.

Chat-Apps empfangen und können den Wert des eingegebenen Texts während der Eingabe im Formular verarbeiten. Weitere Informationen zum Arbeiten mit Formulareingaben finden Sie unter Formulardaten empfangen.

Wenn Sie undefinierte oder abstrakte Daten von Nutzenden erfassen müssen, verwenden Sie eine Texteingabe. Verwenden Sie das SelectionInput-Widget, um definierte oder Aufzählungsdaten von Nutzern zu erfassen.

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.

JSON-Darstellung
{
  "name": string,
  "label": string,
  "hintText": string,
  "value": string,
  "type": enum (Type),
  "onChangeAction": {
    object (Action)
  },
  "initialSuggestions": {
    object (Suggestions)
  },
  "autoCompleteAction": {
    object (Action)
  },
  "placeholderText": string
}
Felder
name

string

Der Name, durch den die Texteingabe in einem Formulareingabeereignis identifiziert wird.

Weitere Informationen zum Arbeiten mit Formulareingaben finden Sie unter Formulardaten empfangen.

label

string

Der Text, der in der Benutzeroberfläche über dem Texteingabefeld angezeigt wird.

Geben Sie Text ein, mit dem der Nutzer die Informationen eingeben kann, die Ihre App benötigt. Wenn Sie beispielsweise nach dem Namen einer Person fragen, aber ausdrücklich den Nachnamen benötigen, schreiben Sie surname anstelle von name.

Erforderlich, wenn hintText nicht angegeben ist. Andernfalls ist dies optional.

hintText

string

Text, der unter dem Texteingabefeld angezeigt wird und Nutzende zur Eingabe eines bestimmten Werts auffordert. Dieser Text ist immer sichtbar.

Erforderlich, wenn label nicht angegeben ist. Andernfalls ist dies optional.

value

string

Der von einem Nutzer eingegebene Wert, der bei einem Formulareingabeereignis zurückgegeben wurde.

Weitere Informationen zum Arbeiten mit Formulareingaben finden Sie unter Formulardaten empfangen.

type

enum (Type)

So wird ein Texteingabefeld in der Benutzeroberfläche angezeigt. Gibt beispielsweise an, ob das Feld ein- oder mehrzeilig ist.

onChangeAction

object (Action)

Was ist zu tun, wenn eine Änderung im Texteingabefeld vorgenommen wird? Zum Beispiel, wenn ein Nutzer etwas in das Feld einfügt oder Text löscht.

Beispiele für mögliche Aktionen sind das Ausführen einer benutzerdefinierten Funktion oder das Öffnen eines Dialogfelds in Google Chat.

initialSuggestions

object (Suggestions)

Vorgeschlagene Werte, die Nutzer eingeben können. Diese Werte werden angezeigt, wenn Nutzende in das Texteingabefeld klicken. Während der Eingabe werden die vorgeschlagenen Werte dynamisch gefiltert, damit sie der Eingabe entsprechen.

Ein Texteingabefeld für eine Programmiersprache könnte beispielsweise Java, JavaScript, Python und C++ vorschlagen. Wenn Nutzer beginnen, Jav einzugeben, wird in der Liste der Vorschlagsfilter nur Java und JavaScript angezeigt.

Vorgeschlagene Werte helfen Nutzern dabei, Werte einzugeben, die in Ihrer App verständlich sind. Wenn es sich um JavaScript handelt, geben einige Nutzer möglicherweise javascript und andere java script ein. Wenn du JavaScript vorschlägst, kann die Interaktion von Nutzern mit deiner App standardisiert werden.

Wenn angegeben, ist TextInput.type immer SINGLE_LINE, auch wenn es auf MULTIPLE_LINE festgelegt ist.

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.

autoCompleteAction

object (Action)

Optional. Geben Sie an, welche Aktion ausgeführt werden soll, wenn das Texteingabefeld Nutzern, die damit interagieren, Vorschläge macht.

Ist kein Wert angegeben, werden die Vorschläge von initialSuggestions festgelegt und vom Client verarbeitet.

Wenn angegeben, führt die App die hier angegebene Aktion aus, z. B. das Ausführen einer benutzerdefinierten Funktion.

Verfügbar für Google Workspace-Add-ons und nicht für Google Chat-Apps.

placeholderText

string

Text, der im Texteingabefeld erscheint, wenn das Feld leer ist. Mit diesem Text werden Nutzer zur Eingabe eines Werts aufgefordert. Beispiel: Enter a number from 0 to 100.

Verfügbar für Google Chat-Apps und nicht für Google Workspace-Add-ons.

Typ

So wird ein Texteingabefeld in der Benutzeroberfläche angezeigt. Geben Sie beispielsweise an, ob es sich um ein einzeiliges oder eine mehrzeiliges Eingabefeld handelt. Wenn initialSuggestions angegeben ist, ist type immer SINGLE_LINE, auch wenn MULTIPLE_LINE festgelegt ist.

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.

Enums
SINGLE_LINE Das Texteingabefeld hat eine feste Höhe von einer Zeile.
MULTIPLE_LINE Das Texteingabefeld hat eine feste Höhe von mehreren Zeilen.

RenderActions

Eine Reihe von Renderinganweisungen, die eine Karte auffordern, eine Aktion auszuführen, oder die die Host-App des Add-ons oder die Chat-App anweisen, eine appspezifische Aktion auszuführen.

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.

Felder
action

Action

Aktion

Felder
navigations[]

Navigation

Angezeigte Karten verschieben oder aktualisieren

Fügen Sie dem Stapel eine neue Karte hinzu (vorwärts navigieren).

Verfügbar für Google Workspace-Add-ons und nicht für Google Chat-Apps.

navigations: {
  pushCard: CARD
}

Ersetzen Sie die obere Karte durch eine neue.

Verfügbar für Google Workspace-Add-ons und nicht für Google Chat-Apps.

navigations: {
  updateCard: CARD
}

Vorschläge

Vorgeschlagene Werte, die Nutzer eingeben können. Diese Werte werden angezeigt, wenn Nutzende in das Texteingabefeld klicken. Während der Eingabe werden die vorgeschlagenen Werte dynamisch gefiltert, damit sie der Eingabe entsprechen.

Ein Texteingabefeld für eine Programmiersprache könnte beispielsweise Java, JavaScript, Python und C++ vorschlagen. Wenn Nutzer beginnen, Jav einzugeben, wird die Liste der Vorschlagsfilter zur Anzeige von Java und JavaScript angezeigt.

Vorgeschlagene Werte helfen Nutzern dabei, Werte einzugeben, die in Ihrer App verständlich sind. Wenn es sich um JavaScript handelt, geben einige Nutzer möglicherweise javascript und andere java script ein. Wenn du JavaScript vorschlägst, kann die Interaktion von Nutzern mit deiner App standardisiert werden.

Wenn angegeben, ist TextInput.type immer SINGLE_LINE, auch wenn es auf MULTIPLE_LINE festgelegt ist.

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.

JSON-Darstellung
{
  "items": [
    {
      object (SuggestionItem)
    }
  ]
}
Felder
items[]

object (SuggestionItem)

Eine Liste von Vorschlägen, die für automatisch vervollständigte Empfehlungen in Texteingabefeldern verwendet werden.

SuggestionItem

Ein vorgeschlagener Wert, den Nutzende in ein Texteingabefeld eingeben können.

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.

JSON-Darstellung
{

  // Union field content can be only one of the following:
  "text": string
  // End of list of possible types for union field content.
}
Felder

Union-Feld content.

Für content ist nur einer der folgenden Werte zulässig:

text

string

Der Wert einer vorgeschlagenen Eingabe für ein Texteingabefeld. Dies entspricht dem, was die Nutzer selbst eingeben.

SelectionInput

Ein Widget, das ein oder mehrere UI-Elemente erstellt, die Nutzer auswählen können. Zum Beispiel ein Drop-down-Menü oder Kästchen. Mit diesem Widget können Sie Daten erfassen, die vorhergesagt oder aufgezählt werden können. Ein Beispiel in Google Chat-Apps finden Sie unter Auswahleingabe.

Chat-Apps können den Wert von Elementen verarbeiten, die Nutzer auswählen oder eingeben. Weitere Informationen zum Arbeiten mit Formulareingaben finden Sie unter Formulardaten empfangen.

Verwenden Sie das TextInput-Widget, um nicht definierte oder abstrakte Daten von Nutzern zu erfassen.

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.

JSON-Darstellung
{
  "name": string,
  "label": string,
  "type": enum (SelectionType),
  "items": [
    {
      object (SelectionItem)
    }
  ],
  "onChangeAction": {
    object (Action)
  },
  "multiSelectMaxSelectedItems": integer,
  "multiSelectMinQueryLength": integer,

  // Union field multi_select_data_source can be only one of the following:
  "externalDataSource": {
    object (Action)
  },
  "platformDataSource": {
    object (PlatformDataSource)
  }
  // End of list of possible types for union field multi_select_data_source.
}
Felder
name

string

Der Name, der die Auswahleingabe in einem Formulareingabeereignis identifiziert.

Weitere Informationen zum Arbeiten mit Formulareingaben finden Sie unter Formulardaten empfangen.

label

string

Der Text, der in der Benutzeroberfläche über dem Eingabefeld für die Auswahl angezeigt wird.

Geben Sie Text ein, mit dem der Nutzer die Informationen eingeben kann, die Ihre App benötigt. Wenn Nutzer beispielsweise die Dringlichkeit eines Arbeitstickets aus einem Drop-down-Menü auswählen, könnte das Label „Dringlichkeit“ oder „Dringlichkeit auswählen“ lauten.

type

enum (SelectionType)

Der Elementtyp, der Nutzern in einem SelectionInput-Widget angezeigt wird. Auswahltypen unterstützen verschiedene Arten von Interaktionen. Nutzende können beispielsweise ein oder mehrere Kästchen auswählen, aber sie können nur einen Wert aus einem Drop-down-Menü auswählen.

items[]

object (SelectionItem)

Ein Array aus auswählbaren Elementen. Beispiel: mehrere Optionsfelder oder Kästchen. Unterstützt bis zu 100 Elemente.

onChangeAction

object (Action)

Wenn angegeben, wird das Formular gesendet, wenn sich die Auswahl ändert. Wenn keine Angabe erfolgt, müssen Sie eine separate Schaltfläche zum Senden des Formulars angeben.

Weitere Informationen zum Arbeiten mit Formulareingaben finden Sie unter Formulardaten empfangen.

multiSelectMaxSelectedItems

integer

Die maximale Anzahl von Elementen, die ein Nutzer bei Mehrfachauswahl-Menüs auswählen kann. Der Mindestwert beträgt 1 Element. Wenn keine Vorgabe erfolgt, werden standardmäßig 3 Elemente verwendet.

multiSelectMinQueryLength

integer

Bei Mehrfachauswahl-Menüs die Anzahl der Textzeichen, die ein Nutzer eingibt, bevor die App automatisch vervollständigt und vorgeschlagene Elemente im Menü anzeigt.

Wenn kein Wert angegeben ist, gilt standardmäßig 0 Zeichen für statische Datenquellen und 3 Zeichen für externe Datenquellen.

Union-Feld multi_select_data_source. Bei einem Mehrfachauswahl-Menü die Datenquelle, mit der Auswahlelemente gefüllt werden.

Verfügbar für Google Chat-Apps und nicht für Google Workspace-Add-ons. Für multi_select_data_source ist nur einer der folgenden Werte zulässig:

externalDataSource

object (Action)

Eine externe Datenquelle, z. B. eine relationale Datenbank.

platformDataSource

object (PlatformDataSource)

Eine Datenquelle aus Google Workspace.

SelectionType

Das Format für die Elemente, die Nutzer auswählen können. Verschiedene Optionen unterstützen unterschiedliche Arten von Interaktionen. Nutzende können beispielsweise mehrere Kästchen auswählen, aber nur ein Element aus einem Drop-down-Menü auswählen.

Jede Auswahleingabe unterstützt einen Auswahltyp. Die Kombination von Kästchen und Schaltern ist beispielsweise nicht möglich.

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.

Enums
CHECK_BOX Eine Reihe von Kästchen. Nutzer können ein oder mehrere Kästchen auswählen.
RADIO_BUTTON Mehrere Optionsfelder. Nutzer können ein Optionsfeld auswählen.
SWITCH Eine Reihe von Schaltern. Nutzer können einen oder mehrere Schalter aktivieren.
DROPDOWN Ein Drop-down-Menü. Nutzer können einen Eintrag aus dem Menü auswählen.
MULTI_SELECT

Ein Mehrfachauswahl-Menü für statische oder dynamische Daten. In der Menüleiste können Nutzer ein oder mehrere Elemente auswählen. Nutzer können auch Werte eingeben, um dynamische Daten auszufüllen. Wenn Nutzer beispielsweise den Namen eines Gruppenbereichs in Google Chat eingeben, wird dieser automatisch vorgeschlagen.

Wenn Sie Elemente für ein Mehrfachauswahl-Menü ausfüllen möchten, können Sie eine der folgenden Arten von Datenquellen verwenden:

  • Statische Daten: Elemente werden im Widget als SelectionItem-Objekte angegeben. Maximal 100 Elemente.
  • Google Workspace-Daten: Elemente werden anhand von Daten aus Google Workspace gefüllt, z. B. Google Workspace-Nutzer oder Google Chat-Gruppenbereiche.
  • Externe Daten: Die Elemente werden aus einer externen Datenquelle außerhalb von Google Workspace ausgefüllt.

Beispiele für die Implementierung von Mehrfachauswahlmenüs findest du auf der SelectionInput-Widget-Seite .

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons. Die Mehrfachauswahl für Google Workspace-Add-ons ist in der Entwicklervorschau verfügbar.

SelectionItem

Ein Element, das Nutzer in einer Auswahleingabe auswählen können, z. B. ein Kästchen oder einen Schalter.

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.

JSON-Darstellung
{
  "text": string,
  "value": string,
  "selected": boolean,
  "startIconUri": string,
  "bottomText": string
}
Felder
text

string

Der Text, der den Artikel für Nutzende identifiziert oder beschreibt.

value

string

Der mit diesem Element verknüpfte Wert Der Client sollte diesen als Eingabewert für das Formular verwenden.

Weitere Informationen zum Arbeiten mit Formulareingaben finden Sie unter Formulardaten empfangen.

selected

boolean

Gibt an, ob das Element standardmäßig ausgewählt ist. Wenn für die Auswahl nur ein Wert akzeptiert wird (z. B. bei Optionsfeldern oder Dropdown-Menüs), legen Sie dieses Feld nur für ein Element fest.

startIconUri

string

Bei Mehrfachauswahl-Menüs die URL des Symbols, das neben dem Feld text des Elements angezeigt wird. Unterstützt PNG- und JPEG-Dateien. Muss eine HTTPS-URL sein. Beispiel: https://developers.google.com/chat/images/quickstart-app-avatar.png.

bottomText

string

Bei Mehrfachauswahl-Menüs eine Textbeschreibung oder ein Label, die bzw. das unter dem Feld text des Elements angezeigt wird.

PlatformDataSource

Für ein SelectionInput-Widget, das ein Mehrfachauswahlmenü verwendet: eine Datenquelle aus Google Workspace. Wird zum Füllen von Elementen in einem Mehrfachauswahl-Menü verwendet.

Verfügbar für Google Chat-Apps und nicht für Google Workspace-Add-ons.

JSON-Darstellung
{

  // Union field data_source can be only one of the following:
  "commonDataSource": enum (CommonDataSource),
  "hostAppDataSource": {
    object (HostAppDataSourceMarkup)
  }
  // End of list of possible types for union field data_source.
}
Felder
Union-Feld data_source. Die Datenquelle. Für data_source ist nur einer der folgenden Werte zulässig:
commonDataSource

enum (CommonDataSource)

Eine Datenquelle, die für alle Google Workspace-Anwendungen freigegeben ist, z. B. Nutzer in einer Google Workspace-Organisation.

hostAppDataSource

object (HostAppDataSourceMarkup)

Eine Datenquelle, die nur für eine Google Workspace-Hostanwendung gilt, z. B. Gruppenbereiche in Google Chat.

CommonDataSource

Eine Datenquelle, die für alle Google Workspace-Anwendungen freigegeben ist.

Verfügbar für Google Chat-Apps und nicht für Google Workspace-Add-ons.

Enums
UNKNOWN Standardwert. Nicht verwenden.
USER Google Workspace-Nutzer*innen. Der Nutzer kann nur Nutzer aus seiner Google Workspace-Organisation aufrufen und auswählen.

HostAppDataSourceMarkup

Für ein SelectionInput-Widget, das ein Mehrfachauswahlmenü verwendet, eine Datenquelle aus einer Google Workspace-Anwendung. Die Datenquelle füllt die Auswahlelemente für das Mehrfachauswahl-Menü.

Verfügbar für Google Chat-Apps und nicht für Google Workspace-Add-ons.

JSON-Darstellung
{

  // Union field data_source can be only one of the following:
  "chatDataSource": {
    object (ChatClientDataSourceMarkup)
  }
  // End of list of possible types for union field data_source.
}
Felder
Union-Feld data_source. Die Google Workspace-Anwendung, die Elemente für ein Mehrfachauswahlmenü ausfüllt. Für data_source ist nur einer der folgenden Werte zulässig:
chatDataSource

object (ChatClientDataSourceMarkup)

Eine Datenquelle aus Google Chat.

ChatClientDataSourceMarkup

Für ein SelectionInput-Widget, das ein Mehrfachauswahlmenü verwendet, eine Datenquelle aus Google Chat. Die Datenquelle füllt die Auswahlelemente für das Mehrfachauswahl-Menü. Nutzer können beispielsweise Gruppenbereiche in Google Chat auswählen, in denen sie Mitglied sind.

Verfügbar für Google Chat-Apps und nicht für Google Workspace-Add-ons.

JSON-Darstellung
{

  // Union field source can be only one of the following:
  "spaceDataSource": {
    object (SpaceDataSource)
  }
  // End of list of possible types for union field source.
}
Felder
Union-Feld source. Die Google Chat-Datenquelle. Für source ist nur einer der folgenden Werte zulässig:
spaceDataSource

object (SpaceDataSource)

Google Chat-Gruppenbereiche, in denen der Nutzer Mitglied ist.

SpaceDataSource

Eine Datenquelle, die in Google Chat-Gruppenbereichen als Auswahlelemente für ein Mehrfachauswahlmenü eingefügt wird. Füllt nur Gruppenbereiche aus, in denen der Nutzer Mitglied ist.

Verfügbar für Google Chat-Apps und nicht für Google Workspace-Add-ons.

JSON-Darstellung
{
  "defaultToCurrentSpace": boolean
}
Felder
defaultToCurrentSpace

boolean

Wenn true festgelegt ist, wird im Mehrfachauswahl-Menü standardmäßig der aktuelle Google Chat-Bereich als Element ausgewählt.

DateTimePicker

Nutzer können ein Datum, eine Uhrzeit oder beides eingeben. Ein Beispiel in Google Chat-Apps finden Sie unter Datum/Uhrzeit-Auswahl.

Nutzer können Text eingeben oder über die Auswahl Datum und Uhrzeit auswählen. Wenn Nutzer ein ungültiges Datum oder eine ungültige Uhrzeit eingeben, zeigt die Auswahl einen Fehler an, der den Nutzer auffordert, die Informationen richtig einzugeben.

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.

JSON-Darstellung
{
  "name": string,
  "label": string,
  "type": enum (DateTimePickerType),
  "valueMsEpoch": string,
  "timezoneOffsetDate": integer,
  "onChangeAction": {
    object (Action)
  }
}
Felder
name

string

Der Name, durch den das DateTimePicker in einem Formulareingabeereignis identifiziert wird.

Weitere Informationen zum Arbeiten mit Formulareingaben finden Sie unter Formulardaten empfangen.

label

string

Text, der Nutzende auffordert, ein Datum, eine Uhrzeit oder ein Datum und eine Uhrzeit einzugeben. Wenn Nutzer beispielsweise einen Termin vereinbaren, verwenden Sie ein Label wie Appointment date oder Appointment date and time.

type

enum (DateTimePickerType)

Gibt an, ob das Widget die Eingabe von Datum, Uhrzeit oder Datum und Uhrzeit unterstützt.

valueMsEpoch

string (int64 format)

Der im Widget angezeigte Standardwert in Millisekunden seit der Unixzeit.

Geben Sie den Wert basierend auf dem Auswahltyp an (DateTimePickerType):

  • DATE_AND_TIME: ein Kalenderdatum und eine Kalenderzeit in UTC Wenn Sie beispielsweise den 1. Januar 2023 um 12:00 Uhr UTC darstellen möchten, verwenden Sie 1672574400000.
  • DATE_ONLY: ein Kalenderdatum um 00:00:00 UTC Wenn Sie beispielsweise den 1. Januar 2023 darstellen möchten, verwenden Sie 1672531200000.
  • TIME_ONLY: eine Zeit in UTC Wenn Sie beispielsweise 12:00 Uhr darstellen möchten, verwenden Sie 43200000 (oder 12 * 60 * 60 * 1000).
timezoneOffsetDate

integer

Die Zahl in Minuten für die Zeitzonenabweichung gegenüber UTC. Wenn festgelegt, wird valueMsEpoch in der angegebenen Zeitzone angezeigt. Wenn kein Wert festgelegt ist, wird standardmäßig die Zeitzone des Nutzers verwendet.

onChangeAction

object (Action)

Wird ausgelöst, wenn der Nutzer auf der DateTimePicker-Oberfläche auf Speichern oder Löschen klickt.

DateTimePickerType

Das Format für Datum und Uhrzeit im DateTimePicker-Widget. Legt fest, ob Nutzer ein Datum, eine Uhrzeit oder beides eingeben können.

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.

Enums
DATE_AND_TIME Nutzer geben Datum und Uhrzeit ein.
DATE_ONLY Die Nutzer geben ein Datum ein.
TIME_ONLY Die Nutzer geben eine Zeit ein.

Trennlinie

Dieser Typ hat keine Felder.

Trennt die Widgets als horizontale Linie, Ein Beispiel in Google Chat-Apps finden Sie unter Trennlinien.

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.

Mit der folgenden JSON-Datei wird beispielsweise eine Trennlinie erstellt:

"divider": {}

GRid

Zeigt ein Raster mit einer Sammlung von Elementen an. Elemente dürfen nur Text oder Bilder enthalten. Verwenden Sie Columns für responsive Spalten oder wenn Sie mehr als Text oder Bilder einfügen möchten. Ein Beispiel in Google Chat-Apps finden Sie unter Raster.

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.

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.

Mit der folgenden JSON-Datei wird beispielsweise ein zweispaltiges Raster mit einem einzelnen Element erstellt:

"grid": {
  "title": "A fine collection of items",
  "columnCount": 2,
  "borderStyle": {
    "type": "STROKE",
    "cornerRadius": 4
  },
  "items": [
    {
      "image": {
        "imageUri": "https://www.example.com/image.png",
        "cropStyle": {
          "type": "SQUARE"
        },
        "borderStyle": {
          "type": "STROKE"
        }
      },
      "title": "An item",
      "textAlignment": "CENTER"
    }
  ],
  "onClick": {
    "openLink": {
      "url": "https://www.example.com"
    }
  }
}
JSON-Darstellung
{
  "title": string,
  "items": [
    {
      object (GridItem)
    }
  ],
  "borderStyle": {
    object (BorderStyle)
  },
  "columnCount": integer,
  "onClick": {
    object (OnClick)
  }
}
Felder
title

string

Der Text, der in der Rasterüberschrift angezeigt wird.

items[]

object (GridItem)

Die Elemente, die im Raster angezeigt werden sollen.

borderStyle

object (BorderStyle)

Der Rahmenstil, der auf jedes Rasterelement angewendet werden soll.

columnCount

integer

Die Anzahl der Spalten, die im Raster angezeigt werden sollen. Wenn dieses Feld nicht angegeben ist, wird ein Standardwert verwendet. Dieser Standardwert hängt davon ab, wo das Raster angezeigt wird (Dialogfeld oder Companion).

onClick

object (OnClick)

Dieser Callback wird von jedem einzelnen Rasterelement wiederverwendet, allerdings werden die Kennung und der Index des Elements aus der Elementliste zu den Callback-Parametern hinzugefügt.

GridItem

Stellt ein Element in einem Rasterlayout dar. Elemente können Text, ein Bild oder sowohl Text als auch ein Bild enthalten.

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.

JSON-Darstellung
{
  "id": string,
  "image": {
    object (ImageComponent)
  },
  "title": string,
  "subtitle": string,
  "layout": enum (GridItemLayout)
}
Felder
id

string

Eine benutzerdefinierte Kennung für dieses Rasterelement. Diese Kennung wird in den onClick-Callback-Parametern des übergeordneten Rasters zurückgegeben.

image

object (ImageComponent)

Das Bild, das im Rasterelement angezeigt wird.

title

string

Titel des Rasterelements

subtitle

string

Die Untertitel des Rasterelements

layout

enum (GridItemLayout)

Das Layout, das für das Rasterelement verwendet werden soll.

ImageComponent

Stellt ein Bild dar.

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.

JSON-Darstellung
{
  "imageUri": string,
  "altText": string,
  "cropStyle": {
    object (ImageCropStyle)
  },
  "borderStyle": {
    object (BorderStyle)
  }
}
Felder
imageUri

string

Die Bild-URL.

altText

string

Das Bedienungshilfen-Label für das Bild.

cropStyle

object (ImageCropStyle)

Der Zuschnittstil, der auf das Bild angewendet werden soll.

borderStyle

object (BorderStyle)

Der Rahmenstil, der auf das Bild angewendet werden soll.

ImageCropStyle

Stellt den Zuschnittstil dar, der auf ein Bild angewendet wird.

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.

So wenden Sie beispielsweise ein Seitenverhältnis von 16:9 an:

cropStyle {
 "type": "RECTANGLE_CUSTOM",
 "aspectRatio": 16/9
}
JSON-Darstellung
{
  "type": enum (ImageCropType),
  "aspectRatio": number
}
Felder
type

enum (ImageCropType)

Der Zuschnitttyp.

aspectRatio

number

Das zu verwendende Seitenverhältnis beim Zuschnitttyp RECTANGLE_CUSTOM.

So wenden Sie beispielsweise ein Seitenverhältnis von 16:9 an:

cropStyle {
 "type": "RECTANGLE_CUSTOM",
 "aspectRatio": 16/9
}

ImageCropType

Stellt den Zuschnittstil dar, der auf ein Bild angewendet wird.

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.

Enums
IMAGE_CROP_TYPE_UNSPECIFIED Nicht verwenden. Nicht angegeben
SQUARE Standardwert. Wendet einen quadratischen Zuschnitt an.
CIRCLE Wendet den kreisförmigen Zuschnitt an.
RECTANGLE_CUSTOM Wendet einen rechteckigen Ausschnitt mit einem benutzerdefinierten Seitenverhältnis an. Lege das benutzerdefinierte Seitenverhältnis mit aspectRatio fest.
RECTANGLE_4_3 Wendet einen rechteckigen Ausschnitt mit einem Seitenverhältnis von 4:3 an.

BorderStyle

Die Stiloptionen für den Rahmen einer Karte oder eines Widgets, einschließlich Rahmentyp und -farbe.

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.

JSON-Darstellung
{
  "type": enum (BorderType),
  "strokeColor": {
    object (Color)
  },
  "cornerRadius": integer
}
Felder
type

enum (BorderType)

Rahmentyp

strokeColor

object (Color)

Die zu verwendenden Farben, wenn der Typ BORDER_TYPE_STROKE ist.

cornerRadius

integer

Der Eckenradius für die Rahmenlinie.

BorderType

Stellt die Rahmentypen dar, die auf Widgets angewendet werden.

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.

Enums
BORDER_TYPE_UNSPECIFIED Nicht verwenden. Nicht angegeben
NO_BORDER Standardwert. Kein Rahmen.
STROKE Gliederung.

GridItemLayout

Die verschiedenen Layoutoptionen, die für ein Rasterelement verfügbar sind.

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.

Enums
GRID_ITEM_LAYOUT_UNSPECIFIED Nicht verwenden. Nicht angegeben
TEXT_BELOW Titel und Untertitel werden unter dem Bild des Rasterelements angezeigt.
TEXT_ABOVE Titel und Untertitel werden über dem Bild des Rasterelements angezeigt.

Spalte

Das Columns-Widget zeigt bis zu zwei Spalten auf einer Karte oder einem Dialogfeld an. Sie können Widgets zu jeder Spalte hinzufügen. Die Widgets werden in der angegebenen Reihenfolge angezeigt. Ein Beispiel in Google Chat-Apps finden Sie unter Spalten.

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.

Spalten werden nebeneinander angezeigt. Mit dem Feld HorizontalSizeStyle lässt sich die Breite der einzelnen Spalten 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 bei einer Bildschirmbreite von maximal 300 pt umgebrochen.
  • Auf Android-Geräten wird die zweite Spalte umgebrochen, wenn die Bildschirmbreite maximal 320 dp beträgt.

Wenn Sie mehr als zwei Spalten einbeziehen oder Zeilen verwenden möchten, verwenden Sie das Grid-Widget.

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons. Spalten für Google Workspace-Add-ons sind in der Entwicklervorschau verfügbar.

JSON-Darstellung
{
  "columnItems": [
    {
      object (Column)
    }
  ]
}
Felder
columnItems[]

object (Column)

Ein Array von Spalten. Sie können einer Karte oder einem Dialogfeld bis zu zwei Spalten hinzufügen.

Spalte

Eine Spalte.

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons. Spalten für Google Workspace-Add-ons sind in der Entwicklervorschau verfügbar.

JSON-Darstellung
{
  "horizontalSizeStyle": enum (HorizontalSizeStyle),
  "horizontalAlignment": enum (HorizontalAlignment),
  "verticalAlignment": enum (VerticalAlignment),
  "widgets": [
    {
      object (Widgets)
    }
  ]
}
Felder
horizontalSizeStyle

enum (HorizontalSizeStyle)

Gibt an, wie eine Spalte die Breite der Karte einnimmt.

horizontalAlignment

enum (HorizontalAlignment)

Gibt an, ob Widgets links, rechts oder mittig in einer Spalte ausgerichtet werden.

verticalAlignment

enum (VerticalAlignment)

Gibt an, ob Widgets am oberen oder unteren Rand oder in der Mitte einer Spalte ausgerichtet werden.

widgets[]

object (Widgets)

Ein Array von Widgets, die in einer Spalte enthalten sind. Widgets werden in der angegebenen Reihenfolge angezeigt.

HorizontalSizeStyle

Gibt an, wie eine Spalte die Breite der Karte einnimmt. Die Breite der einzelnen Spalten hängt sowohl vom HorizontalSizeStyle als auch von der Breite der Widgets in der Spalte ab.

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons. Spalten für Google Workspace-Add-ons sind in der Entwicklervorschau verfügbar.

Enums
HORIZONTAL_SIZE_STYLE_UNSPECIFIED Nicht verwenden. Nicht angegeben
FILL_AVAILABLE_SPACE Standardwert. Die Spalte füllt den verfügbaren Platz aus (bis zu 70% der Breite der Karte). Wenn beide Spalten auf FILL_AVAILABLE_SPACE festgelegt sind, füllt jede Spalte 50% des Raums aus.
FILL_MINIMUM_SPACE Die Spalte füllt so wenig Platz wie möglich und nicht mehr als 30% der Kartenbreite ein.

HorizontalAlignment

Gibt an, ob Widgets links, rechts oder mittig in einer Spalte ausgerichtet werden.

Verfügbar für Google Chat-Apps und nicht für Google Workspace-Add-ons.

Enums
HORIZONTAL_ALIGNMENT_UNSPECIFIED Nicht verwenden. Nicht angegeben
START Standardwert. Richtet Widgets an der Startposition der Spalte aus. Bei linksläufigen Layouts wird das Layout linksbündig ausgerichtet. Bei linksläufigen Layouts wird es rechtsbündig.
CENTER Richtet Widgets an der Mitte der Spalte aus.
END Richtet Widgets an der Endposition der Spalte aus. Bei Layouts mit der Leserichtung von links nach rechts werden Widgets rechtsbündig. Bei linksläufigen Layouts werden Widgets linksbündig ausgerichtet.

VerticalAlignment

Gibt an, ob Widgets am oberen oder unteren Rand oder in der Mitte einer Spalte ausgerichtet werden.

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons. Spalten für Google Workspace-Add-ons sind in der Entwicklervorschau verfügbar.

Enums
VERTICAL_ALIGNMENT_UNSPECIFIED Nicht verwenden. Nicht angegeben
CENTER Standardwert. Richtet Widgets an der Mitte einer Spalte aus.
TOP Richtet Widgets am oberen Rand einer Spalte aus.
BOTTOM Richtet Widgets am unteren Rand einer Spalte aus.

Widgets

Die unterstützten Widgets, die Sie in eine Spalte aufnehmen können.

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons. Spalten für Google Workspace-Add-ons sind in der Entwicklervorschau verfügbar.

JSON-Darstellung
{

  // Union field data can be only one of the following:
  "textParagraph": {
    object (TextParagraph)
  },
  "image": {
    object (Image)
  },
  "decoratedText": {
    object (DecoratedText)
  },
  "buttonList": {
    object (ButtonList)
  },
  "textInput": {
    object (TextInput)
  },
  "selectionInput": {
    object (SelectionInput)
  },
  "dateTimePicker": {
    object (DateTimePicker)
  }
  // End of list of possible types for union field data.
}
Felder

Union-Feld data.

Für data ist nur einer der folgenden Werte zulässig:

textParagraph

object (TextParagraph)

TextParagraph-Widget.

image

object (Image)

Image-Widget.

decoratedText

object (DecoratedText)

DecoratedText-Widget.

buttonList

object (ButtonList)

ButtonList-Widget.

textInput

object (TextInput)

TextInput-Widget.

selectionInput

object (SelectionInput)

SelectionInput-Widget.

dateTimePicker

object (DateTimePicker)

DateTimePicker-Widget.

DividerStyle

Der Trennlinienstil einer Karte. Wird derzeit nur für Trennlinien zwischen Kartenabschnitten verwendet.

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.

Enums
DIVIDER_STYLE_UNSPECIFIED Nicht verwenden. Nicht angegeben
SOLID_DIVIDER Standardoption. Durchgängige Trennlinie zwischen Abschnitten rendern.
NO_DIVIDER Wenn festgelegt, werden keine Trennlinien zwischen Abschnitten gerendert.

CardAction

Eine Kartenaktion ist die mit der Karte verknüpfte Aktion. Eine Rechnungskarte kann beispielsweise Aktionen wie das Löschen einer Rechnung, das Senden einer Rechnung per E-Mail oder das Öffnen der Rechnung in einem Browser enthalten.

Verfügbar für Google Workspace-Add-ons und nicht für Google Chat-Apps.

JSON-Darstellung
{
  "actionLabel": string,
  "onClick": {
    object (OnClick)
  }
}
Felder
actionLabel

string

Das Label, das als Aktionsmenüelement angezeigt wird.

onClick

object (OnClick)

Die Aktion onClick für diese Aufgabe.

CardFixedFooter

Eine fixierte (fixierte) Fußzeile, die unten auf der Karte angezeigt wird.

Wenn Sie fixedFooter ohne Angabe von primaryButton oder secondaryButton festlegen, verursacht dies einen Fehler.

Für Chat-Apps können Sie feste Fußzeilen in Dialogfeldern, aber nicht in Kartennachrichten verwenden. Ein Beispiel in Google Chat-Apps findest du in der Kartenfußzeile.

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.

JSON-Darstellung
{
  "primaryButton": {
    object (Button)
  },
  "secondaryButton": {
    object (Button)
  }
}
Felder
primaryButton

object (Button)

Die Hauptschaltfläche der festen Fußzeile. Die Schaltfläche muss eine Textschaltfläche mit Text- und Farbauswahl sein.

secondaryButton

object (Button)

Die zweite Schaltfläche der festen Fußzeile. Die Schaltfläche muss eine Textschaltfläche mit Text- und Farbauswahl sein. Wenn secondaryButton festgelegt ist, müssen Sie auch primaryButton festlegen.

DisplayStyle

Sie legt in Google Workspace-Add-ons fest, wie eine Karte angezeigt wird.

Verfügbar für Google Workspace-Add-ons und nicht für Google Chat-Apps.

Enums
DISPLAY_STYLE_UNSPECIFIED Nicht verwenden. Nicht angegeben
PEEK Die Kopfzeile der Karte wird unten in der Seitenleiste angezeigt und verdeckt die aktuelle obere Karte des Stapels teilweise. Durch Klicken auf die Kopfzeile wird die Karte im Kartenstapel angezeigt. Wenn die Karte keinen Header hat, wird stattdessen ein generierter Header verwendet.
REPLACE Standardwert. Für die Anzeige der Karte wird die Ansicht der obersten Karte im Kartenstapel ersetzt.