Cards v2

Infokarte

Eine Kartenoberfläche, die in einer Google Chat-Nachricht oder in 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. Mit Karten können Sie detaillierte Informationen präsentieren, Informationen von Nutzern erfassen und Nutzer zu einem nächsten Schritt auffordern.

Mit dem Card Builder Karten entwerfen und eine Vorschau anzeigen

Karten-Builder öffnen

Weitere 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 die folgende JSON-Datei, um die Beispielkarte in Google Chat zu erstellen: 

{
  "cardsV2": [
    {
      "cardId": "unique-card-id",
      "card": {
        "header": {
           "title": "Sasha",
           "subtitle": "Software Engineer",
           "imageUrl":
           "https://developers.google.com/workspace/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 Kopfzeile der Karte. Ein Header enthält in der Regel ein Vorschaubild und einen Titel. Überschriften werden immer oben auf einer Karte angezeigt.

sections[]

object (Section)

Enthält eine Sammlung von Widgets. Jeder Abschnitt hat eine eigene optionale Überschrift. Die Abschnitte sind visuell durch eine Trennlinie voneinander getrennt. Ein Beispiel für Google Chat-Apps finden Sie unter Bereich einer Karte definieren.

sectionDividerStyle

enum (DividerStyle)

Der Stil der Trennlinie zwischen Kopfzeile, Abschnitten und Fußzeile.

cardActions[]

object (CardAction)

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

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

Im folgenden JSON-Code wird beispielsweise ein Kartenaktionsmenü mit den Optionen Settings und Send Feedback erstellt: 

"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 in der Kartennavigation verwendet.

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

displayStyle

enum (DisplayStyle)

Hier legen Sie in Google Workspace Add-ons die Anzeigeeigenschaften der peekCardHeader fest.

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

peekCardHeader

object (CardHeader)

Wenn kontextbezogene Inhalte angezeigt werden, dient die Überschrift der Minikarte als Platzhalter, damit Nutzer zwischen den Startseitenkarten und den kontextbezogenen Karten vor- und zurückwechseln können.

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

CardHeader

Stellt eine Kartenüberschrift dar. Ein Beispiel für Google Chat-Apps finden Sie unter Überschrift hinzufügen.

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 Überschrift hat eine feste Höhe: Wenn sowohl ein Titel als auch ein Untertitel angegeben sind, nimmt jeder eine Zeile ein. Wenn nur der Titel angegeben ist, nimmt er beide Zeilen ein.

subtitle

string

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

imageType

enum (ImageType)

Die Form, mit der das Bild zugeschnitten wird.

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

imageUrl

string

Die HTTPS-URL des Bildes in der Kartenüberschrift.

imageAltText

string

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

ImageType

Die Form, mit der das Bild zugeschnitten wird.

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

Enums
SQUARE Standardwert. Hiermit wird eine quadratische Maske auf das Bild angewendet. Ein Bild mit 4:3 wird beispielsweise zu 3:3.
CIRCLE Wendet eine runde Maske auf das Bild an. Ein 4 × 3-Bild wird beispielsweise zu einem Kreis mit einem Durchmesser von 3.

Abschnitt

Ein Bereich 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,
  "collapseControl": {
    object (CollapseControl)
  }
}
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 Abschnitt minimiert werden kann.

In minimierten Abschnitten sind einige oder alle Widgets ausgeblendet. Nutzer können den Abschnitt maximieren, um die ausgeblendeten Widgets zu sehen, indem sie auf Mehr anzeigen klicken. Nutzer können die Widgets wieder ausblenden, indem sie auf Weniger anzeigen klicken.

Geben Sie uncollapsibleWidgetsCount an, um festzustellen, welche Widgets ausgeblendet sind.

uncollapsibleWidgetsCount

integer

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

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

collapseControl

object (CollapseControl)

Optional. Legen Sie die Schaltfläche zum Maximieren/Minimieren des Bereichs fest. Diese Schaltfläche wird nur angezeigt, wenn der Abschnitt minimiert werden kann. Wenn dieses Feld nicht festgelegt ist, wird die Standardschaltfläche verwendet. Verfügbar für Google Chat-Apps, nicht für Google Workspace-Add-ons.

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)
  },
  "chipList": {
    object (ChipList)
  }
  // End of list of possible types for union field data.
}
Felder
horizontalAlignment

enum (HorizontalAlignment)

Gibt an, ob Widgets links, rechts oder Mitte 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. data darf nur einen der folgenden Werte haben:
textParagraph

object (TextParagraph)

Zeigt einen Textabsatz an. Unterstützt einfachen HTML-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 dem folgenden JSON-Code wird beispielsweise fett formatierter Text erstellt: 

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

object (Image)

Zeigt ein Bild an.

Die folgende JSON-Datei erstellt beispielsweise ein Bild mit alternativem Text: 

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

object (DecoratedText)

Ein Textelement mit Verzierungen.

Mit dem folgenden JSON-Code wird beispielsweise ein dekoriertes Text-Widget mit einer E-Mail-Adresse erstellt: 

"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 von Schaltflächen.

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

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

object (TextInput)

Ein Textfeld, in das Nutzer etwas eingeben können.

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

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

Im folgenden JSON-Beispiel wird eine Texteingabe für eine Programmiersprache mit statischen Vorschlägen erstellt: 

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

object (SelectionInput)

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

Mit dem folgenden JSON-Code wird beispielsweise ein Drop-down-Menü erstellt, über das 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, über 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 zum Planen eines Termins erstellt: 

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

object (Divider)

Zwischen den Widgets wird eine horizontale Trennlinie angezeigt.

Die folgende JSON-Datei erstellt beispielsweise eine Trennlinie: 

"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 der Elemente 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 dem folgenden JSON-Code wird beispielsweise ein Raster mit zwei Spalten und 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 werden bis zu zwei Spalten angezeigt.

Wenn Sie mehr als zwei Spalten 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"
          }
        }
      ]
    }
  ]
}
chipList

object (ChipList)

Eine Liste von Chips.

Mit der folgenden JSON-Datei werden beispielsweise zwei Chips erstellt. Der erste ist ein Text-Chip und der zweite ein Symbol-Chip, der einen Link öffnet: 

"chipList": {
  "chips": [
    {
      "text": "Edit",
      "disabled": true,
    },
    {
      "icon": {
        "knownIcon": "INVITE",
        "altText": "check calendar"
      },
      "onClick": {
        "openLink": {
          "url": "https://example.com/calendar"
        }
      }
    }
  ]
}

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

TextParagraph

Ein Textabsatz, der die Formatierung unterstützt. Ein Beispiel für Google Chat-Apps finden Sie unter Absatz mit formatiertem Text hinzufügen. 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,
  "maxLines": integer
}
Felder
text

string

Der Text, der im Widget angezeigt wird.

maxLines

integer

