Interaktive UI-Elemente zu Karten hinzufügen

Auf dieser Seite wird erläutert, wie Sie Karten Widgets und UI-Elemente hinzufügen, damit Nutzer mit Ihrer Google Chat-App interagieren können, z. B. durch Klicken auf eine Schaltfläche oder Senden von Informationen.

Chat-Apps können die folgenden Chat-Oberflächen verwenden, um interaktive Karten zu erstellen:

  • Nachrichten die eine oder mehrere Karten enthalten.
  • Startseiten, eine Karte, die in Direktnachrichten mit der Chat-App über den Tab Startseite angezeigt wird
  • Dialogfelder, Karten, die in einem neuen Fenster über Nachrichten und Startseiten geöffnet werden

Wenn Nutzer mit Karten interagieren, können Chat-Apps die empfangenen Daten verarbeiten und entsprechend reagieren. Weitere Informationen finden Sie unter Informationen von Google Chat-Nutzern erheben und verarbeiten.

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

Kartengenerator öffnen

Vorbereitung

Eine Google Chat-App, die so konfiguriert ist, dass sie Interaktionsereignisse empfängt und darauf reagiert. Wenn Sie eine interaktive Chat-App erstellen möchten, führen Sie eine der folgenden Kurzanleitungen aus, je nach der App-Architektur, die Sie verwenden möchten:

Schaltfläche hinzufügen

Das ButtonList Widget zeigt eine Reihe von Schaltflächen an. Auf Schaltflächen kann Text, ein Symbol oder beides angezeigt werden. Jede Button unterstützt eine OnClick Aktion , die ausgeführt wird, wenn Nutzer auf die Schaltfläche klicken. Beispiel:

  • Öffnen Sie mit OpenLink, einen Hyperlink, um Nutzern zusätzliche Informationen zu geben.
  • Führen Sie eine action aus, die eine benutzerdefinierte Funktion ausführt, z. B. den Aufruf einer API.

Aus Gründen der Barrierefreiheit unterstützen Schaltflächen Alternativtext.

Schaltfläche hinzufügen, die eine benutzerdefinierte Funktion ausführt

Im Folgenden sehen Sie eine Karte, die aus einem ButtonList-Widget mit zwei Schaltflächen besteht. Eine Schaltfläche öffnet die Google Chat-Entwicklerdokumentation in einem neuen Tab. Die andere Schaltfläche führt eine benutzerdefinierte Funktion namens goToView() aus und übergibt den viewType="BIRD EYE VIEW" Parameter.

Schaltfläche mit Material Design-Stil hinzufügen

Im Folgenden sehen Sie eine Reihe von Schaltflächen in verschiedenen Material Design-Stilen.

Wenn Sie den Material Design-Stil anwenden möchten, lassen Sie das Attribut „color“ weg.

Schaltfläche mit benutzerdefinierter Farbe und deaktivierte Schaltfläche hinzufügen

Sie können verhindern, dass Nutzer auf eine Schaltfläche klicken, indem Sie "disabled": "true" festlegen.

Im Folgenden sehen Sie eine Karte, die aus einem ButtonList-Widget mit zwei Schaltflächen besteht. Eine Schaltfläche verwendet das Color Feld um die Hintergrundfarbe der Schaltfläche anzupassen. Die andere Schaltfläche wird mit dem Feld Disabled deaktiviert, wodurch verhindert wird, dass der Nutzer auf die Schaltfläche klickt und die Funktion ausführt.

Schaltfläche mit Symbol hinzufügen

Im Folgenden sehen Sie eine Karte, die aus einem ButtonList-Widget mit zwei Symbol Button-Widgets besteht. Eine Schaltfläche verwendet das knownIcon Feld, um das integrierte E‑Mail-Symbol von Google Chat anzuzeigen. Die andere Schaltfläche verwendet das iconUrl Feld, um ein benutzerdefiniertes Symbol-Widget anzuzeigen.

Schaltfläche mit Symbol und Text hinzufügen

Im Folgenden sehen Sie eine Karte, die aus einem ButtonList-Widget besteht, das den Nutzer auffordert, eine E‑Mail zu senden. Die erste Schaltfläche zeigt ein E‑Mail-Symbol und die zweite Schaltfläche Text an. Der Nutzer kann entweder auf die Schaltfläche mit dem Symbol oder auf die Schaltfläche mit dem Text klicken, um die Funktion sendEmail auszuführen.

