Konfigurationskarte für einen Schritt erstellen

In diesem Leitfaden wird beschrieben, wie Sie eine Konfigurationskarte erstellen, mit der Nutzer einen Schritt in Google Workspace Studio 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 Studio-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": "Chat space selector",
      "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": "onExecuteSpacePicker"
          }
        }
      ]
    }
  }
}

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() {

  const selectionInput = CardService.newSelectionInput()
    .setTitle("First Value")
    .setFieldName("chooseSpace")
    .setType(CardService.SelectionInputType.MULTI_SELECT)
    .setPlatformDataSource(
      CardService.newPlatformDataSource()
        .setHostAppDataSource(
          CardService.newHostAppDataSource()
            .setWorkflowDataSource(
              CardService.newWorkflowDataSource()
                .setIncludeVariables(true)
                .setType(CardService.WorkflowDataSourceType.SPACE)
            )
        )
    );

  const cardSection = CardService.newCardSection()
    .setHeader("Select Chat Space")
    .setId("section_1")
    .addWidget(selectionInput)

  var card = CardService.newCardBuilder()
    .addSection(cardSection)
    .build();

  return card;
}

function onExecuteSpacePicker(e) {
}

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.

Vorschläge für die automatische Vervollständigung können aus den folgenden Datenquellen stammen:

Serverseitige Vervollständigung:Vorschläge werden aus einer Drittanbieter- oder externen Datenquelle generiert, die Sie definieren.
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 dem 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 zur automatischen 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 den event.workflow.elementUiAutocomplete.invokedFunction, um sicherzugehen, dass er 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
  let autocompleteResponse = AddOnsResponseService.newUpdateWidget()
    .addSuggestion(
      query + " option 1",
      query + "_option1",
      false,
      "https://developers.google.com/workspace/add-ons/images/person-icon.png",
      "option 1 bottom text"
    )
    .addSuggestion(
      query + " option 2",
      query + "_option2",
      false,
      "https://developers.google.com/workspace/add-ons/images/person-icon.png",
      "option 2 bottom text"
    ).addSuggestion(
      query + " option 3",
      query + "_option3",
      false,
      "https://developers.google.com/workspace/add-ons/images/person-icon.png",
      "option 3 bottom text"
    );

  const modifyAction = AddOnsResponseService.newAction()
    .addModifyCard(
      AddOnsResponseService.newModifyCard()
        .setUpdateWidget(autocompleteResponse)
    );

  return AddOnsResponseService.newRenderActionBuilder()
    .setAction(modifyAction)
    .build();
}

// 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 Vorschläge für die automatische Vervollständigung aus Daten in der Google Workspace-Umgebung des Nutzers generieren:

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

Legen Sie dazu im Widget SelectionInput das Feld PlatformDataSource fest 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:

JSON

{
  "timeZone": "America/Los_Angeles",
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "addOns": {
    "common": {
      "name": "Autocomplete Demo",
      "logoUrl": "https://www.gstatic.com/images/icons/material/system/1x/pets_black_48dp.png",
      "useLocaleFromApp": true
    },
    "flows": {
      "workflowElements": [
        {
          "id": "autocomplete_demo",
          "state": "ACTIVE",
          "name": "Autocomplete Demo",
          "description": "Provide autocompletion in input fields",
          "workflowAction": {
            "inputs": [
              {
                "id": "value1",
                "description": "A multi-select field with autocompletion",
                "cardinality": "SINGLE",
                "dataType": {
                  "basicType": "STRING"
                }
              }
            ],
            "onConfigFunction": "onConfigAutocomplete",
            "onExecuteFunction": "onExecuteAutocomplete"
          }
        }
      ]
    }
  }
}

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
  let autocompleteResponse = AddOnsResponseService.newUpdateWidget()
    .addSuggestion(
      query + " option 1",
      query + "_option1",
      false,
      "https://developers.google.com/workspace/add-ons/images/person-icon.png",
      "option 1 bottom text"
    )
    .addSuggestion(
      query + " option 2",
      query + "_option2",
      false,
      "https://developers.google.com/workspace/add-ons/images/person-icon.png",
      "option 2 bottom text"
    ).addSuggestion(
      query + " option 3",
      query + "_option3",
      false,
      "https://developers.google.com/workspace/add-ons/images/person-icon.png",
      "option 3 bottom text"
    );

  const modifyAction = AddOnsResponseService.newAction()
    .addModifyCard(
      AddOnsResponseService.newModifyCard()
        .setUpdateWidget(autocompleteResponse)
    );

  return AddOnsResponseService.newRenderActionBuilder()
    .setAction(modifyAction)
    .build();
}

