Diese Seite wurde von der Cloud Translation API übersetzt.

Konfigurationskarte für einen Schritt erstellen

In diesem Leitfaden wird beschrieben, wie Sie eine Konfigurationskarte erstellen, mit der Nutzer einen Schritt in Google Workspace-Workflows anpassen und Eingaben dafür bereitstellen können.

Im Allgemeinen erstellen Sie zum Erstellen einer Konfigurationskarte eine Kartenschnittstelle wie für jedes andere Google Workspace-Add‑on. Hilfe beim Erstellen von Konfigurationskarten-Benutzeroberflächen finden Sie hier:

Card Builder: Ein interaktives Tool, mit dem Sie Karten erstellen und definieren können.
Card in der Referenzdokumentation zur Google Workspace-Add-ons API.
Card Service: Ein Apps Script-Dienst, mit dem Skripts Karten konfigurieren und erstellen können.
Kartenbasierte Oberflächen in der Entwicklerdokumentation für Google Workspace-Add‑ons.

Einige Karten-Widgets haben spezielle Workspace Flows-Funktionen, die in dieser Anleitung beschrieben werden.

Konfigurationskarte definieren

Definieren Sie eine Konfigurationskarte sowohl im Apps Script-Manifest als auch im Code.

Im folgenden Beispiel wird gezeigt, wie Sie eine Konfigurationskarte erstellen, auf der Nutzer einen Google Chat-Gruppenbereich auswählen können.

Manifestdatei bearbeiten

Definieren Sie workflowElements in der Manifestdatei.

JSON

{
  "timeZone": "America/Los_Angeles",
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "addOns": {
    "common": {
      "name": "Sample add-on",
      "logoUrl": "https://www.gstatic.com/images/branding/productlogos/gsuite_addons/v6/web-24dp/logo_gsuite_addons_color_1x_web_24dp.png",
      "useLocaleFromApp": true
    },
    "flows": {
      "workflowElements": [
        {
          "id": "actionElement",
          "state": "ACTIVE",
          "name": "Chat space selector",
          "description": "Lets the user select a space from Google  Chat",
          "workflowAction": {
            "inputs": [
              {
                "id": "chooseSpace",
                "description": "Choose a Chat space",
                "cardinality": "SINGLE",
                "dataType": {
                  "basicType": "STRING"
                }
              }
            ],
            "onConfigFunction": "onConfigSpacePicker",
            "onExecuteFunction": "onExecuteCalculate"
          }
        }
      ]
    }
  }
}

Code bearbeiten

Geben Sie im Anwendungscode eine Karte zurück.

Apps Script

/**
* Generates and displays a configuration card to choose a Chat space
  */
function onConfigSpacePicker() {
  var card = {
    "sections": [
      {
        "header": "Choose a Chat space",
        "widgets": [
          {
            "selectionInput": {
              "name": "value1",
              "label": "First value",
              "type": "MULTI_SELECT",
              "platformDataSource": {
                "hostAppDataSource": {
                  "workflowDataSource": {
                    "includeVariables": true,
                    "type": "SPACE"
                  }
                }
              }
            }
          }
        ]
      }
    ]
  };
  return {
    "action": {
      "navigations": [{
        "push_card": card
      }]
    }
  };
}

Automatische Vervollständigung für Eingabe-Widgets einrichten

Sie können die automatische Vervollständigung für SelectionInput-Widgets konfigurieren, damit Nutzer aus einer Liste von Optionen auswählen können. Wenn ein Nutzer beispielsweise Atl für ein Menü eingibt, in dem Städte in den USA angezeigt werden, kann Ihr Element Atlanta vorschlagen, bevor der Nutzer die Eingabe abgeschlossen hat. Sie können bis zu 100 Elemente automatisch vervollständigen lassen.

Autocomplete-Vorschläge können aus den folgenden Datenquellen stammen:

Serverseitige Vervollständigung:Vorschläge werden aus einer von Ihnen definierten Drittanbieter- oder externen Datenquelle generiert.
Google Workspace-Daten:Vorschläge werden aus Google Workspace-Quellen wie Google Workspace-Nutzern oder Google Chat-Bereichen generiert.

Serverseitige automatische Vervollständigung

