Tworzenie karty konfiguracji dla kroku

Z tego przewodnika dowiesz się, jak utworzyć kartę konfiguracji, która umożliwia użytkownikom dostosowywanie i podawanie danych wejściowych dla kroku w Google Workspace Studio.

Ogólnie rzecz biorąc, aby utworzyć kartę konfiguracji, musisz utworzyć interfejs karty, tak jak w przypadku każdego innego dodatku do Google Workspace. Aby uzyskać pomoc w tworzeniu interfejsów kart konfiguracji, zapoznaj się z tymi materiałami:

Kreator kart, interaktywne narzędzie, które pomaga tworzyć i definiować karty.
Karta w dokumentacji interfejsu Google Workspace Add-ons API.
Card Service to usługa Apps Script, która umożliwia skryptom konfigurowanie i tworzenie kart.
Interfejsy oparte na kartach w dokumentacji dla programistów dodatków do Google Workspace.

Niektóre widżety kart mają specjalne funkcje i możliwości dostępne w Workspace Studio, które zostały opisane w tym przewodniku.

Definiowanie karty konfiguracji

Zdefiniuj kartę konfiguracji w pliku manifestu Apps Script i w kodzie.

Poniższy przykład pokazuje, jak utworzyć kartę konfiguracji, która prosi użytkowników o wybranie pokoju w Google Chat.

Edytowanie pliku manifestu

W pliku manifestu zdefiniuj workflowElements.

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"
          }
        }
      ]
    }
  }
}

Edytuj kod

W kodzie aplikacji zwróć kartę.

Google 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) {
}

Konfigurowanie autouzupełniania w przypadku widżetów wprowadzania

Możesz skonfigurować autouzupełnianie widżetów SelectionInput, aby ułatwić użytkownikom wybieranie opcji z listy. Jeśli na przykład użytkownik zacznie wpisywać Atl w menu, które zawiera listę miast w Stanach Zjednoczonych, element może automatycznie zasugerować Atlanta, zanim użytkownik skończy wpisywać. Możesz automatycznie uzupełnić maksymalnie 100 produktów.

Sugestie autouzupełniania mogą pochodzić z tych źródeł danych:

Autouzupełnianie po stronie serwera: sugestie są wypełniane na podstawie zdefiniowanego przez Ciebie zewnętrznego źródła danych lub źródła danych innej firmy.
Dane Google Workspace: sugestie są wypełniane na podstawie źródeł Google Workspace, takich jak użytkownicy Google Workspace czy pokoje w Google Chat.

Autouzupełnianie po stronie serwera

Możesz skonfigurować widżet SelectionInput, aby autouzupełniał sugestie z zewnętrznego źródła danych. Możesz na przykład pomóc użytkownikom w wybraniu potencjalnych klientów z listy w systemie zarządzania relacjami z klientami (CRM).

Aby wdrożyć autouzupełnianie po stronie serwera, musisz:

Zdefiniuj źródło danych: w widżecie SelectionInput dodaj DataSourceConfig określający RemoteDataSource. Ta konfiguracja wskazuje funkcję Apps Script, która pobiera sugestie autouzupełniania.
Wdróż funkcję autouzupełniania: ta funkcja jest wywoływana, gdy użytkownik wpisuje tekst w polu wejściowym. Funkcja powinna wysyłać zapytanie do zewnętrznego źródła danych na podstawie danych wejściowych użytkownika i zwracać listę sugestii.

Poniższy przykład pokazuje, jak skonfigurować widżet SelectionInput autouzupełniania po stronie serwera:

Google 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 ...

Obsługa żądania autouzupełniania

Funkcja określona w setFunctionName (np. getAutocompleteResults) otrzymuje obiekt zdarzenia, gdy użytkownik wpisuje tekst w polu. Ta funkcja musi:

Sprawdź wartość parametru event.workflow.elementUiAutocomplete.invokedFunction, aby upewnić się, że jest zgodna z oczekiwaną nazwą funkcji.
Pobierz dane wejściowe użytkownika z event.workflow.elementUiAutocomplete.query.
Wysyłaj zapytania do zewnętrznego źródła danych za pomocą zapytania.
Zwróć maksymalnie 100 sugestii w wymaganym formacie.

Poniższy przykład pokazuje, jak wdrożyć funkcję handleAutocompleteRequest(), aby zwracać sugestie na podstawie zapytania użytkownika:

Google 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 ...
}

Automatyczne uzupełnianie danych Google Workspace

Możesz też wypełniać sugestie autouzupełniania danymi z środowiska Google Workspace użytkownika:

Użytkownicy Google Workspace: wypełnij listę użytkowników w tej samej organizacji Google Workspace.
Pokoje Google Chat: wypełniaj pokoje Google Chat, których użytkownik jest członkiem.

Aby to skonfigurować, ustaw wartość PlatformDataSource w widżecie SelectionInput, określając WorkflowDataSourceType jako USER lub SPACE.

Google 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)
            ))
    );

Przykład: łączenie typów autouzupełniania

Przykład poniżej pokazuje funkcję onConfig, która tworzy kartę z 3 widgetami SelectionInput, demonstrując autouzupełnianie po stronie serwera, użytkownika i przestrzeni:

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"
          }
        }
      ]
    }
  }
}

Google 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();
}

Dostosowywanie przycisków selektora zmiennych

Możesz dostosować przycisk selektora zmiennych, ustawiając jego rozmiar i etykietę.

Rozmiar przycisku

Aby ustawić rozmiar przycisku, użyj setVariableButtonSize() z jedną z tych wartości typu enum: VariableButtonSize

UNSPECIFIED: wartość domyślna. Przycisk jest kompaktowy w panelu bocznym i pełnowymiarowy w innych kontekstach.
COMPACT: przycisk wyświetla tylko znak plusa (+).
FULL_SIZE: przycisk wyświetla pełną etykietę tekstową.

Etykieta przycisku

Aby ustawić tekst przycisku, użyj setVariableButtonLabel().

Przykład: dostosowywanie selektora zmiennych

W przykładzie poniżej pokazujemy, jak skonfigurować widżety TextInput z przyciskami wyboru zmiennych o różnych rozmiarach i niestandardową etykietą.

Rysunek 1. Dostosowywanie przycisku selektora zmiennych w internecie.
Rysunek 2. Dostosowywanie przycisku wyboru zmiennych w panelu bocznym dodatku.

Oto plik manifestu do dostosowywania przycisków selektora zmiennych:

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"
          }
        }
      ]
    }
  }
}

Oto kod do dostosowywania przycisków selektora zmiennych:

Google 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) {
}

Funkcje specyficzne dla Workspace Studio

Niektóre widżety kart mają specjalne funkcje i możliwości Workspace Studio, które zostały opisane tutaj.

TextInput i SelectionInput

Widżety TextInput i SelectionInput mają te funkcje Workspace Studio:

includeVariables: właściwość logiczna, która umożliwia użytkownikom wybieranie zmiennych z poprzednich kroków. Aby w późniejszych krokach wyświetlić selektor zmiennych, zarówno zdarzenie początkowe, jak i co najmniej 1 odpowiadająca mu zmienna wyjściowa muszą być mapowane na zmienną.
type: wartość wyliczeniowa, która automatycznie uzupełnia sugestie. Obsługiwane wartości to:
- USER: podaje sugestie autouzupełniania dotyczące osób z kontaktów użytkownika.
- SPACE: podaje sugestie autouzupełniania dotyczące pokoi w Google Chat, do których należy użytkownik.

Jeśli ustawisz zarówno includeVariables, jak i type, pole wejściowe połączy ich funkcje. Użytkownicy mogą wybrać zmienną pasującego typu type z menu i wyświetlić sugestie autouzupełniania.