Schaltflächen für die Variablenauswahl anpassen

Sie können die Schaltfläche zur Variablenauswahl anpassen, indem Sie die Schaltflächengröße und das Label festlegen.

Schaltflächengröße

Verwenden Sie setVariableButtonSize() mit einer der folgenden VariableButtonSize-Aufzählungen, um die Schaltflächengröße festzulegen:

UNSPECIFIED: Der Standardwert. Die Schaltfläche ist in der Seitenleiste kompakt und in anderen Kontexten in voller Größe zu sehen.
COMPACT: Auf der Schaltfläche wird nur ein Pluszeichen (+) angezeigt.
FULL_SIZE: Auf der Schaltfläche wird das vollständige Textlabel angezeigt.

Schaltflächenlabel

Verwenden Sie setVariableButtonLabel(), um den Schaltflächentext festzulegen.

Beispiel: Anpassung der Variablenauswahl

Im folgenden Beispiel sehen Sie, wie Sie TextInput-Widgets mit unterschiedlichen Schaltflächengrößen für die Variablenauswahl und einem benutzerdefinierten Label konfigurieren.

Abbildung 1:Anpassung der Schaltfläche zur Variablenauswahl im Web
Abbildung 2:Anpassung der Schaltfläche zur Variablenauswahl in der Seitenleiste eines Add-ons.

Hier ist die Manifestdatei zum Anpassen der Schaltflächen für die Variablenauswahl:

JSON

{
  "timeZone": "America/Los_Angeles",
  "dependencies": {},
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "oauthScopes": [
    "https://www.googleapis.com/auth/script.locale"
  ],
  "addOns": {
    "common": {
      "name": "Variable button customization",
      "logoUrl": "https://www.gstatic.com/images/icons/material/system/1x/pets_black_48dp.png",
      "useLocaleFromApp": true
    },
    "flows": {
      "workflowElements": [
        {
          "id": "variable_picker_customization",
          "state": "ACTIVE",
          "name": "Variable Picker demo",
          "description": "List all possible variable picker customization options",
          "workflowAction": {
            "onConfigFunction": "onUpdateCardConfigFunction",
            "onExecuteFunction": "onUpdateCardExecuteFunction"
          }
        }
      ]
    }
  }
}

Hier ist der Code zum Anpassen der Schaltflächen für die Variablenauswahl:

Apps Script