Sie können ein SelectionInput-Widget so konfigurieren, dass Vorschläge für die automatische Vervollständigung aus einer externen Datenquelle stammen. Sie können Nutzern beispielsweise helfen, aus einer Liste von Vertriebs-Leads aus einem CRM-System (Customer Relationship Management) auszuwählen.

So implementieren Sie die serverseitige automatische Vervollständigung:

Datenquelle definieren:Fügen Sie im Widget SelectionInput ein DataSourceConfig hinzu, das ein RemoteDataSource angibt. Diese Konfiguration verweist auf eine Apps Script-Funktion, die Vorschläge für die automatische Vervollständigung abruft.
Funktion für die automatische Vervollständigung implementieren:Diese Funktion wird ausgelöst, wenn der Nutzer etwas in das Eingabefeld eingibt. Die Funktion sollte Ihre externe Datenquelle basierend auf der Eingabe des Nutzers abfragen und eine Liste mit Vorschlägen zurückgeben.

Das folgende Beispiel zeigt, wie Sie ein SelectionInput-Widget für die serverseitige Vervollständigung konfigurieren:

Apps Script

// In your onConfig function:
var multiSelect1 =
  CardService.newSelectionInput()
    .setFieldName("value1")
    .setTitle("Server Autocomplete")
    .setType(CardService.SelectionInputType.MULTI_SELECT)
    .setMultiSelectMaxSelectedItems(3)
    .addDataSourceConfig(
      CardService.newDataSourceConfig()
        .setRemoteDataSource(
          CardService.newAction().setFunctionName('getAutocompleteResults')
        )
    )
    .addDataSourceConfig(
      CardService.newDataSourceConfig()
        .setPlatformDataSource(
          CardService.newPlatformDataSource()
            .setHostAppDataSource(
              CardService.newHostAppDataSource()
                .setWorkflowDataSource(
                  CardService.newWorkflowDataSource()
                    .setIncludeVariables(true)
                ))
        )
    );

// ... add widget to card ...

Autocomplete-Anfrage verarbeiten

Die in setFunctionName angegebene Funktion (z.B. getAutocompleteResults) erhält ein Ereignisobjekt, wenn der Nutzer etwas in das Feld eingibt. Diese Funktion muss:

Prüfen Sie, ob event.workflow.elementUiAutocomplete.invokedFunction mit dem erwarteten Funktionsnamen übereinstimmt.
Rufen Sie die Eingabe des Nutzers aus event.workflow.elementUiAutocomplete.query ab.
Fragen Sie die externe Datenquelle mit der Abfrage ab.
Gibt bis zu 100 Vorschläge im erforderlichen Format zurück.

Das folgende Beispiel zeigt, wie Sie die Funktion handleAutocompleteRequest() implementieren, um Vorschläge basierend auf der Anfrage des Nutzers zurückzugeben:

Apps Script

function handleAutocompleteRequest(event) {
  var invokedFunction = event.workflow.elementUiAutocomplete.invokedFunction;
  var query = event.workflow.elementUiAutocomplete.query;

  if (invokedFunction != "getAutocompleteResults" || query == undefined || query == "") {
    return {};
  }

  // Query your data source to get results based on the query
  var autocompleteResponse = [
    {
      "text": query + " option 1",
      "value": query + "_option1",
      "start_icon_uri": "https://developers.google.com/workspace/add-ons/images/person-icon.png"
    },
    {
      "text": query + " option 2",
      "value": query + "_option2",
      "start_icon_uri": "https://developers.google.com/workspace/add-ons/images/person-icon.png",
      "bottom_text": "subtitle of option 2"
    },
    {
      "text": query + " option 3",
      "value": query + "_option3",
      "start_icon_uri": "https://developers.google.com/workspace/add-ons/images/person-icon.png"
    }
  ];

  var response = {
    "action": {
      "modify_operations": [
        {
          "update_widget": {
            "selection_input_widget_suggestions": {
              "suggestions": autocompleteResponse
            }
          }
        }
      ]
    }
  };
  return response;
}

// In your onConfig function, handle the autocomplete event
function onConfigAutocompleteTest(event) {
  // Handle autocomplete request
  if (event.workflow && event.workflow.elementUiAutocomplete) {
    return handleAutocompleteRequest(event);
  }

  // ... rest of your card building logic ...
}