Die maximale Anzahl von Textzeilen, die im Widget angezeigt werden. Wenn der Text die angegebene maximale Anzahl von Zeilen überschreitet, wird der überschüssige Inhalt hinter der Schaltfläche Mehr anzeigen ausgeblendet. Wenn der Text der angegebenen maximalen Anzahl von Zeilen entspricht oder kürzer ist, wird die Schaltfläche Mehr anzeigen nicht angezeigt.

Der Standardwert ist 0. In diesem Fall wird der gesamte Kontext angezeigt. Negative Werte werden ignoriert. Verfügbar für Google Chat-Apps, nicht für Google Workspace-Add-ons.

Bild

Ein Bild, das durch eine URL angegeben wird und eine onClick-Aktion haben kann. Ein Beispiel finden Sie unter Bild hinzufügen.

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, unter der das Bild gehostet wird.

Beispiel: 

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

object (OnClick)

Wenn ein Nutzer auf das Bild klickt, wird diese Aktion ausgelöst.

altText

string

Der alternative Text dieses Bildes, der als Bedienungshilfe verwendet wird.

OnClick

Gibt an, wie reagiert werden soll, wenn Nutzer auf ein interaktives Element auf einer Karte klicken, z. B. auf 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)
  },
  "overflowMenu": {
    object (OverflowMenu)
  }
  // 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 eine Aktion von diesem onClick ausgelöst.

card

object (Card)

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

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

overflowMenu

object (OverflowMenu)

Wenn angegeben, öffnet dies onClick ein Dreipunkt-Menü. Verfügbar für Google Chat-Apps und nicht für Google Workspace-Add-ons.

Aktion

Eine Aktion, die das Verhalten beim Senden des Formulars beschreibt. Sie können beispielsweise ein Apps Script-Script aufrufen, um das Formular zu verarbeiten. Wenn die Aktion ausgelöst wird, 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),
  "requiredWidgets": [
    string
  ],
  "allWidgetsAreRequired": boolean
}
Felder
function

string

Eine benutzerdefinierte Funktion, die aufgerufen wird, wenn auf das enthaltende Element geklickt oder es anderweitig aktiviert wird.

Ein Beispiel für die Verwendung finden Sie unter Formulardaten lesen.

parameters[]

object (ActionParameter)

Liste der Aktionsparameter.

loadIndicator

enum (LoadIndicator)

Gibt die Fortschrittsanzeige an, die während der Ausführung der Aktion angezeigt wird.

persistValues

boolean

Gibt an, ob Formularwerte nach der Aktion beibehalten werden. Der Standardwert ist false.

Bei true bleiben die Formularwerte bestehen, nachdem die Aktion ausgelöst wurde. Damit der Nutzer Änderungen vornehmen kann, während die Aktion verarbeitet wird, setze LoadIndicator auf NONE. Für Kartennachrichten in Chat-Apps musst du außerdem ResponseType der Aktion auf UPDATE_MESSAGE setzen und dasselbe cardId aus der Karte verwenden, die die Aktion enthält.

Bei false werden die Formularwerte gelöscht, wenn die Aktion ausgelöst wird. Wenn der Nutzer während der Verarbeitung der Aktion keine Änderungen vornehmen soll, legen Sie LoadIndicator auf SPINNER fest.

interaction

enum (Interaction)

Optional. Erforderlich beim Öffnen eines Dialogfelds.

Was soll bei einer Interaktion mit einem Nutzer passieren, z. B. wenn ein Nutzer auf eine Schaltfläche in einer Kartennachricht klickt?

Wird kein Wert angegeben, führt die App wie gewohnt eine action aus, z. B. das Öffnen eines Links oder das Ausführen einer Funktion.

Wenn Sie eine interaction angeben, kann die App auf besondere interaktive Weise reagieren. Wenn Sie beispielsweise interaction auf OPEN_DIALOG festlegen, kann die App ein Dialogfeld öffnen. Wenn diese Option angegeben ist, wird keine Ladeanzeige angezeigt. Wenn dies für ein Add-on angegeben ist, wird die gesamte Karte entfernt und im Client wird nichts angezeigt.

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

requiredWidgets[]

string

Optional. Fügen Sie in diese Liste die Namen der Widgets ein, die für diese Aktion für eine gültige Einreichung erforderlich sind.

Wenn die hier aufgeführten Widgets keinen Wert haben, wenn diese Aktion aufgerufen wird, wird die Formulareinreichung abgebrochen.

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

allWidgetsAreRequired

boolean

Optional. Wenn dies wahr ist, werden alle Widgets von dieser Aktion als erforderlich angesehen.

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

ActionParameter

Liste der Stringparameter, die beim Aufruf der Aktionsmethode angegeben werden müssen. Angenommen, Sie haben drei Schlummertaste: „Jetzt“, „Einen Tag“ und „Nächste Woche“. 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 Aktionsscript.

value

string

Wert des Parameters.

LoadIndicator

Gibt die Fortschrittsanzeige an, die während der Ausführung der Aktion angezeigt wird.

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

Enums
SPINNER Ein rotierendes Ladesymbol wird angezeigt, wenn der Inhalt geladen wird.
NONE Es wird nichts angezeigt.

Interaktion

Optional. Erforderlich, wenn ein Dialogfeld geöffnet wird.

Was soll bei einer Interaktion mit einem Nutzer passieren, z. B. wenn ein Nutzer auf eine Schaltfläche in einer Kartennachricht klickt?

Andernfalls führt die App wie gewohnt eine action aus, z. B. öffnet sie einen Link oder führt eine Funktion aus.

Wenn Sie eine interaction angeben, kann die App auf besondere interaktive Weise reagieren. Wenn Sie beispielsweise interaction auf OPEN_DIALOG festlegen, kann die App ein Dialogfeld öffnen.

Wenn diese Option angegeben ist, wird keine Ladeanzeige angezeigt. Wenn dies für ein Add-on angegeben ist, 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. Die action wird wie gewohnt ausgeführt.
OPEN_DIALOG

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

Wird nur von Chat-Apps unterstützt, wenn auf Schaltflächen in Kartennachrichten geklickt wird. Wenn dies für ein Add-on angegeben ist, wird die gesamte Karte entfernt und im Client wird nichts angezeigt.

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

OpenAs

