Membuat kartu konfigurasi untuk langkah

Panduan ini menjelaskan cara membuat kartu konfigurasi yang memungkinkan pengguna menyesuaikan dan memberikan input untuk langkah-langkah di Google Workspace Studio.

Secara umum, untuk membuat kartu konfigurasi, Anda membuat antarmuka kartu seperti yang Anda lakukan untuk add-on Google Workspace lainnya. Untuk mendapatkan bantuan dalam membuat antarmuka kartu konfigurasi, lihat artikel berikut:

  • Card Builder, alat interaktif yang membantu Anda membuat dan menentukan kartu.
  • Kartu dalam dokumentasi referensi API add-on Google Workspace.
  • Card Service, layanan Apps Script yang memungkinkan skrip mengonfigurasi dan membuat kartu.
  • Antarmuka berbasis kartu dalam dokumentasi developer add-on Google Workspace.

Beberapa widget kartu memiliki fungsi dan fitur khusus Workspace Studio, yang dijelaskan dalam panduan ini.

Menentukan kartu konfigurasi

Tentukan kartu konfigurasi dalam manifes Apps Script dan dalam kode.

Contoh berikut menunjukkan cara membuat kartu konfigurasi yang meminta pengguna memilih ruang Google Chat.

Mengedit file manifes

Dalam file manifes, tentukan 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"
          }
        }
      ]
    }
  }
}

Edit kode

Dalam kode aplikasi, kembalikan kartu.

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

Menyiapkan pelengkapan otomatis untuk widget input

Anda dapat mengonfigurasi pelengkapan otomatis untuk widget SelectionInput guna membantu pengguna memilih dari daftar opsi. Misalnya, jika pengguna mulai mengetik Atl untuk menu yang mengisi kota-kota di Amerika Serikat, elemen Anda dapat menyarankan Atlanta secara otomatis sebelum pengguna selesai mengetik. Anda dapat melengkapi otomatis hingga 100 item.

Saran pelengkapan otomatis dapat berasal dari sumber data berikut:

  • Penyelesaian otomatis sisi server: Saran diisi dari sumber data pihak ketiga atau eksternal yang Anda tentukan.
  • Data Google Workspace: Saran diisi dari sumber Google Workspace, seperti pengguna Google Workspace atau ruang Google Chat.

Pelengkapan otomatis sisi server

Anda dapat mengonfigurasi widget SelectionInput untuk melengkapi otomatis saran dari sumber data eksternal. Misalnya, Anda dapat membantu pengguna memilih dari daftar prospek penjualan dari sistem pengelolaan hubungan pelanggan (CRM).

Untuk menerapkan pelengkapan otomatis sisi server, Anda harus:

  1. Tentukan sumber data: Di widget SelectionInput, tambahkan DataSourceConfig yang menentukan RemoteDataSource. Konfigurasi ini mengarah ke fungsi Apps Script yang mengambil saran pelengkapan otomatis.
  2. Terapkan fungsi pelengkapan otomatis: Fungsi ini dipicu saat pengguna mengetik di kolom input. Fungsi ini harus mengkueri sumber data eksternal Anda berdasarkan input pengguna dan menampilkan daftar saran.

Contoh berikut menunjukkan cara mengonfigurasi widget SelectionInput untuk pelengkapan otomatis di sisi server:

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

Menangani permintaan pelengkapan otomatis

Fungsi yang ditentukan di setFunctionName (misalnya, getAutocompleteResults) menerima objek peristiwa saat pengguna mengetik di kolom. Fungsi ini harus:

  1. Periksa event.workflow.elementUiAutocomplete.invokedFunction untuk memastikan nama fungsi cocok dengan yang diharapkan.
  2. Mendapatkan input pengguna dari event.workflow.elementUiAutocomplete.query.
  3. Buat kueri sumber data eksternal menggunakan kueri.
  4. Menampilkan hingga 100 saran dalam format yang diperlukan.

Contoh berikut menunjukkan cara menerapkan fungsi handleAutocompleteRequest() untuk menampilkan saran berdasarkan kueri pengguna:

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

Pelengkapan otomatis data Google Workspace

Anda juga dapat mengisi saran pelengkapan otomatis dari data dalam lingkungan Google Workspace pengguna:

  • Pengguna Google Workspace: Mengisi pengguna dalam organisasi Google Workspace yang sama.
  • Ruang Google Chat: Mengisi ruang Google Chat tempat pengguna menjadi anggota.

Untuk mengonfigurasi ini, tetapkan PlatformDataSource di widget SelectionInput, dengan menentukan WorkflowDataSourceType sebagai USER atau SPACE.

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

Contoh: Menggabungkan jenis pelengkapan otomatis

Contoh berikut menunjukkan fungsi onConfig yang membuat kartu dengan tiga widget SelectionInput, yang menunjukkan pelengkapan otomatis sisi server, pengguna, dan ruang:

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

Menyesuaikan tombol pemilih variabel

Anda dapat menyesuaikan tombol pemilih variabel dengan menyetel ukuran dan label tombol.

Ukuran tombol

