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 Senden von Informationen.

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

  • Nachrichten, die eine oder mehrere Karten enthalten.
  • Startseiten: Das ist eine Karte, die auf dem Tab Startseite in Direktnachrichten mit der Chat-App angezeigt wird.
  • Dialoge sind 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 Card Builder können Sie Nachrichten und Benutzeroberflächen für Chat-Apps entwerfen und in der Vorschau ansehen:

Card Builder ö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 einen der folgenden Schnellstarts aus, je nachdem, welche App-Architektur Sie verwenden möchten:

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 bereitzustellen.
  • Führen Sie eine action aus, die eine benutzerdefinierte Funktion ausführt, z. B. eine API aufruft.

Für die Barrierefreiheit unterstützen Schaltflächen Alternativtext.

Schaltfläche zum Ausführen einer benutzerdefinierten Funktion hinzufügen

Im Folgenden sehen Sie eine Karte, die aus einem ButtonList-Widget mit zwei Schaltflächen besteht. Ü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 mit Material Design-Stil hinzufügen

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

Wenn Sie den Material Design-Stil anwenden möchten, dürfen Sie das Attribut „color“ nicht angeben.

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. 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 darauf klicken und die Funktion ausführen kann.

Schaltfläche mit einem Symbol hinzufügen

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

Schaltfläche mit Symbol und Text hinzufügen

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

Schaltfläche für einen minimierbaren Bereich anpassen

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

Dreipunkt-Menü hinzufügen

Das Dreipunkt-Menü Overflow menu kann in Chatkarten 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 für ein übersichtliches Design sorgen.

Chip-Liste hinzufügen

Das ChipList-Widget bietet eine vielseitige und ansprechende Möglichkeit, Informationen darzustellen. Verwenden Sie Chip-Listen, um Tags, Kategorien oder andere relevante Daten darzustellen. So können Nutzer einfacher mit Ihren Inhalten interagieren und sich darin zurechtfinden.

Informationen von Nutzern erheben

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

Informationen dazu, wie Sie Nutzereingaben verarbeiten, 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 On-Change-Aktionen, die Actions sind und ausgeführt werden, wenn sich das Textfeld ä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 bestimmte Daten von Nutzern erheben möchten, verwenden Sie stattdessen das Widget SelectionInput.

Das Folgende ist eine Karte, die aus einem TextInput-Widget besteht:

Datums- oder Zeitangaben erfassen

Mit dem DateTimePicker-Widget können Nutzer ein Datum, eine Uhrzeit oder beides eingeben. Alternativ können Nutzer das Auswahlelement verwenden, um Daten und Uhrzeiten auszuwählen. Wenn Nutzer ein ungültiges Datum oder eine ungültige Uhrzeit eingeben, wird im Picker eine Fehlermeldung angezeigt, in der sie aufgefordert werden, die Informationen richtig einzugeben.

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

Nutzern das Auswählen von Elementen erlauben

Das SelectionInput-Widget bietet eine Reihe von auswählbaren Elementen wie Kästchen, Optionsfelder, Schalter oder ein Drop-down-Menü. 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 TextInput-Widget.

Das SelectionInput-Widget unterstützt Vorschläge, die Nutzern helfen, einheitliche Daten einzugeben, sowie On-Change-Aktionen, die Actions sind und ausgeführt werden, wenn sich ein Auswahlfeld ä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, in denen das SelectionInput-Widget verwendet wird. In den Beispielen werden verschiedene Arten von Abschnittseingaben verwendet:

Kästchen hinzufügen

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

Optionsfeld hinzufügen

Im Folgenden wird eine Karte angezeigt, auf der der Nutzer aufgefordert wird, anzugeben, 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 aufgefordert wird, anzugeben, ob ein Kontakt beruflich, privat oder beides ist. Dazu wird ein SelectionInput-Widget mit Schaltern verwendet:

Im Folgenden wird eine Karte angezeigt, auf der der Nutzer aufgefordert wird, anzugeben, ob ein Kontakt beruflich oder privat ist. Dazu wird ein SelectionInput-Widget mit einem Drop-down-Menü verwendet:

Mehrfachauswahl-Menü hinzufügen

Im Folgenden sehen Sie eine Karte, auf der der Nutzer aufgefordert wird, Kontakte aus einem Menü mit Mehrfachauswahl auszuwählen:

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 hinzufügen.
  • Google Chat-Gruppenbereiche: Der Nutzer, der Elemente in das Multiselect-Menü eingibt, kann nur Gruppenbereiche ansehen und auswählen, denen er innerhalb seiner Google Workspace-Organisation angehört.

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

Der folgende Code zeigt ein Menü mit Mehrfachauswahl für Google Workspace-Nutzer. Um Nutzer zu generieren, wird durch die Auswahl der Eingabe 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 Mehrfachauswahlmenü mit Chatbereichen. Zum Ausfüllen von Leerzeichen wird das Feld hostAppDataSource im Auswahl-Input angegeben. Im Menü für die Mehrfachauswahl wird defaultToCurrentSpace auch auf true festgelegt. Dadurch wird der aktuelle Gruppenbereich zur Standardauswahl im Menü:

JSON

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

In Auswahlmenüs mit Mehrfachauswahl können auch Elemente aus einer Drittanbieter- oder externen Datenquelle eingefügt werden. Sie können beispielsweise Mehrfachauswahlmenüs verwenden, damit ein Nutzer aus einer Liste von Vertriebs-Leads aus einem CRM-System (Customer Relationship Management) auswählen kann.

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

Der folgende Code zeigt ein Menü mit Mehrfachauswahl für Elemente aus einer externen Gruppe von Kontakten für den Nutzer. Im Menü wird standardmäßig ein Kontakt angezeigt. 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 in das Mehrfachauswahlmenü 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 vorschlagen, bevor der Nutzer die Eingabe abgeschlossen hat. Sie können bis zu 100 Elemente automatisch vervollständigen lassen.

Um Elemente automatisch zu vervollständigen, erstellen Sie eine Funktion, die die externe Datenquelle abfragt und Elemente zurückgibt, wenn ein Nutzer im Mehrfachauswahlmenü etwas eingibt. Die Funktion muss Folgendes tun:

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

Mit dem folgenden Code werden Elemente aus einer externen Datenressource automatisch vervollständigt. Im vorherigen Beispiel schlägt die Chat-App Elemente basierend darauf vor, 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 beschrieben, wie Sie Daten validieren, die in die action einer Karte und in Widgets eingegeben werden. Sie können beispielsweise prüfen, ob in ein Texteingabefeld Text eingegeben wurde oder ob es eine bestimmte Anzahl von Zeichen enthält.

Erforderliche Widgets für Aktionen festlegen

Fügen Sie der Liste requiredWidgets der Karte action die Namen der Widgets 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 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
              }
            ]
          }
        }
      ]
    }
  ]
}
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 Texteingabe-Widget festlegen

Im Validierungsfeld des Widgets textInput kann das Zeichenlimit und der Eingabetyp für dieses Texteingabe-Widget 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 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 in der Chat-Benutzeroberfläche die Meldung „Ein Fehler ist aufgetreten“ angezeigt. oder „Ihre Anfrage kann nicht bearbeitet werden.“ Manchmal wird in der Chat-Benutzeroberfläche keine Fehlermeldung angezeigt, aber die Chat-App oder ‑Karte liefert ein unerwartetes Ergebnis, z. B. wird eine Kartennachricht nicht angezeigt.

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