Wenn durch die Aktion OnClick ein Link geöffnet wird, kann der Client diesen entweder als Fenster in voller Größe (wenn dieser Frame vom Client verwendet wird) oder als Overlay (z. B. ein 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, nicht für Google Chat-Apps.

Enums
FULL_SIZE Der Link wird in einem Fenster in Originalgröße geöffnet, sofern dies der vom Kunden verwendete Frame ist.
OVERLAY Der Link wird als Overlay geöffnet, z. B. als Pop-up.

OnClose

Aktion des Clients, wenn ein durch eine OnClick-Aktion geöffneter Link 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 OnOpen- als auch OnClose-Handler festgelegt sind und die Clientplattform beide Werte nicht unterstützt, hat OnClose Vorrang.

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

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

Die Karte wird nach dem Schließen des untergeordneten Fensters neu geladen.

In Verbindung mit OpenAs.OVERLAY dient das untergeordnete Fenster als modales Dialogfeld und die übergeordnete Karte wird blockiert, bis das untergeordnete Fenster geschlossen wird.

OverflowMenu

Ein Widget, das ein Pop-up-Menü mit einer oder mehreren Aktionen enthält, die Nutzer ausführen können. Beispiel: Anzeige von nicht primären Aktionen in einer Karte. Sie können dieses Widget verwenden, wenn Aktionen nicht in den verfügbaren Bereich passen. Geben Sie dieses Widget in der Aktion OnClick von Widgets an, die es unterstützen. Beispielsweise in einem Button.

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

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

object (OverflowMenuItem)

Erforderlich. Die Liste der Menüoptionen.

OverflowMenuItem

Eine Option, die Nutzer in einem Dreipunkt-Menü aufrufen können.

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

JSON-Darstellung 
{
  "startIcon": {
    object (Icon)
  },
  "text": string,
  "onClick": {
    object (OnClick)
  },
  "disabled": boolean
}
Felder
startIcon

object (Icon)

Das Symbol, das vor dem Text angezeigt wird.

text

string

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

onClick

object (OnClick)

Erforderlich. Die Aktion, die aufgerufen wird, wenn eine Menüoption ausgewählt wird. Diese OnClick darf kein OverflowMenu enthalten. Falls ein OverflowMenu angegeben ist, wird es gelöscht und der Menüpunkt deaktiviert.

disabled

boolean

Ob die Menüoption deaktiviert ist. Die Standardeinstellung ist "false".

Symbol

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

Unterstützt vordefinierte 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. Beschreibung des Symbols für Bedienungshilfen. Wenn keine Vorgabe erfolgt, wird der Standardwert Button angegeben. Als Best Practice sollten Sie eine hilfreiche Beschreibung dafür festlegen, was das Symbol darstellt und gegebenenfalls, was es bewirkt. 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/workspace/chat.

Wenn das Symbol in einem Button festgelegt ist, wird altText als Hilfstext angezeigt, wenn der Nutzer den Mauszeiger auf die Schaltfläche bewegt. Wird über die Schaltfläche außerdem text festgelegt, wird der altText des Symbols ignoriert.

imageType

enum (ImageType)

Der auf das Bild angewendete Zuschnittsstil. In einigen Fällen wird das Bild durch das Zuschneiden mit CIRCLE größer als ein integriertes Symbol dargestellt.

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

string

Eins der von Google Workspace bereitgestellten Symbole anzeigen

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 Vordefinierte Symbole.

iconUrl

string

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

Beispiel: 

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

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

materialIcon

object (MaterialIcon)

Zeigen Sie eines der Google Material-Symbole an.

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

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

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

MaterialIcon

Ein Google Material-Symbol mit über 2.500 Optionen.

Wenn Sie beispielsweise ein Kästchensymbol mit benutzerdefiniertem Gewicht und Bewertung anzeigen möchten, schreiben Sie Folgendes: 

{
  "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 Google Material-Symbol definierte Symbolname, z. B. check_box. Ungültige Namen werden verworfen und durch einen leeren String ersetzt, wodurch das Symbol nicht gerendert wird.

fill

boolean

Gibt an, ob das Symbol als ausgefüllt dargestellt werden soll. Der Standardwert ist "false".

Wenn Sie sich eine Vorschau verschiedener Symboleinstellungen ansehen möchten, rufen Sie Google Fonts-Symbole auf und passen Sie die Einstellungen unter Anpassen an.

weight

integer

Die Strichstärke des Symbols. Wählen Sie {100, 200, 300, 400, 500, 600, 700} aus. Wenn nicht vorhanden, ist der Standardwert 400. Wenn ein anderer Wert angegeben wird, wird der Standardwert verwendet.

Wenn Sie sich eine Vorschau verschiedener Symboleinstellungen ansehen möchten, rufen Sie Google Fonts-Symbole auf und passen Sie die Einstellungen unter Anpassen an.

grade

integer

Gewicht und Grad wirken sich auf die Stärke eines Symbols aus. Anpassungen der Farbtonung sind detaillierter als Anpassungen des Gewichts und haben nur geringe Auswirkungen auf die Größe des Symbols. Wählen Sie eine der folgenden Optionen aus: {-25, 0, 200}. Wenn nicht vorhanden, ist der Standardwert 0. Wenn ein anderer Wert angegeben wird, wird der Standardwert verwendet.

Wenn Sie sich eine Vorschau verschiedener Symboleinstellungen ansehen möchten, rufen Sie Google Fonts-Symbole auf und passen Sie die Einstellungen unter Anpassen an.

DecoratedText

Ein Widget, das Text mit optionalen Verzierungen wie einem Label über oder unter dem Text, einem Symbol vor dem Text, einem Auswahl-Widget oder einer Schaltfläche nach dem Text enthält. Ein Beispiel für Google Chat-Apps finden Sie unter Text mit Zierschrift anzeigen.

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)

Wurde zugunsten von startIcon verworfen.

startIcon

object (Icon)

Das Symbol, das vor dem Text angezeigt wird.

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 Textumbruch. 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. Wird immer umgebrochen.

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, das rechts neben dem Text im decoratedText-Widget angezeigt wird. control darf nur einen der folgenden Werte haben:
button

object (Button)

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

switchControl

object (SwitchControl)

Ein Schalter-Widget, auf das Nutzer klicken können, um den 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.

Schaltfläche

Eine Schaltfläche mit Text, Symbol oder Text und Symbol, auf die Nutzer klicken können. Ein Beispiel für Google Chat-Apps findest du unter Schaltfläche hinzufügen.

Wenn Sie ein Bild in eine anklickbare Schaltfläche verwandeln möchten, geben Sie eine Image (keine ImageComponent) und eine onClick-Aktion an.

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,
  "type": enum (Type)
}
Felder
text

string

Der auf der Schaltfläche angezeigte Text.

icon

object (Icon)

Ein Symbol, das in der Schaltfläche angezeigt wird. Wenn sowohl icon als auch text festgelegt sind, wird das Symbol vor dem Text angezeigt.

color

object (Color)

Optional. Die Farbe der Schaltfläche. Ist dies der Fall, wird die Schaltfläche type auf FILLED gesetzt und die Farbe der Felder text und icon wird zur besseren Lesbarkeit auf eine Kontrastfarbe festgelegt. Wenn die Schaltfläche beispielsweise blau ist, sind alle Texte oder Symbole auf der Schaltfläche weiß.

