Interaktive UI-Elemente zu Karten hinzufügen

Auf dieser Seite wird beschrieben, 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 Einreichen von Informationen.

Für Chat-Apps können die folgenden Chat-Oberflächen verwendet werden, um interaktive Karten zu erstellen:

  • Nachrichten, die eine oder mehrere Karten enthalten.
  • Startseiten: Eine Karte, die auf dem Tab Startseite in Direktnachrichten in der Chat App angezeigt wird.
  • Dialogfelder: Karten, die in Nachrichten und auf Startseiten in einem neuen Fenster geöffnet werden.

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

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

Karten-Tool öffnen

Vorbereitung

Eine Google Chat-App, für die interaktive Funktionen aktiviert sind. Wenn Sie eine interaktive Chat-App erstellen möchten, führen Sie einen der folgenden Schnellstarts aus, der auf der gewünschten App-Architektur basiert:

Schaltfläche hinzufügen

Im ButtonList-Widget werden mehrere Schaltflächen angezeigt. Schaltflächen können Text, ein Symbol oder beides enthalten. Jede Button unterstützt eine OnClick-Aktion, die ausgeführt wird, wenn Nutzer auf die Schaltfläche klicken. Beispiel:

  • Öffnen Sie einen Hyperlink mit OpenLink, um Nutzern zusätzliche Informationen zur Verfügung zu stellen.
  • Führen Sie eine action aus, mit der eine benutzerdefinierte Funktion ausgeführt wird, z. B. ein API-Aufruf.

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

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

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

Schaltfläche im Material Design-Stil hinzufügen

Im Folgenden sind mehrere Schaltflächen in verschiedenen Material Design-Schaltflächenstilen zu sehen.

Wenn Sie den Material Design-Stil anwenden möchten, geben Sie das Attribut „color“ nicht an.

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 mit einem ButtonList-Widget mit zwei Schaltflächen. Bei einer Schaltfläche wird das Feld Color verwendet, um die Hintergrundfarbe der Schaltfläche anzupassen. Die andere Schaltfläche wird mit dem Feld Disabled deaktiviert, sodass der Nutzer nicht auf die Schaltfläche klicken und die Funktion ausführen kann.

Schaltfläche mit Symbol hinzufügen

Im Folgenden sehen Sie eine Karte mit einem ButtonList-Widget mit zwei Symbol-Button-Widgets. Auf einer Schaltfläche wird das integrierte E-Mail-Symbol von Google Chat mit dem Feld knownIcon angezeigt. Bei der anderen Schaltfläche wird das Feld iconUrl verwendet, um ein benutzerdefiniertes Symbol-Widget anzuzeigen.

Schaltfläche mit Symbol und Text hinzufügen

Im Folgenden sehen Sie eine Karte mit einem ButtonList-Widget, über das der Nutzer aufgefordert wird, eine E-Mail zu senden. Auf der ersten Schaltfläche ist ein E-Mail-Symbol und auf der zweiten Schaltfläche Text zu sehen. Der Nutzer kann entweder auf das Symbol oder auf die Textschaltfläche klicken, um die sendEmail-Funktion auszuführen.

Schaltfläche für einen minimierbaren Bereich anpassen

Passen Sie die Schaltfläche an, mit der Abschnitte in einer Karte minimiert und maximiert werden. Wählen Sie aus einer Reihe von Symbolen oder Bildern, um den Inhalt des Abschnitts visuell darzustellen. So können Nutzer die Informationen leichter verstehen und damit interagieren.

Dreipunkt-Menü hinzufügen

Das Dreipunkt-Menü Overflow menu kann in Google Chat-Karten verwendet werden, um zusätzliche Optionen und Aktionen anzubieten. So können Sie mehr Optionen einbinden, ohne die Benutzeroberfläche der Karte zu überladen. Das sorgt für ein sauberes und übersichtliches Design.

Chipsliste hinzufügen