function onUpdateCardConfigFunction(event) {
  const textInput1 = CardService.newTextInput()
    .setFieldName("value1")
    .setTitle("Regular variable picker button")
    .setHostAppDataSource(
      CardService.newHostAppDataSource().setWorkflowDataSource(
        CardService.newWorkflowDataSource()
          .setIncludeVariables(true)
          .setVariableButtonSize(CardService.VariableButtonSize.UNSPECIFIED)
      )
    );

  const textInput2 = CardService.newTextInput()
    .setFieldName("value2")
    .setTitle("Size: Unspecified")
    .setHostAppDataSource(
      CardService.newHostAppDataSource().setWorkflowDataSource(
        CardService.newWorkflowDataSource()
          .setIncludeVariables(true)
          .setVariableButtonSize(CardService.VariableButtonSize.UNSPECIFIED)
      )
    );

  const textInput3 = CardService.newTextInput()
    .setFieldName("value3")
    .setTitle("Size: Full size")
    .setHostAppDataSource(
      CardService.newHostAppDataSource().setWorkflowDataSource(
        CardService.newWorkflowDataSource()
          .setIncludeVariables(true)
          .setVariableButtonSize(CardService.VariableButtonSize.FULL_SIZE)
      )
    );

  const textInput4 = CardService.newTextInput()
    .setFieldName("value4")
    .setTitle("Size: Compact")
    .setHostAppDataSource(
      CardService.newHostAppDataSource().setWorkflowDataSource(
        CardService.newWorkflowDataSource()
          .setIncludeVariables(true)
          .setVariableButtonSize(CardService.VariableButtonSize.COMPACT)
      )
    );

  const textInput5 = CardService.newTextInput()
    .setFieldName("value5")
    .setTitle("Custom button label")
    .setHostAppDataSource(
      CardService.newHostAppDataSource().setWorkflowDataSource(
        CardService.newWorkflowDataSource()
          .setIncludeVariables(true)
          .setVariableButtonLabel("New button label!")
      )
    );

  var cardSection = CardService.newCardSection()
    .addWidget(textInput1)
    .addWidget(textInput2)
    .addWidget(textInput3)
    .addWidget(textInput4)
    .addWidget(textInput5)
    .setId("section_1");

  var card = CardService.newCardBuilder().addSection(cardSection).build();

  return card;
}

function onUpdateCardExecuteFunction(event) {
}

Workspace Studio-spezifische Funktionen

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

TextInput und SelectionInput

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

includeVariables: Eine boolesche Property, mit der Nutzer Variablen aus vorherigen Schritten auswählen können. Damit die Variablenauswahl in späteren Schritten angezeigt wird, müssen sowohl das Start- als auch mindestens ein entsprechendes Ausgabeereignis der Variablen zugeordnet sein.
type: Ein aufgezählter Wert, der Vorschläge automatisch vervollständigt. Unterstützte Werte:
- USER: Bietet automatisch vervollständigte Vorschläge für Personen in den Kontakten des Nutzers.
- 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 Vorschläge zur automatischen Vervollständigung dafür aufrufen.

Abbildung 3:Ein Nutzer sieht sich die Vorschläge zur automatischen Vervollständigung an, wenn er einen Bereich auswählt.
Abbildung 4:Ein Nutzer wählt die Ausgabevariable eines vorherigen Schritts aus dem Drop-down-Menü „➕Variablen“ aus.

Nur eine Ausgabevariable mit einem Dreipunkt-Menü auswählen

Sie können ein SelectionInput-Widget so konfigurieren, dass Nutzer über ein Überlaufmenü eine einzelne Ausgabevariable aus einem vorherigen Schritt auswählen können.

Wenn Sie SelectionInputType auf OVERFLOW_MENU setzen, dient das Widget als spezielle Variablenauswahl. Im Gegensatz zur Verwendung von includeVariables mit TextInput, bei der Variablenwerte in Strings konvertiert werden, wird bei OVERFLOW_MENU der ursprüngliche Datentyp der ausgewählten Variablen beibehalten.

Apps Script

const selectionInput = CardService.newSelectionInput()
  .setFieldName("variable_picker_1")
  .setTitle("Variable Picker")
  .setType(
    CardService.SelectionInputType.OVERFLOW_MENU
  );

Nutzern erlauben, Text und Ausgabevariablen zu kombinieren

Sie können TextInput-Widgets konfigurieren, um zu steuern, wie Nutzer mit Text und Ausgabevariablen über setInputMode() interagieren.

RICH_TEXT: Nutzer können Text und Ausgabevariablen kombinieren. Das Ergebnis ist ein einzelner verketteter String.
PLAIN_TEXT: Schränkt die Eingabe ein. Nutzer können entweder Text eingeben oder eine einzelne Ausgabevariable auswählen. Wenn Sie eine Variable auswählen, wird der vorhandene Text ersetzt. In diesem Modus werden bestimmte im Manifest definierte Datentypen erzwungen.