Schaltfläche für einen minimierbaren Abschnitt anpassen

Passen Sie die Steuerungsschaltfläche an, mit der Abschnitte in einer Karte minimiert und maximiert werden. Wählen Sie aus einer Reihe von Symbolen oder Bildern aus, um den Inhalt des Abschnitts visuell darzustellen und Nutzern so das Verständnis und die Interaktion mit den Informationen zu erleichtern.

Dreipunkt-Menü hinzufügen

Das Overflow menu kann in Chat-Karten verwendet werden, um zusätzliche Optionen und Aktionen anzubieten. So können Sie mehr Optionen einfügen, ohne die Benutzeroberfläche der Karte zu überladen, und ein übersichtliches und organisiertes Design gewährleisten.

Chip-Liste hinzufügen

Das ChipList Widget bietet eine vielseitige und optisch ansprechende Möglichkeit, Informationen darzustellen. Verwenden Sie Chip-Listen, um Tags, Kategorien oder andere relevante Daten darzustellen und Nutzern so die Navigation und Interaktion mit Ihren Inhalten zu erleichtern.

Informationen von Nutzern erheben

In diesem Abschnitt wird erläutert, wie Sie Widgets hinzufügen können, mit denen Informationen wie Text oder Auswahlen erhoben werden.

Informationen zur Verarbeitung der Eingaben von Nutzern finden Sie unter Informationen von Google Chat-Nutzern erheben und verarbeiten.

Text erheben

Das TextInput Widget bietet ein Feld, in dem Nutzer Text eingeben können. Das Widget unterstützt Vorschläge, die Nutzern helfen, einheitliche Daten einzugeben, und Aktionen bei Änderungen, die Actions ausgeführt werden, wenn sich etwas im Texteingabefeld ändert, z. B. wenn ein Nutzer Text hinzufügt oder löscht.

Wenn Sie abstrakte oder unbekannte Daten von Nutzern erheben müssen, verwenden Sie dieses TextInput-Widget. Wenn Sie definierte Daten von Nutzern erheben möchten, verwenden Sie stattdessen das SelectionInput Widget.

Im Folgenden sehen Sie eine Karte, die aus einem TextInput-Widget besteht:

Daten oder Uhrzeiten erheben

Mit dem DateTimePicker Widget können Nutzer ein Datum, eine Uhrzeit oder beides eingeben. Alternativ können Nutzer Datum und Uhrzeit über die Auswahl eingeben. Wenn Nutzer ein ungültiges Datum oder eine ungültige Uhrzeit eingeben, wird in der Auswahl ein Fehler angezeigt, der sie auffordert, die Informationen korrekt einzugeben.

Im Folgenden sehen Sie eine Karte, die aus drei verschiedenen Arten von DateTimePicker-Widgets besteht:

Nutzer Elemente auswählen lassen

Das SelectionInput Widget bietet eine Reihe von auswählbaren Elementen, z. B. Kästchen, Optionsfelder, Schalter oder ein Drop‑down-Menü. Mit diesem Widget können Sie definierte und standardisierte Daten von Nutzern erheben. Wenn Sie undefinierte Daten von Nutzern erheben möchten, verwenden Sie stattdessen das TextInput Widget.

Das SelectionInput Widget unterstützt Vorschläge, die Nutzern helfen, einheitliche Daten einzugeben, und Aktionen bei Änderungen, also Actions die ausgeführt werden, wenn sich etwas in einem Eingabefeld für die Auswahl ändert, z. B. wenn ein Nutzer ein Element auswählt oder die Auswahl aufhebt.

Chat-Apps können den Wert ausgewählter Elemente empfangen und verarbeiten. Weitere Informationen zum Arbeiten mit Formulareingaben finden Sie unter Von Nutzern eingegebene Informationen verarbeiten.

In diesem Abschnitt finden Sie Beispiele für Karten, die das Widget SelectionInput verwenden. In den Beispielen werden verschiedene Arten von Eingaben für Abschnitte verwendet:

Kästchen hinzufügen

Im Folgenden sehen Sie eine Karte, auf der der Nutzer angeben muss, ob ein Kontakt beruflich, privat oder beides ist. Dazu wird ein SelectionInput-Widget mit Kästchen verwendet:

Optionsfeld hinzufügen

Im Folgenden sehen Sie eine Karte, auf der der Nutzer angeben muss, ob ein Kontakt beruflich oder privat ist. Dazu wird ein SelectionInput-Widget mit Optionsfeldern verwendet:

Schalter hinzufügen

Im Folgenden sehen Sie eine Karte, auf der der Nutzer angeben muss, ob ein Kontakt beruflich, privat oder beides ist. Dazu wird ein SelectionInput-Widget mit Schaltern verwendet:

Im Folgenden sehen Sie eine Karte, auf der der Nutzer angeben muss, ob ein Kontakt beruflich oder privat ist. Dazu wird ein SelectionInput-Widget mit einem Drop‑down-Menü verwendet:

Drop‑down-Menüs dynamisch füllen

Verfügbar für Google Chat-Apps.

Sie können Elemente für ein Drop‑down-Menü dynamisch aus Datenquellen in Google Workspace oder aus einer externen Datenquelle füllen. Wenn Sie dynamische Datenquellen verwenden möchten, geben Sie das data_source_configs Feld an, ein Array von DataSourceConfig-Objekten. Jede DataSourceConfig kann entweder eine platformDataSource oder eine remoteDataSource enthalten. Derzeit wird nur eine DataSourceConfig unterstützt.

Elemente aus Google Workspace füllen

Wenn Sie Elemente aus Google Workspace-Datenquellen wie Google Workspace-Nutzern füllen möchten, geben Sie das platformDataSource Feld in einer DataSourceConfig an. Im Gegensatz zur Verwendung statischer items lassen Sie SelectionItem-Objekte weg, da diese Auswahlmöglichkeiten dynamisch aus Google Workspace stammen.

Der folgende Code zeigt ein Drop‑down-Menü, das mit Google Workspace-Nutzern gefüllt wird:

JSON

{
  "sections": [
    {
      "header": "Section Header",
      "widgets": [
        {
          "selectionInput": {
            "name": "contacts",
            "type": "DROPDOWN",
            "label": "Select contact from organization",
            "data_source_configs": [
              {
                "platformDataSource": {
                  "commonDataSource": "USER"
                },
                "min_characters_trigger": 1
              }
            ]
          }
        }
      ]
    }
  ]
}
Elemente aus einer externen Datenquelle füllen

Wenn Sie Elemente aus einer Drittanbieter- oder externen Datenquelle wie einem CRM-System (Customer Relationship Management) füllen möchten, verwenden Sie das Feld remoteDataSource in einer DataSourceConfig, um eine Funktion anzugeben, die Elemente aus der Datenquelle zurückgibt.

Der folgende Code zeigt ein Drop‑down-Menü, das Elemente aus einer externen Kontaktliste füllt, indem die Funktion getCrmLeads ausgeführt wird:

JSON

{
  "sections": [
    {
      "header": "Section Header",
      "widgets": [
        {
          "selectionInput": {
            "name": "crm_leads",
            "type": "DROPDOWN",
            "label": "Select CRM Lead",
            "data_source_configs": [
              {
                "remoteDataSource": {
                  "function": "getCrmLeads"
                },
                "min_characters_trigger": 2
              }
            ],
            "items": [
              {
                "text": "Suggested Lead 1",
                "value": "lead-1"
              }
            ]
          }
        }
      ]
    }
  ]
}

Um die Anzahl der Anfragen an eine dynamische Datenquelle zu reduzieren, können Sie vorgeschlagene Elemente einfügen, die im Drop‑down-Menü angezeigt werden, bevor Nutzer etwas eingeben. Sie können das Drop‑down-Menü auch so konfigurieren, dass Elemente automatisch vervollständigt werden, je nachdem, was Nutzer eingeben. Dazu legen Sie min_characters_trigger in der DataSourceConfig fest. Wenn ein Nutzer mindestens die in min_characters_trigger angegebene Anzahl von Zeichen eingibt, wird die in remoteDataSource angegebene Funktion ausgelöst. Das an die Funktion übergebene Ereignisobjekt enthält die Eingabe des Nutzers im Schlüssel autocomplete_widget_query.

Menü für Mehrfachauswahl hinzufügen

Im Folgenden sehen Sie eine Karte, auf der der Nutzer Kontakte aus einem Menü für Mehrfachauswahl auswählen muss:

Sie können Elemente für ein Menü für Mehrfachauswahl aus den folgenden Datenquellen in Google Workspace füllen:

  • Google Workspace-Nutzer: Sie können nur Nutzer innerhalb derselben Google Workspace-Organisation füllen.
  • Google Chat-Bereiche: Der Nutzer, der Elemente in das Menü für Mehrfachauswahl eingibt, kann nur Bereiche ansehen und auswählen, zu denen er innerhalb seiner Google Workspace-Organisation gehört.

Wenn Sie Google Workspace-Datenquellen verwenden möchten, geben Sie das platformDataSource Feld an. Im Gegensatz zu anderen Eingabetypen für die Auswahl lassen Sie SelectionItem Objekte weg, da diese Auswahlmöglichkeiten dynamisch aus Google Workspace stammen.

Der folgende Code zeigt ein Menü für Mehrfachauswahl von Google Workspace-Nutzern. Um Nutzer zu füllen, wird mit der Eingabe für die Auswahl commonDataSource auf USER festgelegt:

JSON

{
  "selectionInput": {
    "name": "contacts",
    "type": "MULTI_SELECT",
    "label": "Selected contacts",
    "multiSelectMaxSelectedItems": 5,
    "multiSelectMinQueryLength": 1,
    "platformDataSource": {
      "commonDataSource": "USER"
    }
  }
}

Der folgende Code zeigt ein Menü für Mehrfachauswahl von Google Chat-Bereichen. Um Bereiche zu füllen, wird mit der Eingabe für die Auswahl das Feld hostAppDataSource angegeben. Im Menü für Mehrfachauswahl wird außerdem defaultToCurrentSpace auf true festgelegt, wodurch der aktuelle Bereich zur Standardauswahl im Menü wird:

JSON

{
  "selectionInput": {
    "name": "spaces",
    "type": "MULTI_SELECT",
    "label": "Selected contacts",
    "multiSelectMaxSelectedItems": 3,
    "multiSelectMinQueryLength": 1,
    "platformDataSource": {
      "hostAppDataSource": {
        "chatDataSource": {
          "spaceDataSource": {
            "defaultToCurrentSpace": true
          }
        }
      }
    }
  }
}

Menüs für Mehrfachauswahl können auch Elemente aus einer Drittanbieter- oder externen Datenquelle füllen. Sie können Menüs für Mehrfachauswahl beispielsweise verwenden, um Nutzern die Auswahl aus einer Liste von Vertriebsleads aus einem CRM-System zu erleichtern.

Wenn Sie eine externe Datenquelle verwenden möchten, geben Sie mit dem Feld externalDataSource eine Funktion an, die Elemente aus der Datenquelle zurückgibt.

Um die Anzahl der Anfragen an eine externe Datenquelle zu reduzieren, können Sie vorgeschlagene Elemente einfügen, die im Menü für Mehrfachauswahl angezeigt werden, bevor Nutzer etwas eingeben. Sie können beispielsweise kürzlich gesuchte Kontakte für den Nutzer füllen. Wenn Sie vorgeschlagene Elemente aus einer externen Datenquelle füllen möchten, geben Sie SelectionItem -Objekte an.

Der folgende Code zeigt ein Menü für Mehrfachauswahl von Elementen aus einer externen Kontaktliste für den Nutzer. Im Menü wird standardmäßig ein Kontakt angezeigt und die Funktion getContacts wird ausgeführt, um Elemente aus der externen Datenquelle abzurufen und zu füllen:

Node.js

node/selection-input/index.js
selectionInput: {
  name: "contacts",
  type: "MULTI_SELECT",
  label: "Selected contacts",
  multiSelectMaxSelectedItems: 3,
  multiSelectMinQueryLength: 1,
  externalDataSource: { function: "getContacts" },
  // Suggested items loaded by default.
  // The list is static here but it could be dynamic.
  items: [getContact("3")]
}

Python

python/selection-input/main.py
'selectionInput': {
  'name': "contacts",
  'type': "MULTI_SELECT",
  'label': "Selected contacts",
  'multiSelectMaxSelectedItems': 3,
  'multiSelectMinQueryLength': 1,
  'externalDataSource': { 'function': "getContacts" },
  # Suggested items loaded by default.
  # The list is static here but it could be dynamic.
  'items': [get_contact("3")]
}