Ilustracja 3. Użytkownik sprawdza sugestie autouzupełniania podczas wybierania miejsca.
Ilustracja 4. Użytkownik wybiera zmienną wyjściową poprzedniego działania z menu ➕Zmienne.

Wybieranie tylko jednej zmiennej wyjściowej za pomocą menu dodatkowego

Możesz skonfigurować SelectionInput widżet, aby umożliwić użytkownikom wybieranie pojedynczej zmiennej wyjściowej z poprzedniego kroku za pomocą menu dodatkowego.

Gdy ustawisz wartość SelectionInputType na OVERFLOW_MENU, widżet będzie działać jako dedykowany selektor zmiennych. W przeciwieństwie do używania includeVariables z TextInput, które konwertuje wartości zmiennych na ciągi znaków, OVERFLOW_MENU zachowuje oryginalny typ danych wybranej zmiennej.

Google Apps Script

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

Zezwalanie użytkownikom na łączenie tekstu i zmiennych wyjściowych

Możesz skonfigurować TextInput widżety, aby określić, jak użytkownicy wchodzą w interakcje z tekstem i zmiennymi wyjściowymi za pomocą setInputMode().

RICH_TEXT: umożliwia użytkownikom łączenie tekstu i zmiennych wyjściowych. W wyniku otrzymasz jeden połączony ciąg znaków.
PLAIN_TEXT: ogranicza wprowadzanie danych. Użytkownicy mogą wpisać tekst lub wybrać jedną zmienną wyjściową. Wybranie zmiennej spowoduje zastąpienie istniejącego tekstu. Użyj tego trybu, aby wymusić określone typy danych zdefiniowane w pliku manifestu.

Obraz poniżej przedstawia 2 widżety TextInput. Pierwsza jest skonfigurowana jako RICH_TEXT i zawiera tekst oraz zmienną wyjściową. Drugi jest skonfigurowany jako PLAIN_TEXT i umożliwia tylko zmienną wyjściową.

Ilustracja 5. Widżety wprowadzania tekstu skonfigurowane jako RICH_TEXT i PLAIN_TEXT.

Zalecamy jawne ustawienie trybu wprowadzania danych dla wszystkich widżetów TextInput.

Oto plik manifestu do konfigurowania widżetów TextInput w różnych trybach wprowadzania:

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"
          }
        }
      ]
    }
  }
}

Oto kod do konfigurowania widżetów TextInput w różnych trybach wprowadzania:

Google 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) {
}

Uwagi i ograniczenia dotyczące kart

Nawigacja za pomocą kart, np.popCard(),pushCard() iupdateCard(), nie jest obsługiwana w dodatkach rozszerzających Workspace Studio.
Gdy SelectionInput jest używany w selektorze zmiennych, widżety obsługują tylko "type": "MULTI_SELECT". W innych kartach konfiguracji SelectionInput obsługuje wszystkie wartości SelectionType.

Tworzenie karty konfiguracji dla kroku Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Definiowanie karty konfiguracji

Edytowanie pliku manifestu

JSON

Edytuj kod

Google Apps Script

Konfigurowanie autouzupełniania w przypadku widżetów wprowadzania

Autouzupełnianie po stronie serwera

Google Apps Script

Obsługa żądania autouzupełniania

Google Apps Script

Automatyczne uzupełnianie danych Google Workspace

Google Apps Script

Przykład: łączenie typów autouzupełniania

JSON

Google Apps Script

Dostosowywanie przycisków selektora zmiennych

Rozmiar przycisku

Etykieta przycisku

Przykład: dostosowywanie selektora zmiennych

JSON

Google Apps Script

Funkcje specyficzne dla Workspace Studio

TextInput i SelectionInput

Wybieranie tylko jednej zmiennej wyjściowej za pomocą menu dodatkowego

Google Apps Script

Zezwalanie użytkownikom na łączenie tekstu i zmiennych wyjściowych

JSON

Google Apps Script

Uwagi i ograniczenia dotyczące kart

Powiązane artykuły

Tworzenie karty konfiguracji dla kroku