Gib zum Festlegen der Farbe der Schaltfläche einen Wert für die Felder red, green und blue an. Der Wert muss eine Gleitkommazahl zwischen 0 und 1 sein, die auf dem RGB-Farbwert basiert. Dabei steht 0 (0/255) für das Fehlen von Farbe und 1 (255/255) für die maximale Intensität der Farbe.

Im folgenden Beispiel wird die Farbe beispielsweise auf Rot mit maximaler Intensität festgelegt: 

"color": {
   "red": 1,
   "green": 0,
   "blue": 0,
}

Das Feld alpha ist für die Schaltflächenfarbe nicht verfügbar. Wenn angegeben, wird dieses Feld ignoriert.

onClick

object (OnClick)

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

disabled

boolean

Bei true wird die Schaltfläche in einem inaktiven Zustand angezeigt und reagiert nicht auf Nutzeraktionen.

altText

string

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

Geben Sie einen beschreibenden Text an, der Nutzern mitteilt, wozu die Schaltfläche dient. Wenn durch eine Schaltfläche beispielsweise ein Hyperlink geöffnet wird, könntest du Folgendes schreiben: „Öffnet einen neuen Browsertab und ruft die Google Chat-Entwicklerdokumentation unter https://developers.google.com/workspace/chat&quot; auf.

type

enum (Type)

Optional. Der Typ einer Schaltfläche. Wenn kein Wert festgelegt ist, wird standardmäßig der Schaltflächentyp OUTLINED verwendet. Wenn das Feld color festgelegt ist, wird der Schaltflächentyp auf FILLED festgelegt und alle für dieses Feld festgelegten Werte werden ignoriert.

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

Farbe

Ermöglicht die Darstellung einer Farbe im RGBA-Farbraum. Diese Darstellung ist auf die einfache Konvertierung in und aus Farbdarstellungen in verschiedenen Sprachen statt auf Kompaktheit ausgelegt. Die Felder dieser Darstellung können beispielsweise einfach für den Konstruktor von java.awt.Color in Java bereitgestellt werden. Sie können sie aber auch einfach für die Methode +colorWithRed:green:blue:alpha von UIColor in iOS bereitstellen und mit wenig Aufwand 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. Anwendungen sollten standardmäßig den Farbraum sRGB verwenden.

Wenn entschieden werden muss, ob zwei Farben gleich sind, behandeln Implementierungen, sofern nicht anders dokumentiert, zwei Farben als gleich, wenn sich alle Rot-, Grün-, Blau- und Alphawerte 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. Wenn nicht angegeben, wird das Farbobjekt als Volltonfarbe dargestellt (als ob für den Alphawert explizit 1,0 angegeben worden wäre).

Typ

Optional. Der Typ einer Schaltfläche. Wenn das Feld color festgelegt ist, wird type auf FILLED gesetzt.

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

Enums
TYPE_UNSPECIFIED Nicht verwenden. Nicht angegeben
OUTLINED Umrissene Schaltflächen sind Schaltflächen mit mittlerer Betonung. Sie enthalten in der Regel Aktionen, die wichtig sind, aber nicht die Hauptaktion in einer Chat-App oder einem Add-on sind.
FILLED Eine ausgefüllte Schaltfläche hat einen Container mit einer durchgehenden Farbe. Sie hat die größte visuelle Wirkung und wird für die wichtige und primäre Aktion in einer Chat-App oder einem Add-on empfohlen.
FILLED_TONAL Eine gefüllte Schaltfläche mit Farbton ist ein Mittelweg zwischen gefüllten und umrandeten Schaltflächen. Sie eignen sich in Situationen, in denen eine Schaltfläche mit niedrigerer Priorität etwas stärker hervorgehoben werden muss als bei einer Schaltfläche mit Umriss.
BORDERLESS Im Standardzustand hat eine Schaltfläche keinen unsichtbaren Container. Sie wird häufig für Aktionen mit der niedrigsten Priorität verwendet, insbesondere wenn mehrere Optionen angezeigt werden.

SwitchControl

Entweder ein Schalter 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, mit dem das Schalter-Widget in einem Ereignis für die Formulareingabe identifiziert wird.

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

value

string

Der von einem Nutzer eingegebene Wert, der als Teil eines Formulareingabeereignisses zurückgegeben wird.

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

selected

boolean

Wenn true angezeigt wird, ist der Schalter ausgewählt.

onChangeAction

object (Action)

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

controlType

enum (ControlType)

Wie der Schalter in der Benutzeroberfläche angezeigt wird.

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

ControlType

Wie der Schalter in der Benutzeroberfläche angezeigt wird.

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

Enums
SWITCH Ein Schalter im Ein-/Aus-Modus.
CHECKBOX Wurde zugunsten von CHECK_BOX verworfen.
CHECK_BOX Ein Kästchen.

ButtonList

Eine horizontal angeordnete Liste von Schaltflächen. Ein Beispiel für Google Chat-Apps findest du unter Schaltfläche hinzufügen.

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

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

object (Button)

Mehrere Schaltflächen

TextInput

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

Chat-Apps empfangen den Wert des eingegebenen Texts während Formulareingabeereignissen und können ihn verarbeiten. Weitere Informationen zum Arbeiten mit Formularinputs finden Sie unter Formulardaten empfangen.

Wenn Sie nicht definierte oder abstrakte Daten von Nutzern erheben möchten, verwenden Sie eine Texteingabe. Wenn Sie definierte oder aufgezählte Daten von Nutzern erheben möchten, verwenden Sie das SelectionInput-Widget.

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)
  },
  "validation": {
    object (Validation)
  },
  "placeholderText": string
}
Felder
name

string

Der Name, mit dem 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 an, der den Nutzern hilft, die für Ihre App erforderlichen Informationen einzugeben. Wenn Sie beispielsweise nach dem Namen einer Person fragen, aber nur den Nachnamen benötigen, schreiben Sie surname anstelle von name.

Erforderlich, wenn hintText nicht angegeben ist. Andernfalls optional.

hintText

string

Text, der unter dem Texteingabefeld erscheint und Nutzer auffordern soll, einen bestimmten Wert einzugeben. Dieser Text ist immer sichtbar.

Erforderlich, wenn label nicht angegeben ist. Andernfalls optional.

value

string

Der von einem Nutzer eingegebene Wert, der als Teil eines Formulareingabeereignisses zurückgegeben wird.

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

type

enum (Type)

Wie ein Texteingabefeld in der Benutzeroberfläche angezeigt wird. Beispielsweise, ob es sich um ein einzelnes oder ein mehrzeiliges Feld handelt.

onChangeAction

object (Action)

Was passiert, wenn sich etwas im Textfeld ändert? Beispiel: Ein Nutzer fügt dem Feld Text hinzu oder löscht Text.

Beispiele für 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 Nutzer in das Textfeld klicken. Während Nutzer etwas eingeben, werden die vorgeschlagenen Werte dynamisch gefiltert, um den eingegebenen Text zu berücksichtigen.