Java

java/selection-input/src/main/java/com/google/chat/selectionInput/App.java
.setSelectionInput(new GoogleAppsCardV1SelectionInput()
  .setName("contacts")
  .setType("MULTI_SELECT")
  .setLabel("Selected contacts")
  .setMultiSelectMaxSelectedItems(3)
  .setMultiSelectMinQueryLength(1)
  .setExternalDataSource(new GoogleAppsCardV1Action().setFunction("getContacts"))
  .setItems(List.of(getContact("3")))))))))));

Apps Script

apps-script/selection-input/selection-input.gs
selectionInput: {
  name: "contacts",
  type: "MULTI_SELECT",
  label: "Selected contacts",
  multiSelectMaxSelectedItems: 3,
  multiSelectMinQueryLength: 1,
  externalDataSource: { function: "getContacts" },
  // Suggested items loaded by default.
  // The list is static here but it could be dynamic.
  items: [getContact("3")]
}

Bei externen Datenquellen können Sie auch Elemente automatisch vervollständigen, die Nutzer im Menü für Mehrfachauswahl eingeben. Wenn ein Nutzer beispielsweise Atl für ein Menü eingibt, das Städte in den Vereinigten Staaten enthält, kann Ihre Chat-App automatisch Atlanta vorschlagen, bevor der Nutzer die Eingabe beendet. Sie können bis zu 100 Elemente automatisch vervollständigen.

Um Elemente automatisch zu vervollständigen, erstellen Sie eine Funktion, die die externe Datenquelle abfragt und Elemente zurückgibt, wenn ein Nutzer etwas in das Menü für Mehrfachauswahl eingibt. Die Funktion muss Folgendes tun:

  • Ein Ereignisobjekt übergeben, das die Nutzerinteraktion mit dem Menü darstellt.
  • Prüfen, ob der Wert invokedFunction des Interaktionsereignisses mit der Funktion aus dem Feld externalDataSource übereinstimmt.
  • Wenn die Funktionen übereinstimmen, vorgeschlagene Elemente aus der externen Datenquelle zurückgeben. Wenn Sie Elemente basierend auf der Eingabe des Nutzers vorschlagen möchten, rufen Sie den Wert für den Schlüssel autocomplete_widget_query ab. Dieser Wert stellt die Eingabe des Nutzers im Menü dar.

Der folgende Code vervollständigt Elemente automatisch aus einer externen Datenquelle. Im vorherigen Beispiel schlägt die Chat-App Elemente vor, je nachdem, wann die Funktion getContacts ausgelöst wird:

Node.js

node/selection-input/index.js
/**
 * Responds to a WIDGET_UPDATE event in Google Chat.
 *
 * @param {Object} event The event object from Chat API.
 * @return {Object} Response from the Chat app.
 */
function onWidgetUpdate(event) {
  if (event.common["invokedFunction"] === "getContacts") {
    const query = event.common.parameters["autocomplete_widget_query"];
    return { actionResponse: {
      type: "UPDATE_WIDGET",
      updatedWidget: { suggestions: { items: [
        // The list is static here but it could be dynamic.
        getContact("1"), getContact("2"), getContact("3"), getContact("4"), getContact("5")
      // Only return items based on the query from the user
      ].filter(e => !query || e.text.includes(query))}}
    }};
  }
}

/**
 * Generate a suggested contact given an ID.
 *
 * @param {String} id The ID of the contact to return.
 * @return {Object} The contact formatted as a suggested item for selectors.
 */
function getContact(id) {
  return {
    value: id,
    startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
    text: "Contact " + id
  };
}

Python

python/selection-input/main.py
def on_widget_update(event: dict) -> dict:
  """Responds to a WIDGET_UPDATE event in Google Chat."""
  if "getContacts" == event.get("common").get("invokedFunction"):
    query = event.get("common").get("parameters").get("autocomplete_widget_query")
    return { 'actionResponse': {
      'type': "UPDATE_WIDGET",
      'updatedWidget': { 'suggestions': { 'items': list(filter(lambda e: query is None or query in e["text"], [
        # The list is static here but it could be dynamic.
        get_contact("1"), get_contact("2"), get_contact("3"), get_contact("4"), get_contact("5")
      # Only return items based on the query from the user
      ]))}}
    }}