Das Widget ChipList bietet eine vielseitige und visuell ansprechende Möglichkeit, Informationen darzustellen. Verwenden Sie Chiplisten, um Tags, Kategorien oder andere relevante Daten darzustellen. So können Nutzer sich leichter in Ihren Inhalten zurechtfinden und mit ihnen interagieren.

Informationen von Nutzern erheben

In diesem Abschnitt wird beschrieben, wie Sie Widgets hinzufügen, mit denen Informationen wie Text oder Auswahlen erfasst werden.

Informationen zum Verarbeiten von Nutzereingaben finden Sie unter Informationen von Google Chat-Nutzern erheben und verarbeiten.

Text erfassen

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

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

Die folgende Karte besteht aus einem TextInput-Widget:

Datumsangaben oder Uhrzeiten erfassen

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

Im Folgenden sehen Sie eine Karte mit drei verschiedenen Arten von DateTimePicker-Widgets:

Nutzern die Auswahl von Elementen ermöglichen

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

Das SelectionInput-Widget unterstützt Vorschläge, die Nutzern helfen, einheitliche Daten einzugeben, und Änderungsaktionen, die Actions ausgeführt werden, wenn sich ein Auswahleingabefeld ändert, z. B. wenn ein Nutzer einen Artikel auswählt oder die Auswahl aufhebt.

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

In diesem Abschnitt finden Sie Beispiele für Karten, in denen das SelectionInput-Widget verwendet wird. In den Beispielen werden verschiedene Arten von Abschnittseingaben verwendet:

Kästchen hinzufügen

Im Folgenden wird eine Karte mit einem SelectionInput-Widget mit Kästchen angezeigt, über das der Nutzer angeben kann, ob ein Kontakt geschäftlich, privat oder beides ist:

Ein Kästchen hinzufügen

Im Folgenden wird eine Karte mit einem SelectionInput-Widget mit Optionsschaltflächen angezeigt, auf der der Nutzer angeben soll, ob ein Kontakt geschäftlich oder privat ist:

Schalter hinzufügen

Im Folgenden wird eine Karte mit einem SelectionInput-Widget mit Schaltern angezeigt, über die der Nutzer angeben kann, ob ein Kontakt geschäftlich, privat oder beides ist:

Im Folgenden wird eine Karte mit einem SelectionInput-Widget mit Drop-down-Menü angezeigt, über das der Nutzer angeben kann, ob ein Kontakt geschäftlich oder privat ist:

Mehrfachauswahl-Menü hinzufügen

Im Folgenden wird eine Karte angezeigt, auf der der Nutzer Kontakte aus einem Mehrfachauswahlmenü auswählen soll:

Sie können Elemente für ein Mehrfachauswahlmenü aus den folgenden Datenquellen in Google Workspace einfügen:

  • Google Workspace-Nutzer: Sie können nur Nutzer innerhalb derselben Google Workspace-Organisation einfügen.
  • Chatgruppen: Nutzer, die Elemente in das Mehrfachauswahlmenü eingeben, können nur Gruppenbereiche in ihrer Google Workspace-Organisation aufrufen und auswählen.

Wenn Sie Google Workspace-Datenquellen verwenden möchten, geben Sie das Feld platformDataSource an. Im Gegensatz zu anderen Auswahleingaben lassen Sie SelectionItem-Objekte aus, da diese Auswahlelemente dynamisch aus Google Workspace abgerufen werden.

Der folgende Code zeigt ein Mehrfachauswahlmenü mit Google Workspace-Nutzern. Um Nutzer einzufügen, wird in der Auswahleingabe commonDataSource auf USER gesetzt:

JSON

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

Der folgende Code zeigt ein Mehrfachauswahlmenü für Gruppenbereiche. Für die Befüllung von Bereichen wird in der Auswahleingabe das Feld hostAppDataSource angegeben. Im Menü für die Mehrfachauswahl wird außerdem defaultToCurrentSpace auf true gesetzt, wodurch der aktuelle Gruppenbereich die Standardauswahl im Menü wird:

JSON

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