Das folgende Bild zeigt zwei TextInput-Widgets. Die erste ist als RICH_TEXT konfiguriert und enthält Text und eine Ausgabevariable. Die zweite ist als PLAIN_TEXT konfiguriert und lässt nur eine Ausgabevariable zu.

Abbildung 5:Als RICH_TEXT und PLAIN_TEXT konfigurierte Text-Eingabewidgets.

Wir empfehlen, den Eingabemodus für alle TextInput-Widgets explizit festzulegen.

Hier ist die Manifestdatei zum Konfigurieren von TextInput-Widgets mit verschiedenen Eingabemodi:

JSON

{
  "timeZone": "America/Toronto",
  "dependencies": {},
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "addOns": {
    "common": {
      "name": "Text and output variable demo",
      "logoUrl": "https://www.gstatic.com/images/icons/material/system/1x/pets_black_48dp.png",
      "useLocaleFromApp": true
    },
    "flows": {
      "workflowElements": [
        {
          "id": "richTextDemo",
          "state": "ACTIVE",
          "name": "Rich Text Demo",
          "description": "Show the difference between rich text and plain text TextInput widgets",
          "workflowAction": {
            "inputs": [
              {
                "id": "value1",
                "description": "First user input",
                "cardinality": "SINGLE",
                "dataType": {
                  "basicType": "STRING"
                }
              },
              {
                "id": "value2",
                "description": "Second user input",
                "cardinality": "SINGLE",
                "dataType": {
                  "basicType": "STRING"
                }
              }
            ],
            "onConfigFunction": "onConfiguration",
            "onExecuteFunction": "onExecution"
          }
        }
      ]
    }
  }
}

Hier ist der Code zum Konfigurieren von TextInput-Widgets mit verschiedenen Eingabemodi:

Apps Script

function onConfiguration() {
  const input1 = CardService.newTextInput()
    .setFieldName("value1")
    .setId("value1")
    .setTitle("Rich Text")
    .setHostAppDataSource(
      CardService.newHostAppDataSource()
        .setWorkflowDataSource(
          CardService.newWorkflowDataSource()
            .setIncludeVariables(true)
        )
    )
    // Set input mode to RICH_TEXT to allow mixed text and variables.
    .setInputMode(CardService.TextInputMode.RICH_TEXT);

  const input2 = CardService.newTextInput()
    .setFieldName("value2")
    .setId("value2")
    .setTitle("Plain text")
    .setHostAppDataSource(
      CardService.newHostAppDataSource()
        .setWorkflowDataSource(
          CardService.newWorkflowDataSource()
            .setIncludeVariables(true)
        )
    )
    // Set input mode to PLAIN_TEXT to enforce single variable selection.
    .setInputMode(CardService.TextInputMode.PLAIN_TEXT);

  const section = CardService.newCardSection()
    .addWidget(input1)
    .addWidget(input2);

  const card = CardService.newCardBuilder()
    .addSection(section)
    .build();

  return card;
}

function onExecution(e) {
}

Überlegungen und Einschränkungen für Karten

Die Karten-Navigation wie popCard(), pushCard() und updateCard() wird in Add-ons, die Workspace Studio 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

JSON

Apps Script

Schaltflächen für die Variablenauswahl anpassen

Schaltflächengröße

Schaltflächenlabel

Beispiel: Anpassung der Variablenauswahl

JSON

Apps Script

Workspace Studio-spezifische Funktionen

TextInput und SelectionInput

Nur eine Ausgabevariable mit einem Dreipunkt-Menü auswählen

Apps Script

Nutzern erlauben, Text und Ausgabevariablen zu kombinieren

JSON

Apps Script

Überlegungen und Einschränkungen für Karten

Weitere Informationen

Konfigurationskarte für einen Schritt erstellen