def get_contact(id: str) -> dict:
  """Generate a suggested contact given an ID."""
  return {
    'value': id,
    'startIconUri': "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
    'text': "Contact " + id
  }

Java

java/selection-input/src/main/java/com/google/chat/selectionInput/App.java
// Responds to a WIDGET_UPDATE event in Google Chat.
Message onWidgetUpdate(JsonNode event) {
  if ("getContacts".equals(event.at("/invokedFunction").asText())) {
    String query = event.at("/common/parameters/autocomplete_widget_query").asText();
    return new Message().setActionResponse(new ActionResponse()
      .setType("UPDATE_WIDGET")
      .setUpdatedWidget(new UpdatedWidget()
        .setSuggestions(new SelectionItems().setItems(List.of(
          // The list is static here but it could be dynamic.
          getContact("1"), getContact("2"), getContact("3"), getContact("4"), getContact("5")
        // Only return items based on the query from the user
        ).stream().filter(e -> query == null || e.getText().indexOf(query) > -1).toList()))));
  }
  return null;
}

// Generate a suggested contact given an ID.
GoogleAppsCardV1SelectionItem getContact(String id) {
  return new GoogleAppsCardV1SelectionItem()
    .setValue(id)
    .setStartIconUri("https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png")
    .setText("Contact " + id);
}

Apps Script

apps-script/selection-input/selection-input.gs
/**
 * Responds to a WIDGET_UPDATE event in Google Chat.
 *
 * @param {Object} event The event object from Chat API.
 * @return {Object} Response from the Chat app.
 */
function onWidgetUpdate(event) {
  if (event.common["invokedFunction"] === "getContacts") {
    const query = event.common.parameters["autocomplete_widget_query"];
    return { actionResponse: {
      type: "UPDATE_WIDGET",
      updatedWidget: { suggestions: { items: [
        // The list is static here but it could be dynamic.
        getContact("1"), getContact("2"), getContact("3"), getContact("4"), getContact("5")
      // Only return items based on the query from the user
      ].filter(e => !query || e.text.includes(query))}}
    }};
  }
}

/**
 * Generate a suggested contact given an ID.
 *
 * @param {String} id The ID of the contact to return.
 * @return {Object} The contact formatted as a suggested item for selectors.
 */
function getContact(id) {
  return {
    value: id,
    startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
    text: "Contact " + id
  };
}

In Karten eingegebene Daten validieren

Auf dieser Seite wird erläutert, wie Sie Daten validieren, die in die action und die Widgets einer Karte eingegeben wurden. Sie können beispielsweise prüfen, ob in einem Texteingabefeld Text eingegeben wurde oder ob es eine bestimmte Anzahl von Zeichen enthält.

Erforderliche Widgets für Aktionen festlegen

Fügen Sie im Rahmen der action der Karte die Namen der Widgets, die für eine Aktion erforderlich sind, der requiredWidgets Liste hinzu.

Wenn eines der hier aufgeführten Widgets keinen Wert hat, wenn diese Aktion aufgerufen wird, wird die Formularaktion abgebrochen.

Wenn "all_widgets_are_required": "true" für eine Aktion festgelegt ist, sind alle Widgets auf der Karte für diese Aktion erforderlich.

Aktion all_widgets_are_required in der Mehrfachauswahl festlegen

JSON

{
  "sections": [
    {
      "header": "Select contacts",
      "widgets": [
        {
          "selectionInput": {
            "type": "MULTI_SELECT",
            "label": "Selected contacts",
            "name": "contacts",
            "multiSelectMaxSelectedItems": 3,
            "multiSelectMinQueryLength": 1,
            "onChangeAction": {
              "all_widgets_are_required": true
            },
            "items": [
              {
                "value": "contact-1",
                "startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
                "text": "Contact 1",
                "bottomText": "Contact one description",
                "selected": false
              },
              {
                "value": "contact-2",
                "startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
                "text": "Contact 2",
                "bottomText": "Contact two description",
                "selected": false
              },
              {
                "value": "contact-3",
                "startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
                "text": "Contact 3",
                "bottomText": "Contact three description",
                "selected": false
              },
              {
                "value": "contact-4",
                "startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
                "text": "Contact 4",
                "bottomText": "Contact four description",
                "selected": false
              },
              {
                "value": "contact-5",
                "startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
                "text": "Contact 5",
                "bottomText": "Contact five description",
                "selected": false
              }
            ]
          }
        }
      ]
    }
  ]
}
Aktion all_widgets_are_required in der Datumsauswahl festlegen