Google Workspace-Daten automatisch vervollständigen

Sie können auch Vervollständigungsvorschläge aus Daten in der Google Workspace-Umgebung des Nutzers generieren:

Google Workspace-Nutzer:Nutzer in derselben Google Workspace-Organisation werden eingefügt.
Google Chat-Bereiche:Füllen Sie Google Chat-Bereiche aus, in denen der Nutzer Mitglied ist.

Konfigurieren Sie dazu im Widget SelectionInput das Feld PlatformDataSource und geben Sie für WorkflowDataSourceType entweder USER oder SPACE an.

Apps Script

// User Autocomplete
var multiSelect2 =
  CardService.newSelectionInput()
    .setFieldName("value2")
    .setTitle("User Autocomplete")
    .setType(CardService.SelectionInputType.MULTI_SELECT)
    .setMultiSelectMaxSelectedItems(3)
    .setPlatformDataSource(
      CardService.newPlatformDataSource()
        .setHostAppDataSource(
          CardService.newHostAppDataSource()
            .setWorkflowDataSource(
              CardService.newWorkflowDataSource()
                .setIncludeVariables(true)
                .setType(CardService.WorkflowDataSourceType.USER)
            ))
    );

// Chat Space Autocomplete
var multiSelect3 =
  CardService.newSelectionInput()
    .setFieldName("value3")
    .setTitle("Chat Space Autocomplete")
    .setType(CardService.SelectionInputType.MULTI_SELECT)
    .setMultiSelectMaxSelectedItems(3)
    .setPlatformDataSource(
      CardService.newPlatformDataSource()
        .setHostAppDataSource(
          CardService.newHostAppDataSource()
            .setWorkflowDataSource(
              CardService.newWorkflowDataSource()
                .setIncludeVariables(true)
                .setType(CardService.WorkflowDataSourceType.SPACE)
            ))
    );

Beispiel: Autocomplete-Typen kombinieren

Das folgende Beispiel zeigt eine onConfig-Funktion, die eine Karte mit drei SelectionInput-Widgets erstellt. Sie demonstriert die serverseitige, nutzerbezogene und bereichsbezogene automatische Vervollständigung:

Apps Script

function onConfigAutocompleteTest(event) {
  // Handle autocomplete request
  if (event.workflow && event.workflow.elementUiAutocomplete) {
    return handleAutocompleteRequest(event);
  }

  // Server-side autocomplete widget
  var multiSelect1 =
    CardService.newSelectionInput()
      .setFieldName("value1")
      .setTitle("Server Autocomplete")
      .setType(CardService.SelectionInputType.MULTI_SELECT)
      .setMultiSelectMaxSelectedItems(3)
      .addDataSourceConfig(
        CardService.newDataSourceConfig()
          .setRemoteDataSource(
            CardService.newAction().setFunctionName('getAutocompleteResults')
          )
      )
      .addDataSourceConfig(
        CardService.newDataSourceConfig()
          .setPlatformDataSource(
            CardService.newPlatformDataSource()
              .setHostAppDataSource(
                CardService.newHostAppDataSource()
                  .setWorkflowDataSource(
                    CardService.newWorkflowDataSource()
                      .setIncludeVariables(true)
                  ))
          )
      );

  // User autocomplete widget
  var multiSelect2 =
    CardService.newSelectionInput()
      .setFieldName("value2")
      .setTitle("User Autocomplete")
      .setType(CardService.SelectionInputType.MULTI_SELECT)
      .setMultiSelectMaxSelectedItems(3)
      .setPlatformDataSource(
        CardService.newPlatformDataSource()
          .setHostAppDataSource(
            CardService.newHostAppDataSource()
              .setWorkflowDataSource(
                CardService.newWorkflowDataSource()
                  .setIncludeVariables(true)
                  .setType(CardService.WorkflowDataSourceType.USER)
              ))
      );

  // Space autocomplete widget
  var multiSelect3 =
    CardService.newSelectionInput()
      .setFieldName("value3")
      .setTitle("Chat Space Autocomplete")
      .setType(CardService.SelectionInputType.MULTI_SELECT)
      .setMultiSelectMaxSelectedItems(3)
      .setPlatformDataSource(
        CardService.newPlatformDataSource()
          .setHostAppDataSource(
            CardService.newHostAppDataSource()
              .setWorkflowDataSource(
                CardService.newWorkflowDataSource()
                  .setIncludeVariables(true)
                  .setType(CardService.WorkflowDataSourceType.SPACE)
              ))
      );

  var sectionBuilder =
    CardService.newCardSection()
      .addWidget(multiSelect1)
      .addWidget(multiSelect2)
      .addWidget(multiSelect3);

  var card =
    CardService.newCardBuilder()
      .addSection(sectionBuilder)
      .build();
  return card;
}