Untuk menyetel ukuran tombol, gunakan setVariableButtonSize() dengan salah satu enum VariableButtonSize berikut:

  • UNSPECIFIED: Default. Tombol ini ringkas di panel samping dan berukuran penuh dalam konteks lain.
  • COMPACT: Tombol hanya menampilkan tanda plus (+).
  • FULL_SIZE: Tombol menampilkan label teks lengkap.

Label tombol

Untuk menetapkan teks tombol, gunakan setVariableButtonLabel().

Contoh: Penyesuaian pemilih variabel

Contoh berikut menunjukkan cara mengonfigurasi widget TextInput dengan berbagai ukuran tombol pemilih variabel dan label kustom.

  • Penyesuaian tombol pemilih variabel di web.
    Gambar 1: Penyesuaian tombol pemilih variabel di web.
  • Penyesuaian tombol pemilih variabel di panel samping add-on.
    Gambar 2: Penyesuaian tombol pemilih variabel di panel samping add-on.

Berikut adalah file manifes untuk menyesuaikan tombol pemilih variabel:

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

Berikut kode untuk menyesuaikan tombol pemilih variabel:

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

Fitur khusus Workspace Studio

Beberapa widget kartu memiliki fungsi dan fitur khusus Workspace Studio, yang dijelaskan di sini.

TextInput dan SelectionInput

Widget TextInput dan SelectionInput memiliki fitur khusus Workspace Studio berikut:

  • includeVariables: Properti boolean yang memungkinkan pengguna memilih variabel dari langkah sebelumnya. Agar pemilih variabel ditampilkan pada langkah-langkah selanjutnya, peristiwa awal dan setidaknya satu variabel output yang sesuai harus dipetakan ke variabel.
  • type: Nilai yang di-enum yang melengkapi otomatis saran. Nilai yang didukung meliputi:
    • USER: Memberikan saran pelengkapan otomatis untuk orang-orang dalam kontak pengguna.
    • SPACE: Memberikan saran pelengkapan otomatis untuk ruang Google Chat tempat pengguna menjadi anggotanya.

Jika includeVariables dan type ditetapkan, kolom input akan menggabungkan pengalaman keduanya. Pengguna dapat memilih variabel type yang cocok dari menu drop-down, dan melihat saran pelengkapan otomatis untuk variabel tersebut.

  • Saran pelengkapan otomatis untuk ruang Google Chat.
    Gambar 3: Pengguna meninjau saran pelengkapan otomatis saat memilih ruang.
  • Menu variabel memungkinkan pengguna memilih variabel output dari langkah sebelumnya.
    Gambar 4: Pengguna memilih variabel output dari langkah sebelumnya dari drop-down ➕Variabel.

Memilih hanya satu variabel output dengan menu tambahan

Anda dapat mengonfigurasi widget SelectionInput untuk memungkinkan pengguna memilih satu variabel output dari langkah sebelumnya menggunakan menu tambahan.

Saat Anda menyetel SelectionInputType ke OVERFLOW_MENU, widget berfungsi sebagai pemilih variabel khusus. Tidak seperti penggunaan includeVariables dengan TextInput, yang mengonversi nilai variabel menjadi string, OVERFLOW_MENU mempertahankan jenis data asli dari variabel yang dipilih.

Apps Script

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

Mengizinkan pengguna menggabungkan teks dan variabel output

Anda dapat mengonfigurasi widget TextInput untuk mengontrol cara pengguna berinteraksi dengan teks dan variabel output menggunakan setInputMode().

  • RICH_TEXT: Memungkinkan pengguna menggabungkan teks dan variabel output. Hasilnya adalah satu string yang digabungkan.
  • PLAIN_TEXT: Membatasi input. Pengguna dapat mengetik teks atau memilih satu variabel output. Memilih variabel akan menggantikan teks yang ada. Gunakan mode ini untuk menerapkan jenis data tertentu yang ditentukan dalam manifes.

Gambar berikut menunjukkan dua widget TextInput. Yang pertama dikonfigurasi sebagai RICH_TEXT dan menampilkan teks serta variabel output. Yang kedua dikonfigurasi sebagai PLAIN_TEXT dan hanya mengizinkan variabel output.

  • Widget input teks yang dikonfigurasi sebagai RICH_TEXT dan PLAIN_TEXT
    Gambar 5: Widget input teks yang dikonfigurasi sebagai RICH_TEXT dan PLAIN_TEXT.

Sebaiknya Anda menetapkan mode input secara eksplisit untuk semua widget TextInput.

Berikut adalah file manifes untuk mengonfigurasi widget TextInput dengan mode input yang berbeda:

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

Berikut kode untuk mengonfigurasi widget TextInput dengan berbagai mode input:

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

Pertimbangan dan batasan kartu

  • Navigasi kartu seperti popCard(), pushCard(), dan updateCard() tidak didukung di add-on yang memperluas Workspace Studio.

  • Saat SelectionInput digunakan di pemilih variabel, widget hanya mendukung "type": "MULTI_SELECT". Di tempat lain dalam kartu konfigurasi, SelectionInput mendukung semua nilai SelectionType.