JSON

{
  "sections": [
    {
      "widgets": [
        {
          "textParagraph": {
            "text": "A datetime picker widget with both date and time:"
          }
        },
        {
          "divider": {}
        },
        {
          "dateTimePicker": {
            "name": "date_time_picker_date_and_time",
            "label": "meeting",
            "type": "DATE_AND_TIME"
          }
        },
        {
          "textParagraph": {
            "text": "A datetime picker widget with just date:"
          }
        },
        {
          "divider": {}
        },
        {
          "dateTimePicker": {
            "name": "date_time_picker_date_only",
            "label": "Choose a date",
            "type": "DATE_ONLY",
            "onChangeAction":{
              "all_widgets_are_required": true
            }
          }
        },
        {
          "textParagraph": {
            "text": "A datetime picker widget with just time:"
          }
        },
        {
          "divider": {}
        },
        {
          "dateTimePicker": {
            "name": "date_time_picker_time_only",
            "label": "Select a time",
            "type": "TIME_ONLY"
          }
        }
      ]
    }
  ]
}
Aktion all_widgets_are_required im Drop‑down-Menü festlegen

JSON

{
  "sections": [
    {
      "header": "Section Header",
      "collapsible": true,
      "uncollapsibleWidgetsCount": 1,
      "widgets": [
        {
          "selectionInput": {
            "name": "location",
            "label": "Select Color",
            "type": "DROPDOWN",
            "onChangeAction": {
              "all_widgets_are_required": true
            },
            "items": [
              {
                "text": "Red",
                "value": "red",
                "selected": false
              },
              {
                "text": "Green",
                "value": "green",
                "selected": false
              },
              {
                "text": "White",
                "value": "white",
                "selected": false
              },
              {
                "text": "Blue",
                "value": "blue",
                "selected": false
              },
              {
                "text": "Black",
                "value": "black",
                "selected": false
              }
            ]
          }
        }
      ]
    }
  ]
}

Validierung für ein Texteingabe-Widget festlegen

Im textInput Validierungsfeld des Widgets können Sie die Zeichenbegrenzung und den Eingabetyp für dieses Texteingabe-Widget angeben.

Zeichenbegrenzung für ein Texteingabe-Widget festlegen

JSON

{
  "sections": [
    {
      "header": "Tell us about yourself",
      "collapsible": true,
      "uncollapsibleWidgetsCount": 2,
      "widgets": [
        {
          "textInput": {
            "name": "favoriteColor",
            "label": "Favorite color",
            "type": "SINGLE_LINE",
            "validation": {"character_limit":15},
            "onChangeAction":{
              "all_widgets_are_required": true
            }
          }
        }
      ]
    }
  ]
}
Eingabetyp für ein Texteingabe-Widget festlegen

JSON

{
  "sections": [
    {
      "header": "Validate text inputs by input types",
      "collapsible": true,
      "uncollapsibleWidgetsCount": 2,
      "widgets": [
        {
          "textInput": {
            "name": "mailing_address",
            "label": "Please enter a valid email address",
            "type": "SINGLE_LINE",
            "validation": {
              "input_type": "EMAIL"
            },
            "onChangeAction": {
              "all_widgets_are_required": true
            }
          }
        },
        {
          "textInput": {
            "name": "validate_integer",
            "label": "Please enter a number",
              "type": "SINGLE_LINE",
            "validation": {
              "input_type": "INTEGER"
            }
          }
        },
        {
          "textInput": {
            "name": "validate_float",
            "label": "Please enter a number with a decimal",
            "type": "SINGLE_LINE",
            "validation": {
              "input_type": "FLOAT"
            }
          }
        }
      ]
    }
  ]
}

Fehlerbehebung

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

Auch wenn auf der Chat-Benutzeroberfläche keine Fehlermeldung angezeigt wird, sind beschreibende Fehlermeldungen und Logdaten verfügbar, mit denen Sie Fehler beheben können, wenn die Fehlerprotokollierung für Chat-Apps aktiviert ist. Informationen zum Ansehen, Debuggen und Beheben von Fehlern finden Sie unter Fehler in Google Chat beheben.