Ein Texteingabefeld für Programmiersprachen könnte beispielsweise Java, JavaScript, Python und C++ vorschlagen. Wenn Nutzer mit der Eingabe von Jav beginnen, werden in der Liste der Vorschläge nur Java und JavaScript angezeigt.

Vorgeschlagene Werte helfen Nutzern, Werte einzugeben, die Ihre App verarbeiten kann. Wenn auf JavaScript verwiesen wird, geben einige Nutzer möglicherweise javascript und andere java script ein. Wenn Sie JavaScript vorschlagen, können Sie die Interaktionen der Nutzer mit Ihrer App standardisieren.

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 Textfeld Vorschläge für Nutzer bereitstellt, die damit interagieren.

Wenn kein Wert angegeben ist, 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, nicht für Google Chat-Apps.

validation

object (Validation)

Geben Sie die für dieses Textfeld erforderliche Validierung an.

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

placeholderText

string

Text, der im Textfeld angezeigt wird, wenn es leer ist. Mit diesem Text werden Nutzer aufgefordert, einen Wert einzugeben. Beispiel: Enter a number from 0 to 100.

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

Typ

Wie ein Texteingabefeld in der Benutzeroberfläche angezeigt wird. Das kann beispielsweise ein einzeiliges Eingabefeld oder eine mehrzeilige Eingabe sein. Wenn initialSuggestions angegeben ist, ist type immer SINGLE_LINE, auch wenn es auf 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 Anweisungen zum Rendern, die einer Karte oder der Add-on-Host-App oder der Chat-App vorgeben, 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 pushen oder aktualisieren

Dem Stapel eine neue Karte hinzufügen (vorwärts springen). Bei Chat-Apps nur für den Startbildschirm der App verfügbar.

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

navigations: {
  pushCard: CARD
}

Ersetzen Sie die oberste Karte durch eine neue. Bei Chat-Apps nur für den Startbildschirm der App verfügbar.

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

navigations: {
  updateCard: CARD
}

Vorschläge

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

In einem Texteingabefeld für Programmiersprachen werden beispielsweise Java, JavaScript, Python und C++ vorgeschlagen. Wenn Nutzer mit der Eingabe von Jav beginnen, werden in der Liste der Vorschläge nur Java und JavaScript angezeigt.

Vorgeschlagene Werte helfen Nutzern, Werte einzugeben, die für Ihre App sinnvoll sind. Wenn es um JavaScript geht, geben einige Nutzer möglicherweise javascript und andere java script ein. Wenn Sie JavaScript vorschlagen, können Sie die Interaktion der Nutzer mit Ihrer App standardisieren.

Wenn dieses Flag angegeben ist, ist TextInput.type immer SINGLE_LINE, auch wenn es auf MULTIPLE_LINE gesetzt ist.

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

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

object (SuggestionItem)

Eine Liste mit Vorschlägen, die für Empfehlungen zur automatischen Vervollständigung in Texteingabefeldern verwendet werden.

SuggestionItem

Ein vorgeschlagener Wert, den Nutzer 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.

content darf nur einen der folgenden Werte haben:

text

string

Der Wert einer vorgeschlagenen Eingabe in ein Texteingabefeld. Das entspricht dem, was Nutzer selbst eingeben.

Validierung

Stellt die erforderlichen Daten für die Validierung des Widgets dar, mit dem es verknüpft ist.

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

JSON-Darstellung 
{
  "characterLimit": integer,
  "inputType": enum (InputType)
}
Felder
characterLimit

integer

Geben Sie die Zeichenbeschränkung für Widgets für die Texteingabe an. Hinweis: Diese Option wird nur für die Texteingabe verwendet und bei anderen Widgets ignoriert.

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

inputType

enum (InputType)

Geben Sie den Typ der Eingabe-Widgets an.

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

InputType

Der Typ des Eingabe-Widgets.

Enums
INPUT_TYPE_UNSPECIFIED Nicht definierter Typ. Nicht verwenden.
TEXT Normaler Text, der alle Zeichen akzeptiert.
INTEGER Ein Ganzzahlwert.
FLOAT Ein Gleitkommawert.
EMAIL Eine E-Mail-Adresse.
EMOJI_PICKER Ein Emoji, das aus der vom System bereitgestellten Emoji-Auswahl ausgewählt wurde.

SelectionInput

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

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

Wenn Sie nicht definierte oder abstrakte Daten von Nutzern erheben möchten, verwenden Sie das TextInput-Widget.

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,
  "validation": {
    object (Validation)
  },

  // 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

Erforderlich. Der Name, der die Auswahleingabe in einem Formulareingabeereignis identifiziert.

Weitere Informationen zum Arbeiten mit Formularinputs 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 an, der den Nutzern hilft, die für Ihre App erforderlichen Informationen einzugeben. Wenn Nutzer beispielsweise die Dringlichkeit eines geschäftlichen Tickets aus einem Drop-down-Menü auswählen, kann das Label „Dringlichkeit“ oder „Dringlichkeit auswählen“ lauten.

type

enum (SelectionType)

Die Art der Elemente, die Nutzern in einem SelectionInput-Widget angezeigt werden. Auswahltypen unterstützen verschiedene Arten von Interaktionen. Nutzer können beispielsweise ein oder mehrere Kästchen auswählen, aber nur einen Wert aus einem Drop-down-Menü auswählen.

items[]

object (SelectionItem)

Ein Array mit auswählbaren Elementen. Beispiel: ein Array von Optionsfeldern oder Kästchen. Es werden bis zu 100 Elemente unterstützt.

onChangeAction

object (Action)

Wenn Sie diese Option aktivieren, wird das Formular gesendet, wenn sich die Auswahl ändert. Wenn nicht angegeben, musst du eine separate Schaltfläche zum Senden des Formulars angeben.

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

multiSelectMaxSelectedItems

integer

Bei Menüs mit Mehrfachauswahl die maximale Anzahl von Elementen, die ein Nutzer auswählen kann. Der Mindestwert beträgt 1 Element. Wenn keine Angabe erfolgt, wird standardmäßig „3 Elemente“ verwendet.

multiSelectMinQueryLength

integer

Bei Menüs mit Mehrfachauswahl ist dies die Anzahl der Textzeichen, die ein Nutzer eingibt, bevor das Menü Vorschläge für Auswahlelemente zurückgibt.

Wenn Sie diese Option nicht festlegen, werden für das Mehrfachauswahlmenü die folgenden Standardwerte verwendet:

  • Wenn das Menü ein statisches Array von SelectionInput-Elementen verwendet, wird standardmäßig „0“ als Zeichenanzahl festgelegt und die Elemente werden sofort aus dem Array übernommen.
  • Wenn für das Menü eine dynamische Datenquelle (multi_select_data_source) verwendet wird, werden standardmäßig drei Zeichen eingegeben, bevor die Datenquelle abgefragt wird, um Vorschläge zurückzugeben.
