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:
- Informationen zu Google Chat-Apps finden Sie unter Komponenten einer Karte oder eines Dialogfelds entwerfen.
- Informationen zu Google Workspace-Add-ons findest du unter Kartenbasierte Oberflächen.
Beispiel: Kartennachricht für eine Google Chat-App
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/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 ( |
Felder | |
---|---|
header
|
Die Überschrift der Karte. Eine Kopfzeile enthält normalerweise ein einleitendes Bild und einen Titel. Überschriften werden immer oben auf einer Karte angezeigt. |
sections[]
|
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 finden Sie unter Abschnitt einer Karte definieren. |
sectionDividerStyle
|
Der Trennungsstil zwischen Abschnitten. |
cardActions[]
|
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
|
name
|
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. |
fixedFooter
|
Die fixierte Fußzeile, die unten auf der Karte angezeigt wird
Wenn Sie Verfügbar für Google Chat-Apps und Google Workspace-Add-ons. |
displayStyle
|
In Google Workspace-Add-ons werden die Anzeigeeigenschaften von Verfügbar für Google Workspace-Add-ons und nicht für Google Chat-Apps. |
peekCardHeader
|
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 finden Sie unter Header hinzufügen.
Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.
JSON-Darstellung |
---|
{
"title": string,
"subtitle": string,
"imageType": enum (
|
Felder | |
---|---|
title
|
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
|
Der Untertitel der Kartenüberschrift. Falls angegeben, wird es in einer eigenen Zeile unter dem |
imageType
|
Die Form, die zum Zuschneiden des Bildes verwendet wird. Verfügbar für Google Chat-Apps und Google Workspace-Add-ons. |
imageUrl
|
Die HTTPS-URL des Bildes in der Kopfzeile der Karte. |
imageAltText
|
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 (
|
Felder | |
---|---|
header
|
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[]
|
Alle Widgets im Abschnitt. Muss mindestens ein Widget enthalten. |
collapsible
|
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
|
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 |
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 ( |
Felder | |
---|---|
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
|
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:
|
image
|
Zeigt ein Bild an. Mit der folgenden JSON-Datei wird beispielsweise ein Bild mit alternativem Text erstellt:
|
decoratedText
|
Zeigt ein dekoriertes Textelement an. Mit der folgenden JSON-Datei wird beispielsweise ein dekoriertes Text-Widget erstellt, das die E-Mail-Adresse anzeigt:
|
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:
|
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:
Als weiteres Beispiel erstellt die folgende JSON-Datei eine Texteingabe für eine Programmiersprache mit statischen Vorschlägen:
|
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:
|
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:
|
divider
|
Trennt Widgets durch eine horizontale Linie. Mit der folgenden JSON-Datei wird beispielsweise eine Trennlinie erstellt:
|
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:
|
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 Mit der folgenden JSON-Datei werden beispielsweise zwei Spalten erstellt, die jeweils Textabsätze enthalten:
|
TextParagraph
Ein Absatz mit Text, der Formatierung unterstützt. Ein Beispiel in 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 } |
Felder | |
---|---|
text
|
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 hinzufügen.
Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.
JSON-Darstellung |
---|
{
"imageUrl": string,
"onClick": {
object (
|
Felder | |
---|---|
imageUrl
|
Die HTTPS-URL, auf der das Image gehostet wird. Beispiel:
|
onClick
|
Wenn ein Nutzer auf das Bild klickt, löst der Klick diese Aktion aus. |
altText
|
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 |
Felder | |
---|---|
Union-Feld
Für |
|
action
|
Wenn angegeben, wird durch diesen |
openLink
|
Wenn angegeben, löst diese |
openDynamicLinkAction
|
Ein Add-on löst diese Aktion aus, wenn durch die Aktion ein Link geöffnet werden muss. Im Gegensatz zum obigen Verfügbar für Google Workspace-Add-ons und nicht für Google Chat-Apps. |
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 ( |
Felder | |
---|---|
function
|
Eine benutzerdefinierte Funktion, die ausgelöst wird, wenn auf das Containerelement geklickt oder es anderweitig aktiviert wird. Beispiele für die Verwendung finden Sie unter Formulardaten lesen. |
parameters[]
|
Liste der Aktionsparameter. |
loadIndicator
|
Gibt die Ladeanzeige an, die die Aktion anzeigt, während der Call-to-die-Aktion ausgeführt wird. |
persistValues
|
Gibt an, ob Formularwerte nach der Aktion erhalten bleiben. Der Standardwert ist
Beim Wert
Bei |
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
Durch Angabe eines Verfügbar für Google Chat-Apps und nicht für Google Workspace-Add-ons. |
requiredWidgets[]
|
Optional. Geben Sie in dieser Liste die Namen der Widgets ein, die für eine gültige Einreichung von dieser Aktion benötigt werden.
Wenn die hier aufgeführten Widgets beim Aufrufen dieser Aktion keinen Wert haben, wird die Formularübermittlung abgebrochen. Verfügbar für Google Chat-Apps und Google Workspace-Add-ons. |
allWidgetsAreRequired
|
Optional. Wenn dies auf „true“ gesetzt ist, gelten für diese Aktion alle Widgets als erforderlich.
Verfügbar für Google Chat-Apps und 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
|
Der Name des Parameters für das Aktionsskript. |
value
|
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. |
OpenLink
Stellt ein onClick
-Ereignis dar, das einen Hyperlink öffnet.
Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.
JSON-Darstellung |
---|
{ "url": string, "openAs": enum ( |
Felder | |
---|---|
url
|
Die zu öffnende URL. |
openAs
|
So öffnen Sie einen Link. Verfügbar für Google Workspace-Add-ons und nicht für Google Chat-Apps. |
onClose
|
Ob der Client einen Link nach dem Öffnen vergisst oder beobachtet, bis das Fenster geschlossen wird. Verfügbar für Google Workspace-Add-ons und nicht für Google Chat-Apps. |
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 |
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 Anzeigetext mit dekorativem Text.
Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.
JSON-Darstellung |
---|
{ "icon": { object ( |
Felder | |
---|---|
icon
|
Zugunsten von |
startIcon
|
Das Symbol vor dem Text |
topLabel
|
Der Text, der über |
text
|
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
|
Die Einstellung für den Zeilenumbruch. Bei
Gilt nur für |
bottomLabel
|
Der Text, der unter |
onClick
|
Diese Aktion wird ausgelöst, wenn Nutzer auf |
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
|
Eine Schaltfläche, auf die Nutzende klicken können, um eine Aktion auszulösen. |
switchControl
|
Ein Schalter-Widget, auf das ein Nutzer klicken kann, um seinen Status zu ändern und eine Aktion auszulösen. |
endIcon
|
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 hinzufügen.
Unterstützt integrierte und benutzerdefinierte Symbole.
Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.
JSON-Darstellung |
---|
{ "altText": string, "imageType": enum ( |
Felder | |
---|---|
altText
|
Optional. Eine Beschreibung des Symbols, das für die Barrierefreiheit verwendet wird. Wenn keine Vorgabe erfolgt, wird der Standardwert
Wenn das Symbol in einem |
imageType
|
Der Zuschnittstil, der auf das Bild angewendet wird. In einigen Fällen führt das Zuschneiden des Bilds auf |
Union-Feld icons . Das im Widget auf der Karte angezeigte Symbol.
Für icons ist nur einer der folgenden Werte zulässig:
|
|
knownIcon
|
Zeigen Sie eines der integrierten Symbole von Google Workspace an.
Wenn beispielsweise ein Flugzeugsymbol angezeigt werden soll, geben Sie Eine vollständige Liste der unterstützten Symbole finden Sie unter Integrierte Symbole. |
iconUrl
|
Benutzerdefiniertes Symbol anzeigen, das unter einer HTTPS-URL gehostet wird. Beispiel:
Zu den unterstützten Dateitypen gehören |
materialIcon
|
Rufe eines der Material-Symbole von Google auf. Wenn Sie beispielsweise ein Kästchensymbol einblenden möchten, verwenden Sie
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
|
Der im Material-Symbol von Google definierte Symbolname, z. B. |
fill
|
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
|
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
|
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 Schaltfläche hinzufügen.
Wenn Sie ein Bild als anklickbare Schaltfläche festlegen möchten, geben Sie ein
(kein Image
) an und legen Sie eine ImageComponent
onClick
-Aktion fest.
Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.
JSON-Darstellung |
---|
{ "text": string, "icon": { object ( |
Felder | |
---|---|
text
|
Der auf der Schaltfläche angezeigte Text. |
icon
|
Das Symbolbild. Wenn sowohl |
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
Legen Sie optional
Für Die folgende Farbe stellt beispielsweise ein halb transparentes Rot dar:
|
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
|
Beim Wert |
altText
|
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/workspace/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
|
Der Rotanteil der Farbe als Wert im Intervall [0, 1]. |
green
|
Der Grünanteil der Farbe als Wert im Intervall [0, 1]. |
blue
|
Der Blauanteil der Farbe als Wert im Intervall [0, 1]. |
alpha
|
Der Anteil dieser Farbe, der auf den Pixel angewendet werden soll. Die endgültige Pixelfarbe wird durch folgende Gleichung definiert:
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 ( |
Felder | |
---|---|
name
|
Der Name, durch den das Schalter-Widget in einem Formulareingabeereignis identifiziert wird. Weitere Informationen zum Arbeiten mit Formulareingaben finden Sie unter Formulardaten empfangen. |
value
|
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
|
Bei |
onChangeAction
|
Aktion, die ausgeführt werden soll, wenn sich der Schalterstatus ändert, z. B. die auszuführende Funktion. |
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 Schaltfläche hinzufügen.
Verfügbar für Google Chat-Apps und Google Workspace-Add-ons.
JSON-Darstellung |
---|
{
"buttons": [
{
object (
|
Felder | |
---|---|
buttons[]
|
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 Feld hinzufügen, in das ein Nutzer Text eingeben kann.
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 ( |
Felder | |
---|---|
name
|
Der Name, durch den die Texteingabe in einem Formulareingabeereignis identifiziert wird. Weitere Informationen zum Arbeiten mit Formulareingaben finden Sie unter Formulardaten empfangen. |
label
|
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
Erforderlich, wenn |
hintText
|
Text, der unter dem Texteingabefeld angezeigt wird und Nutzende zur Eingabe eines bestimmten Werts auffordert. Dieser Text ist immer sichtbar.
Erforderlich, wenn |
value
|
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
|
So wird ein Texteingabefeld in der Benutzeroberfläche angezeigt. Gibt beispielsweise an, ob das Feld ein- oder mehrzeilig ist. |
onChangeAction
|
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
|
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,
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
Wenn angegeben, ist Verfügbar für Google Chat-Apps und Google Workspace-Add-ons. |
autoCompleteAction
|
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 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. |
validation
|
Geben Sie die für dieses Texteingabefeld erforderliche Validierung an.
Verfügbar für Google Chat-Apps und Google Workspace-Add-ons. |
placeholderText
|
Text, der im Texteingabefeld erscheint, wenn das Feld leer ist. Mit diesem Text werden Nutzer zur Eingabe eines Werts aufgefordert. Beispiel: 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 |
Aktion
Felder | |
---|---|
navigations[] |
Angezeigte Karten verschieben oder aktualisieren |
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 (
|
Felder | |
---|---|
items[]
|
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 |
Felder | |
---|---|
Union-Feld
Für |
|
text
|
Der Wert einer vorgeschlagenen Eingabe für ein Texteingabefeld. Dies entspricht dem, was die Nutzer selbst eingeben. |
Validierung
Stellt die erforderlichen Daten zum Validieren 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 (
|
Felder | |
---|---|
characterLimit
|
Hier können Sie die Zeichenbeschränkung für Texteingabe-Widgets angeben. Hinweis: Dies 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
|
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 ganzzahliger Wert. |
FLOAT
|
Ein Gleitkommawert. |
EMAIL
|
Eine E-Mail-Adresse. |
EMOJI_PICKER
|
Ein Emoji, das aus der systemeigenen Emoji-Auswahl ausgewählt wurde. |
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 Auswählbare UI-Elemente hinzufügen.
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 ( |
Felder | |
---|---|
name
|
Der Name, der die Auswahleingabe in einem Formulareingabeereignis identifiziert. Weitere Informationen zum Arbeiten mit Formulareingaben finden Sie unter Formulardaten empfangen. |
label
|
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
|
Der Elementtyp, der Nutzern in einem |
items[]
|
Ein Array aus auswählbaren Elementen. Beispiel: mehrere Optionsfelder oder Kästchen. Unterstützt bis zu 100 Elemente. |
onChangeAction
|
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
|
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
|
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. |
validation
|
Bei Drop-down-Menüs die Validierung für dieses Eingabefeld für die Auswahl.
Verfügbar für Google Chat-Apps und Google Workspace-Add-ons. |
Union-Feld
Verfügbar für Google Chat-Apps und nicht für Google Workspace-Add-ons.
Für |
|
externalDataSource
|
Eine externe Datenquelle, z. B. eine relationale Datenbank. |
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:
Beispiele für die Implementierung von Mehrfachauswahlmenüs findest du unter Mehrfachauswahlmenü hinzufügen. 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
|
Der Text, der den Artikel für Nutzende identifiziert oder beschreibt. |
value
|
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
|
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
|
Bei Mehrfachauswahl-Menüs die URL des Symbols, das neben dem Feld |
bottomText
|
Bei Mehrfachauswahl-Menüs eine Textbeschreibung oder ein Label, die bzw. das unter dem Feld |
PlatformDataSource
Für ein
-Widget, das ein Mehrfachauswahlmenü verwendet: eine Datenquelle aus Google Workspace. Wird zum Füllen von Elementen in einem Mehrfachauswahl-Menü verwendet.
SelectionInput
Verfügbar für Google Chat-Apps und nicht für Google Workspace-Add-ons.
JSON-Darstellung |
---|
{ // Union field |
Felder | |
---|---|
Union-Feld data_source . Die Datenquelle.
Für data_source ist nur einer der folgenden Werte zulässig:
|
|
commonDataSource
|
Eine Datenquelle, die für alle Google Workspace-Anwendungen freigegeben ist, z. B. Nutzer in einer Google Workspace-Organisation. |
hostAppDataSource
|
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
-Widget, das ein Mehrfachauswahlmenü verwendet, eine Datenquelle aus einer Google Workspace-Anwendung. Die Datenquelle füllt die Auswahlelemente für das Mehrfachauswahl-Menü.
SelectionInput
Verfügbar für Google Chat-Apps und nicht für Google Workspace-Add-ons.
JSON-Darstellung |
---|
{ // Union field |
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
|
Eine Datenquelle aus Google Chat. |
ChatClientDataSourceMarkup
Für ein
-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.
SelectionInput
Verfügbar für Google Chat-Apps und nicht für Google Workspace-Add-ons.
JSON-Darstellung |
---|
{ // Union field |
Felder | |
---|---|
Union-Feld source . Die Google Chat-Datenquelle.
Für source ist nur einer der folgenden Werte zulässig:
|
|
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
|
Wenn |
DateTimePicker
Nutzer können ein Datum, eine Uhrzeit oder beides eingeben. Ein Beispiel in Google Chat-Apps finden Sie unter Nutzer dürfen Datum und Uhrzeit auswählen.
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 ( |
Felder | |
---|---|
name
|
Der Name, durch den das Weitere Informationen zum Arbeiten mit Formulareingaben finden Sie unter Formulardaten empfangen. |
label
|
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
|
type
|
Gibt an, ob das Widget die Eingabe von Datum, Uhrzeit oder Datum und Uhrzeit unterstützt. |
valueMsEpoch
|
Der im Widget angezeigte Standardwert in Millisekunden seit der Unixzeit.
Geben Sie den Wert basierend auf dem Auswahltyp an (
|
timezoneOffsetDate
|
Die Zahl in Minuten für die Zeitzonenabweichung gegenüber UTC. Wenn festgelegt, wird |
onChangeAction
|
Wird ausgelöst, wenn der Nutzer auf der |
validation
|
Optional. Gibt die für diese Datum/Uhrzeit-Auswahl 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. 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 Horizontale Trennung zwischen Widgets hinzufügen.
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
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 mit einer Sammlung von Elementen anzeigen.
Columns
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 ( |
Felder | |
---|---|
title
|
Der Text, der in der Rasterüberschrift angezeigt wird. |
items[]
|
Die Elemente, die im Raster angezeigt werden sollen. |
borderStyle
|
Der Rahmenstil, der auf jedes Rasterelement angewendet werden soll. |
columnCount
|
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
|
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 ( |
Felder | |
---|---|
id
|
Eine benutzerdefinierte Kennung für dieses Rasterelement. Diese Kennung wird in den |
image
|
Das Bild, das im Rasterelement angezeigt wird. |
title
|
Titel des Rasterelements |
subtitle
|
Die Untertitel des Rasterelements |
layout
|
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 ( |
Felder | |
---|---|
imageUri
|
Die Bild-URL. |
altText
|
Das Bedienungshilfen-Label für das Bild. |
cropStyle
|
Der Zuschnittstil, der auf das Bild angewendet werden soll. |
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 (
|
Felder | |
---|---|
type
|
Der Zuschnitttyp. |
aspectRatio
|
Das zu verwendende Seitenverhältnis beim Zuschnitttyp So wenden Sie beispielsweise ein Seitenverhältnis von 16:9 an:
|
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 ( |
Felder | |
---|---|
type
|
Rahmentyp |
strokeColor
|
Die zu verwendenden Farben, wenn der Typ |
cornerRadius
|
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 Karten und Dialogfelder in Spalten anzeigen.
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
-Widget.
Grid
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 (
|
Felder | |
---|---|
columnItems[]
|
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 ( |
Felder | |
---|---|
horizontalSizeStyle
|
Gibt an, wie eine Spalte die Breite der Karte einnimmt. |
horizontalAlignment
|
Gibt an, ob Widgets links, rechts oder mittig in einer Spalte ausgerichtet werden. |
verticalAlignment
|
Gibt an, ob Widgets am oberen oder unteren Rand oder in der Mitte einer Spalte ausgerichtet werden. |
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 |
Felder | |
---|---|
Union-Feld
Für |
|
textParagraph
|
|
image
|
|
decoratedText
|
|
buttonList
|
|
textInput
|
|
selectionInput
|
|
dateTimePicker
|
|
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 (
|
Felder | |
---|---|
actionLabel
|
Das Label, das als Aktionsmenüelement angezeigt wird. |
onClick
|
Die Aktion |
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. |