In Menüs mit Mehrfachauswahl können auch Elemente aus einer Drittanbieter- oder externen Datenquelle eingefügt werden. Mithilfe von Mehrfachauswahlmenüs können Sie Nutzern beispielsweise die Auswahl aus einer Liste von Leads aus einem CRM-System (Customer Relationship Management) erleichtern.

Wenn Sie eine externe Datenquelle verwenden möchten, geben Sie im 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 Vorschläge einfügen, die im Mehrfachauswahlmenü angezeigt werden, bevor Nutzer etwas eingeben. Sie können beispielsweise die zuletzt gesuchten Kontakte für den Nutzer einblenden. Wenn Sie vorgeschlagene Artikel aus einer externen Datenquelle einfügen möchten, geben Sie SelectionItem-Objekte an.

Der folgende Code zeigt ein Mehrfachauswahlmenü mit 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 einzufügen:

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 die Mehrfachauswahl eingeben. Wenn ein Nutzer beispielsweise Atl für ein Menü eingibt, in dem Städte in den USA angezeigt werden, kann Ihre Chat-App Atlanta automatisch vorschlagen, bevor der Nutzer fertig ist. Sie können bis zu 100 Elemente automatisch vervollständigen.

Wenn Sie Elemente automatisch vervollständigen möchten, erstellen Sie eine Funktion, die die externe Datenquelle abfragt und Elemente zurückgibt, wenn ein Nutzer etwas in das Mehrfachauswahlmenü eingibt. Die Funktion muss Folgendes tun:

  • Übergeben Sie ein Ereignisobjekt, das die Nutzerinteraktion mit dem Menü darstellt.
  • Prüfen Sie, ob der Wert invokedFunction des Interaktionsereignisses mit der Funktion aus dem Feld externalDataSource übereinstimmt.
  • Wenn die Funktionen übereinstimmen, werden Vorschläge aus der externen Datenquelle zurückgegeben. Wenn Sie Elemente basierend auf dem eingebenen Text vorschlagen möchten, rufen Sie den Wert für den Schlüssel autocomplete_widget_query ab. Dieser Wert gibt an, was der Nutzer in das Menü eingibt.

Im folgenden Code werden Elemente aus einer externen Datenressource automatisch vervollständigt. 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
  };
}

Auf Karten eingegebene Daten validieren

Auf dieser Seite wird beschrieben, wie Sie Daten validieren, die in die action und Widgets einer Karte eingegeben wurden. Sie können beispielsweise prüfen, ob ein Texteingabefeld vom Nutzer eingegebenen Text enthält oder eine bestimmte Anzahl von Zeichen.

Erforderliche Widgets für Aktionen festlegen

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

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.

all_widgets_are_required-Aktion für die 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
              }
            ]
          }
        }
      ]
    }
  ]
}
all_widgets_are_required-Aktion in dateTimePicker 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"
          }
        }
      ]
    }
  ]
}
all_widgets_are_required-Aktion 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 Widget für die Texteingabe festlegen

Im Validierungsfeld des Widgets textInput können die Zeichenbeschränkung und der Eingabetyp für dieses Widget für die Texteingabe angegeben werden.

Zeichenlimit 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 Widget für die Texteingabe 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 in der Chat-Benutzeroberfläche die Meldung „Ein Fehler ist aufgetreten“ angezeigt. oder „Ihre Anfrage konnte nicht verarbeitet werden“ Manchmal wird in der Chat-Benutzeroberfläche keine Fehlermeldung angezeigt, aber die Chat-App oder -Karte führt zu einem unerwarteten Ergebnis. Beispielsweise wird möglicherweise keine Kartennachricht angezeigt.

Auch wenn in der Chat-Benutzeroberfläche keine Fehlermeldung angezeigt wird, sind beschreibende Fehlermeldungen und Protokolldaten verfügbar, die Ihnen bei der Fehlerbehebung helfen, wenn die Fehlerprotokollierung für Chat-Apps aktiviert ist. Informationen zum Ansehen, Entfernen und Beheben von Fehlern finden Sie unter Google Chat-Fehler beheben.