validation

object (Validation)

Für Drop-down-Menüs die Validierung für dieses Auswahleingabefeld.

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

Union-Feld multi_select_data_source. Für ein Mehrfachauswahlmenü eine Datenquelle, die Auswahlelemente dynamisch ausfüllt.

Verfügbar für Google Chat-Apps, nicht für Google Workspace-Add-ons. multi_select_data_source darf nur einen der folgenden Werte haben:

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. Unterschiedliche Optionen unterstützen unterschiedliche Arten von Interaktionen. So können Nutzer beispielsweise mehrere Kästchen anklicken, aber nur ein Element aus einem Drop-down-Menü auswählen.

Jede Auswahleingabe unterstützt eine Art von Auswahl. Das Mischen von Kästchen und Schaltern wird beispielsweise nicht unterstützt.

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

Enums
CHECK_BOX Mehrere Kästchen. Nutzer können ein oder mehrere Kästchen anklicken.
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 Artikel aus dem Menü auswählen.
MULTI_SELECT

Ein Menü mit einem Textfeld. Nutzer können eine oder mehrere Elemente eingeben und auswählen.

Für Google Workspace-Add-ons müssen Sie Elemente mit einem statischen Array von SelectionItem-Objekten füllen.

Bei Google Chat-Apps können Sie Elemente auch mit einer dynamischen Datenquelle füllen und automatisch Vorschläge machen, während Nutzer im Menü tippen. Wenn Nutzer beispielsweise den Namen eines Google Chat-Bereichs eingeben, wird dieser automatisch vom Widget vorgeschlagen. Verwenden Sie eine der folgenden Datenquellen, um Elemente für ein Mehrfachauswahlmenü dynamisch einzufügen:

  • Google Workspace-Daten: Elemente werden anhand von Daten aus Google Workspace gefüllt, z. B. aus Google Workspace-Nutzern oder Google Chat-Gruppenbereichen.
  • Externe Daten: Elemente werden aus einer externen Datenquelle außerhalb von Google Workspace eingefügt.

Beispiele für die Implementierung von Mehrfachauswahlmenüs für Chat-Apps finden Sie unter Mehrfachauswahlmenü hinzufügen.

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

SelectionItem

Ein Element, das Nutzer in einer Auswahleingabe auswählen können, z. B. ein Kästchen oder ein Schalter. Es werden bis zu 100 Elemente unterstützt.

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 Nutzer identifiziert oder beschreibt.

value

string

Der mit diesem Element verknüpfte Wert. Der Kunde sollte diesen Wert als Formulareingabe verwenden.

Weitere Informationen zum Arbeiten mit Formularinputs 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 zulässig ist (z. B. bei Optionsfeldern oder Drop-down-Menüs), legen Sie dieses Feld nur für einen Artikel fest.

startIconUri

string

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

bottomText

string

Bei Menüs mit mehreren Auswahlmöglichkeiten: Textbeschreibung oder Label, das unter dem text-Feld des Artikels angezeigt wird.

PlatformDataSource

Für ein SelectionInput-Widget mit einem Mehrfachauswahlmenü eine Datenquelle aus Google Workspace. Wird verwendet, um Elemente in einem Menü mit Mehrfachauswahl einzufügen.

Verfügbar für Google Chat-Apps, 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. data_source darf nur einen der folgenden Werte haben:
commonDataSource

enum (CommonDataSource)

Eine Datenquelle, die von allen Google Workspace-Anwendungen gemeinsam genutzt wird, z. B. Nutzer in einer Google Workspace-Organisation.

hostAppDataSource

object (HostAppDataSourceMarkup)

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

Dieses Feld wird von den Google API-Clientbibliotheken unterstützt, ist aber in den Cloud-Clientbibliotheken nicht verfügbar. Weitere Informationen finden Sie unter Clientbibliotheken installieren.

CommonDataSource

Eine Datenquelle, die von allen Google Workspace-Anwendungen gemeinsam genutzt wird.

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

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

HostAppDataSourceMarkup

Für ein SelectionInput-Widget mit einem Mehrfachauswahlmenü ist eine Datenquelle aus einer Google Workspace-Anwendung erforderlich. Die Datenquelle füllt die Auswahlelemente für das Mehrfachauswahl-Menü mit Daten.

Verfügbar für Google Chat-Apps, 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, mit der Elemente für ein Mehrfachauswahlmenü ausgefüllt werden. data_source darf nur einen der folgenden Werte haben:
chatDataSource

object (ChatClientDataSourceMarkup)

Eine Datenquelle aus Google Chat.

ChatClientDataSourceMarkup

Bei einem SelectionInput-Widget, das ein Mehrfachauswahl-Menü verwendet, eine Datenquelle aus Google Chat. Die Datenquelle füllt die Auswahlelemente für das Mehrfachauswahl-Menü mit Daten. Ein Nutzer kann beispielsweise Google Chat-Gruppenbereiche auswählen, in denen er Mitglied ist.

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. source darf nur einen der folgenden Werte haben:
spaceDataSource

object (SpaceDataSource)

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

SpaceDataSource

Eine Datenquelle, die Google Chat-Gruppenbereiche als Auswahlelemente für ein Mehrfachauswahlmenü enthält. Es werden nur Gruppenbereiche angezeigt, in denen der Nutzer Mitglied ist.

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

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

boolean

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

DateTimePicker

Damit können Nutzer ein Datum, eine Uhrzeit oder beides eingeben. Ein Beispiel für Google Chat-Apps findest du unter Nutzer dürfen Datum und Uhrzeit auswählen.

Nutzer können Text eingeben oder die Auswahl verwenden, um Datum und Uhrzeit auszuwählen. Wenn Nutzer ein ungültiges Datum oder eine ungültige Uhrzeit eingeben, wird in der Auswahl eine Fehlermeldung angezeigt, in der sie aufgefordert werden, die Informationen korrekt 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)
  },
  "validation": {
    object (Validation)
  }
}
Felder
name

string

Der Name, mit dem die DateTimePicker in einem Ereignis für Formulareingaben identifiziert wird.

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

label

string

Der Text, in dem Nutzer aufgefordert werden, ein Datum, eine Uhrzeit oder ein Datum und eine Uhrzeit einzugeben. Wenn Nutzer beispielsweise einen Termin planen, verwenden Sie ein Label wie Appointment date oder Appointment date and time.

type

enum (DateTimePickerType)

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

valueMsEpoch

string (int64 format)

Der im Widget angezeigte Standardwert in Millisekunden seit der Unix-Epochenzeit.