function handleAutocompleteRequest(event) {
  var invokedFunction = event.workflow.elementUiAutocomplete.invokedFunction;
  var query = event.workflow.elementUiAutocomplete.query;

  if (invokedFunction != "getAutocompleteResults" || query == undefined || query == "") {
    return {};
  }

  // Query your data source to get results
  var autocompleteResponse = [
    {
      "text": query + " option 1",
      "value": query + "_option1",
      "start_icon_uri": "https://developers.google.com/workspace/add-ons/images/person-icon.png"
    },
    {
      "text": query + " option 2",
      "value": query + "_option2",
      "start_icon_uri": "https://developers.google.com/workspace/add-ons/images/person-icon.png",
      "bottom_text": "subtitle of option 2"
    },
    {
      "text": query + " option 3",
      "value": query + "_option3",
      "start_icon_uri": "https://developers.google.com/workspace/add-ons/images/person-icon.png"
    }
  ];

  var response = {
    "action": {
      "modify_operations": [
        {
          "update_widget": {
            "selection_input_widget_suggestions": {
              "suggestions": autocompleteResponse
            }
          }
        }
      ]
    }
  };
  return response;
}

Spezifische Funktionen für Workspace Flows

Einige Karten-Widgets haben spezielle Workspace Flows-Funktionen, die hier beschrieben werden.

TextInput und SelectionInput

Die Widgets TextInput und SelectionInput haben die folgenden Workspace Flows-spezifischen Funktionen:

includeVariables: Eine boolesche Property, mit der Nutzer Variablen aus vorherigen Schritten auswählen können.
type: Ein aufgezählter Wert, der Vorschläge automatisch vervollständigt. Unterstützte Werte:
- USER: Stellt automatisch vervollständigte Vorschläge für Personen in den Kontakten des Nutzers bereit.
- SPACE: Bietet Vorschläge für die automatische Vervollständigung für Google Chat-Gruppenbereiche, in denen der Nutzer Mitglied ist.

Wenn sowohl includeVariables als auch type festgelegt sind, werden die beiden Erfahrungen im Eingabefeld kombiniert. Nutzer können eine Variable des entsprechenden type aus einem Drop-down-Menü auswählen und sich automatisch vervollständigte Vorschläge dafür ansehen.

Abbildung 1:Ein Nutzer sieht sich Autocomplete-Vorschläge an, wenn er einen Bereich auswählt.
Abbildung 2:Ein Nutzer wählt die Ausgabevariable eines vorherigen Schritts aus dem Drop-down-Menü „➕Variablen“ aus.

Überlegungen und Einschränkungen für Karten

Die Kartennavigation wie popCard(), pushCard() und updateCard() wird in Add-ons, die Flows erweitern, nicht unterstützt.
Wenn SelectionInput in einer Variablenauswahl verwendet wird, unterstützen Widgets nur "type": "MULTI_SELECT". An anderen Stellen in Konfigurationskarten unterstützt SelectionInput alle Werte von SelectionType.

Konfigurationskarte für einen Schritt erstellen Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Konfigurationskarte definieren

Manifestdatei bearbeiten

JSON

Code bearbeiten

Apps Script

Automatische Vervollständigung für Eingabe-Widgets einrichten

Serverseitige automatische Vervollständigung

Apps Script

Autocomplete-Anfrage verarbeiten

Apps Script

Google Workspace-Daten automatisch vervollständigen

Apps Script

Beispiel: Autocomplete-Typen kombinieren

Apps Script

Spezifische Funktionen für Workspace Flows

TextInput und SelectionInput

Überlegungen und Einschränkungen für Karten

Weitere Informationen

Konfigurationskarte für einen Schritt erstellen