Geben Sie den Wert entsprechend dem Typ der Auswahl an (DateTimePickerType):

  • DATE_AND_TIME : ein Kalenderdatum und eine Uhrzeit in UTC. Verwenden Sie beispielsweise 1672574400000, um den 1. Januar 2023 um 12:00 Uhr UTC darzustellen.
  • DATE_ONLY : ein Kalenderdatum um 00:00:00 Uhr (UTC). Verwenden Sie beispielsweise 1672531200000, um den 1. Januar 2023 darzustellen.
  • TIME_ONLY: eine Zeit in UTC. Verwenden Sie beispielsweise 43200000 (oder 12 * 60 * 60 * 1000), um 12:00 Uhr anzugeben.
timezoneOffsetDate

integer

Die Zahl, die den Zeitzonen-Unterschied zu UTC in Minuten angibt. Wenn diese Option festgelegt ist, wird valueMsEpoch in der angegebenen Zeitzone angezeigt. Wenn kein Wert festgelegt ist, wird standardmäßig die Zeitzoneneinstellung des Nutzers verwendet.

onChangeAction

object (Action)

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

validation

object (Validation)

Optional. Geben Sie die für diese Datumsauswahl erforderliche Validierung an.

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

DateTimePickerType

Das Format für Datum und Uhrzeit im DateTimePicker-Widget. Hiermit wird festgelegt, 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 ein Datum und eine Uhrzeit ein.
DATE_ONLY Nutzer geben ein Datum ein.
TIME_ONLY Nutzer geben eine Uhrzeit ein.

Trennlinie

Dieser Typ hat keine Felder.

Eine Trennlinie zwischen Widgets wird als horizontale Linie angezeigt. Ein Beispiel für Google Chat-Apps finden Sie unter Horizontalen Trennstrich zwischen Widgets hinzufügen.

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

Mit dem folgenden JSON-Code wird beispielsweise ein Trennstrich erstellt: 

"divider": {}

Raster

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 nur Text oder Bilder einfügen möchten. Ein Beispiel für Google Chat-Apps finden Sie unter Raster mit einer Sammlung von Elementen anzeigen.

Ein Raster unterstützt eine beliebige Anzahl von Spalten und Elementen. Die Anzahl der Zeilen ergibt sich aus der 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.

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

Mit dem folgenden JSON-Code wird beispielsweise ein Raster mit zwei Spalten und 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 die einzelnen Rasterelemente 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 unterscheidet sich je nachdem, wo das Raster angezeigt wird (Dialogfeld oder Companion).

onClick

object (OnClick)

Dieser Callback wird von jedem einzelnen Rasterelement wiederverwendet, wobei jedoch die Kennung und der Index des Elements in der Elementliste den Parametern des Callbacks hinzugefügt werden.

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 vom Nutzer angegebene 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

Der Titel des Rasterelements.

subtitle

string

Der 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 Zuschnittsstil, der auf das Bild angewendet werden soll.

borderStyle

object (BorderStyle)

Der Rahmenstil, der auf das Bild angewendet werden soll.

ImageCropStyle

Der Zuschnittsstil, 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 Zuschneidetyp.

aspectRatio

number

Das Seitenverhältnis, das verwendet werden soll, wenn der Zuschnittstyp RECTANGLE_CUSTOM ist.

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

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

ImageCropType

Der Zuschnittsstil, 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. Hiermit wird ein quadratischer Zuschnitt angewendet.
CIRCLE Macht einen kreisförmigen Schnitt.
RECTANGLE_CUSTOM Wählt ein rechteckiges Zuschneiden mit einem benutzerdefinierten Seitenverhältnis aus. Legen Sie das benutzerdefinierte Seitenverhältnis mit aspectRatio fest.
RECTANGLE_4_3 schneidet einen rechteckigen Ausschnitt mit einem Seitenverhältnis von 4:3 zu.

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)

Der Rahmentyp.

strokeColor

object (Color)

Die Farben, die verwendet werden sollen, wenn der Typ BORDER_TYPE_STROKE ist.

Geben Sie zum Festlegen der Strichfarbe einen Wert für die Felder red, green und blue an. Der Wert muss eine Gleitkommazahl zwischen 0 und 1 sein, die auf dem RGB-Farbwert basiert. Dabei steht 0 (0/255) für das Fehlen von Farbe und 1 (255/255) für die maximale Intensität der Farbe.

Das folgende Beispiel legt die Farbe bei maximaler Intensität auf Rot fest: 

"color": {
   "red": 1,
   "green": 0,
   "blue": 0,
}

Das Feld alpha ist für die Strichfarbe nicht verfügbar. Wenn angegeben, wird dieses Feld ignoriert.

cornerRadius

integer

Der Eckenradius für den Rahmen.

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

Stellt die verschiedenen Layoutoptionen dar, 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.

Spalten

Im Columns-Widget können bis zu zwei Spalten in einer Karte oder einem Dialogfeld angezeigt werden. Sie können jeder Spalte Widgets hinzufügen. Die Widgets werden in der Reihenfolge angezeigt, in der sie angegeben sind. Ein Beispiel für Google Chat-Apps finden Sie unter Karten und Dialogfelder in Spalten anzeigen.

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.

Die Spalten werden nebeneinander angezeigt. Mit dem Feld HorizontalSizeStyle können Sie die Breite jeder Spalte 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 300 pt oder weniger beträgt.
  • Auf Android-Geräten wird die zweite Spalte umgebrochen, wenn die Bildschirmbreite 320 dp nicht überschreitet.

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

Verfügbar für Google Chat-Apps und Google Workspace-Add-ons. Zu den Add-on-UIs, die Spalten unterstützen, gehören:

  • Das Dialogfeld, das angezeigt wird, wenn Nutzer das Add-on über einen E-Mail-Entwurf öffnen.
  • Das Dialogfeld, das angezeigt wird, wenn Nutzer das Add-on über das Menü Anhang hinzufügen in einem Google Kalender-Termin öffnen.
JSON-Darstellung 
{
  "columnItems": [
    {
      object (Column)
    }
  ]
}
Felder
columnItems[]

object (Column)

Ein Array von Spalten. Eine Karte oder ein Dialogfeld kann bis zu zwei Spalten enthalten.

Spalte

Spalte

Google Workspace-Add-ons und Chat-Apps

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 oben, unten oder in der Mitte einer Spalte ausgerichtet werden.

widgets[]

object (Widgets)

Ein Array von Widgets in einer Spalte. Widgets werden in der Reihenfolge angezeigt, in der sie angegeben sind.

HorizontalSizeStyle

Gibt an, wie eine Spalte die Breite der Karte ausfüllt. Die Breite jeder Spalte hängt sowohl von der HorizontalSizeStyle als auch von der Breite der Widgets in der Spalte ab.

Google Workspace-Add-ons und Chat-Apps

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 gesetzt sind, nimmt jede Spalte 50 % des Platzes ein.
FILL_MINIMUM_SPACE Die Spalte füllt den geringsten Platz aus und nicht mehr als 30% der Kartenbreite.

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. Wird bei rechtsläufigen Layouts linksbündig ausgerichtet. Bei Layouts, die von rechts nach links gelesen werden, wird die Ausrichtung nach rechts festgelegt.
CENTER Widgets werden in der Mitte der Spalte ausgerichtet.
END Widgets werden an der Endposition der Spalte ausgerichtet. Bei Layouts, die von links nach rechts ausgerichtet sind, werden Widgets rechts ausgerichtet. Bei Layouts, die von rechts nach links gelesen werden, werden Widgets links ausgerichtet.

VerticalAlignment

Gibt an, ob Widgets oben, unten oder in der Mitte einer Spalte ausgerichtet werden.

Google Workspace-Add-ons und Chat-Apps

Enums
VERTICAL_ALIGNMENT_UNSPECIFIED Nicht verwenden. Nicht angegeben
CENTER Standardwert. Widgets werden in der Mitte einer Spalte ausgerichtet.
TOP Widgets werden oben in einer Spalte ausgerichtet.
BOTTOM Richtet Widgets am unteren Rand einer Spalte aus.

Widgets

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

Google Workspace-Add-ons und Chat-Apps

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)
  },
  "chipList": {
    object (ChipList)
  }
  // End of list of possible types for union field data.
}
Felder

Union-Feld data.

data darf nur einen der folgenden Werte haben:

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.

chipList

object (ChipList)

ChipList Widget. Verfügbar für Google Chat-Apps, nicht für Google Workspace-Add-ons.

ChipList

Eine horizontal angeordnete Liste von Chips, die entweder horizontal gescrollt oder auf die nächste Zeile umgebrochen werden kann.

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

JSON-Darstellung 
{
  "layout": enum (Layout),
  "chips": [
    {
      object (Chip)
    }
  ]
}
Felder
layout

enum (Layout)

Angegebenes Layout der Chipliste.

chips[]

object (Chip)

Ein Array von Chips.

Layout

Das Layout der Chipliste.

Enums
LAYOUT_UNSPECIFIED Nicht verwenden. Nicht angegeben
WRAPPED Standardwert. Wenn nicht genügend horizontaler Platz vorhanden ist, wird die Chipliste in die nächste Zeile umgebrochen.
HORIZONTAL_SCROLLABLE Die Chips werden horizontal gescrollt, wenn sie nicht in den verfügbaren Bereich passen.

Chip

Ein Chip mit Text, Symbol oder Text und Symbol, auf den Nutzer klicken können.

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

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

object (Icon)

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

label

string

Der Text, der im Chip angezeigt wird.

onClick

object (OnClick)

Optional. Die Aktion, die ausgeführt werden soll, wenn ein Nutzer auf den Chip klickt, z. B. das Öffnen eines Hyperlinks oder das Ausführen einer benutzerdefinierten Funktion.

enabled
(deprecated)

boolean

Gibt an, ob sich der Chip in einem aktiven Zustand befindet und auf Nutzeraktionen reagiert. Die Standardeinstellung ist true. Verworfen. Verwenden Sie stattdessen disabled.

disabled

boolean

Gibt an, ob sich der Chip in einem inaktiven Zustand befindet und Nutzeraktionen ignoriert. Die Standardeinstellung ist false.

altText

string

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

Legen Sie einen beschreibenden Text fest, der Nutzer über die Funktion des Chips informiert. Wenn ein Chip beispielsweise einen Hyperlink öffnet, schreiben Sie: „Öffnet einen neuen Browsertab und wechselt zur Google Chat-Entwicklerdokumentation unter https://developers.google.com/workspace/chat".

CollapseControl

Stellt ein Steuerelement zum Maximieren und Minimieren dar. Verfügbar für Google Chat-Apps, nicht für Google Workspace-Add-ons.

JSON-Darstellung 
{
  "horizontalAlignment": enum (HorizontalAlignment),
  "expandButton": {
    object (Button)
  },
  "collapseButton": {
    object (Button)
  }
}
Felder
horizontalAlignment

enum (HorizontalAlignment)

Die horizontale Ausrichtung der Schaltfläche zum Maximieren/Minimieren.

expandButton

object (Button)

Optional. Definieren Sie eine benutzerdefinierte Schaltfläche, um den Bereich zu maximieren. Es muss sowohl das Feld "expandButton" als auch das Feld "collapsbutton" festgelegt werden. Nur ein Feldsatz wird nicht wirksam. Ist dieses Feld nicht festgelegt, wird die Standardschaltfläche verwendet.

collapseButton

object (Button)

Optional. Definieren Sie eine benutzerdefinierte Schaltfläche, um den Bereich zu minimieren. Sowohl das Feld „expandButton“ als auch das Feld „collapseButton“ müssen festgelegt sein. Nur ein Feldsatz wird nicht übernommen. Ist dieses Feld nicht festgelegt, wird die Standardschaltfläche verwendet.

DividerStyle

Der Trennstil 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. Einen durchgehenden Trennstrich rendern
NO_DIVIDER Wenn diese Option festgelegt ist, wird kein Trennstrich gerendert. Bei diesem Stil wird die Trennlinie vollständig aus dem Layout entfernt. Das Ergebnis ist dasselbe, wenn gar keine Trennlinie hinzugefügt wird.

CardAction

Eine Kartenaktion ist die Aktion, die mit der Karte verknüpft ist. Eine Rechnungskarte kann beispielsweise Aktionen wie „Rechnung löschen“, „Rechnung per E-Mail senden“ oder „Rechnung in einem Browser öffnen“ 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 Menüpunkt für die Aktion angezeigt wird.

onClick

object (OnClick)

Die onClick-Aktion für dieses Aufgabenelement.

CardFixedFooter

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

Wenn Sie fixedFooter festlegen, ohne primaryButton oder secondaryButton anzugeben, tritt ein Fehler auf.

In Chat-Apps können Sie feste Fußzeilen in Dialogfeldern, aber nicht in Kartennachrichten verwenden. Ein Beispiel für Google Chat-Apps finden Sie unter Eine dauerhafte Fußzeile hinzufügen.

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 primäre Schaltfläche der fixen Fußzeile. Die Schaltfläche muss eine Textschaltfläche mit Text und Farbe sein.

secondaryButton

object (Button)

Die sekundäre Schaltfläche der fixen Fußzeile. Die Schaltfläche muss eine Textschaltfläche mit Text und Farbe sein. Wenn secondaryButton festgelegt ist, müssen Sie auch primaryButton festlegen.

DisplayStyle

In Google Workspace-Add-ons wird damit festgelegt, wie eine Karte angezeigt wird.

Verfügbar für Google Workspace-Add-ons, 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 deckt teilweise die aktuell oberste Karte des Stapels ab. Wenn Sie auf die Überschrift klicken, wird die Karte in den Kartenstapel eingefügt. Wenn die Karte keinen Header hat, wird stattdessen ein generierter Header verwendet.
REPLACE Standardwert. Die Karte wird angezeigt, indem die Ansicht der obersten Karte im Kartenstapel ersetzt wird.