Tạo thẻ cấu hình cho một bước

Xem trước có giới hạn: Việc mở rộng Google Workspace Studio bằng các tiện ích bổ sung đang ở giai đoạn xem trước có giới hạn. Tìm hiểu thêm

Hướng dẫn này giải thích cách tạo một thẻ cấu hình cho phép người dùng tuỳ chỉnh và cung cấp thông tin đầu vào cho một bước trong Google Workspace Studio.

Nhìn chung, để tạo một thẻ cấu hình, bạn sẽ tạo một giao diện thẻ giống như khi tạo bất kỳ tiện ích bổ sung nào khác của Google Workspace. Để được trợ giúp về cách tạo giao diện thẻ cấu hình, hãy xem các mục sau:

• Trình tạo thẻ, một công cụ tương tác giúp bạn tạo và xác định thẻ.
• Thẻ trong tài liệu tham khảo về API tiện ích bổ sung của Google Workspace.
• Card Service, một dịch vụ Apps Script cho phép tập lệnh định cấu hình và tạo thẻ.
• Giao diện dựa trên thẻ trong tài liệu dành cho nhà phát triển tiện ích bổ sung của Google Workspace.

Một số tiện ích thẻ có các tính năng và chức năng đặc biệt dành riêng cho Workspace Studio, được trình bày chi tiết trong hướng dẫn này.

Xác định thẻ cấu hình

Xác định thẻ cấu hình trong cả tệp kê khai Apps Script và trong mã.

Ví dụ sau đây cho thấy cách tạo một thẻ cấu hình yêu cầu người dùng chọn một không gian trên Google Chat.

Chỉnh sửa tệp kê khai

Trong tệp kê khai, hãy xác định 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"
          }
        }
      ]
    }
  }
}

Chỉnh sửa đoạn mã

Trong mã ứng dụng, hãy trả về một thẻ.

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

Thiết lập tính năng tự động hoàn thành cho các tiện ích đầu vào

Bạn có thể thiết lập tính năng tự động hoàn tất cho các tiện ích SelectionInput để giúp người dùng chọn trong danh sách các lựa chọn. Ví dụ: nếu người dùng bắt đầu nhập Atl cho một trình đơn điền sẵn các thành phố ở Hoa Kỳ, thì phần tử của bạn có thể tự động đề xuất Atlanta trước khi người dùng nhập xong. Bạn có thể tự động hoàn tất tối đa 100 mục.

Đề xuất tự động hoàn thành có thể đến từ các nguồn dữ liệu sau:

• Tính năng tự động hoàn thành phía máy chủ: Các đề xuất được điền sẵn từ một nguồn dữ liệu bên ngoài hoặc bên thứ ba do bạn xác định.
• Dữ liệu trên Google Workspace: Các đề xuất được lấy từ các nguồn trên Google Workspace, chẳng hạn như người dùng Google Workspace hoặc không gian trên Google Chat.

Tính năng tự động hoàn thành phía máy chủ

Bạn có thể định cấu hình một tiện ích SelectionInput để tự động hoàn thành các đề xuất từ một nguồn dữ liệu bên ngoài. Ví dụ: bạn có thể giúp người dùng chọn trong danh sách khách hàng tiềm năng từ hệ thống quản lý quan hệ khách hàng (CRM).

Để triển khai tính năng tự động hoàn thành phía máy chủ, bạn cần:

1. Xác định nguồn dữ liệu: Trong tiện ích SelectionInput, hãy thêm một DataSourceConfig chỉ định một RemoteDataSource. Cấu hình này trỏ đến một hàm Apps Script tìm nạp các đề xuất tự động hoàn thành.
2. Triển khai hàm tự động hoàn thành: Hàm này được kích hoạt khi người dùng nhập vào trường nhập. Hàm này sẽ truy vấn nguồn dữ liệu bên ngoài dựa trên dữ liệu đầu vào của người dùng và trả về danh sách các đề xuất.

Ví dụ sau đây cho thấy cách định cấu hình tiện ích SelectionInput cho tính năng tự động hoàn thành phía máy chủ:

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

Xử lý yêu cầu tự động hoàn thành

Hàm được chỉ định trong setFunctionName (ví dụ: getAutocompleteResults) sẽ nhận được một đối tượng sự kiện khi người dùng nhập vào trường. Hàm này phải:

1. Kiểm tra event.workflow.elementUiAutocomplete.invokedFunction để đảm bảo tên này khớp với tên hàm dự kiến.
2. Lấy thông tin đầu vào của người dùng từ event.workflow.elementUiAutocomplete.query.
3. Truy vấn nguồn dữ liệu bên ngoài bằng truy vấn.
4. Trả về tối đa 100 đề xuất theo định dạng bắt buộc.

Ví dụ sau đây cho thấy cách triển khai hàm handleAutocompleteRequest() để trả về các đề xuất dựa trên truy vấn của người dùng:

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

Tính năng tự động hoàn thành dữ liệu trong Google Workspace

Bạn cũng có thể điền sẵn các đề xuất tự động hoàn thành từ dữ liệu trong môi trường Google Workspace của người dùng:

• Người dùng Google Workspace: Điền sẵn thông tin người dùng trong cùng một tổ chức Google Workspace.
• Không gian trong Google Chat: Điền sẵn các không gian trong Google Chat mà người dùng là thành viên.

Để định cấu hình chế độ này, hãy đặt PlatformDataSource trong tiện ích SelectionInput, chỉ định WorkflowDataSourceType là USER hoặc 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)
            ))
    );

Ví dụ: Kết hợp các loại tính năng tự động hoàn thành

Ví dụ sau đây cho thấy một hàm onConfig tạo thẻ có 3 tiện ích SelectionInput, minh hoạ tính năng tự động hoàn thành phía máy chủ, người dùng và không gian:

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

Tuỳ chỉnh các nút chọn biến

Bạn có thể tuỳ chỉnh nút bộ chọn biến bằng cách đặt kích thước và nhãn cho nút.

Kích thước nút

Để đặt kích thước nút, hãy dùng setVariableButtonSize() với một trong các giá trị enum VariableButtonSize sau:

• UNSPECIFIED: Mặc định. Nút này có kích thước nhỏ gọn trong bảng điều khiển bên và có kích thước đầy đủ trong các bối cảnh khác.
• COMPACT: Nút chỉ hiển thị dấu cộng (+).
• FULL_SIZE: Nút này hiển thị nhãn văn bản đầy đủ.

Nhãn nút

Để đặt văn bản của nút, hãy sử dụng setVariableButtonLabel().

Ví dụ: Tuỳ chỉnh bộ chọn biến

Ví dụ sau đây minh hoạ cách định cấu hình các tiện ích TextInput với nhiều kích thước nút bộ chọn biến và nhãn tuỳ chỉnh.

• 

  Hình 1: Tuỳ chỉnh nút chọn biến trên web.

• 

  Hình 2: Tuỳ chỉnh nút chọn biến trong bảng điều khiển bên của tiện ích bổ sung.

Sau đây là tệp kê khai để tuỳ chỉnh các nút bộ chọn biến:

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

Dưới đây là mã để tuỳ chỉnh các nút chọn biến:

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

Các tính năng dành riêng cho Workspace Studio

Một số tiện ích thẻ có chức năng và tính năng đặc biệt dành riêng cho Workspace Studio, được mô tả chi tiết tại đây.

TextInput và SelectionInput

Các tiện ích TextInput và SelectionInput có những tính năng dành riêng cho Workspace Studio sau đây:

• includeVariables: Một thuộc tính boolean cho phép người dùng chọn các biến từ các bước trước. Để bộ chọn biến xuất hiện trong các bước sau, cả sự kiện bắt đầu và ít nhất một biến đầu ra tương ứng phải liên kết với biến.
• type: Một giá trị được liệt kê tự động hoàn thành các đề xuất. Sau đây là các giá trị được hỗ trợ:
  • USER: Đưa ra đề xuất tự động hoàn thành cho những người trong danh bạ của người dùng.
  • SPACE: Đưa ra các đề xuất tự động hoàn thành cho những không gian trên Google Chat mà người dùng là thành viên.

Khi cả includeVariables và type đều được đặt, trường nhập sẽ kết hợp các trải nghiệm của chúng. Người dùng có thể chọn một biến số của type trùng khớp trong trình đơn thả xuống và xem các đề xuất tự động hoàn thành cho biến số đó.

• 

  Hình 3: Người dùng xem xét các đề xuất tự động hoàn thành khi chọn một không gian.

• 

  Hình 4: Người dùng chọn biến đầu ra của một bước trước đó trong trình đơn thả xuống ➕Biến.

Chỉ chọn một biến đầu ra bằng trình đơn mục bổ sung

Bạn có thể định cấu hình một tiện ích SelectionInput để cho phép người dùng chọn một biến đầu ra duy nhất từ bước trước bằng cách sử dụng một trình đơn tràn.

Khi bạn đặt SelectionInputType thành OVERFLOW_MENU, tiện ích này sẽ đóng vai trò là một bộ chọn biến chuyên dụng. Không giống như việc sử dụng includeVariables với TextInput (chuyển đổi giá trị biến thành chuỗi), OVERFLOW_MENU sẽ giữ lại kiểu dữ liệu ban đầu của biến đã chọn.

Apps Script

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

Cho phép người dùng kết hợp văn bản và các biến đầu ra

Bạn có thể định cấu hình các tiện ích TextInput để kiểm soát cách người dùng tương tác với văn bản và biến đầu ra bằng cách sử dụng setInputMode().

• RICH_TEXT: Cho phép người dùng kết hợp văn bản và các biến đầu ra. Kết quả là một chuỗi được nối duy nhất.
• PLAIN_TEXT: Hạn chế dữ liệu đầu vào. Người dùng có thể nhập văn bản hoặc chọn một biến đầu ra duy nhất. Khi bạn chọn một biến thể, mọi văn bản hiện có sẽ bị thay thế. Sử dụng chế độ này để thực thi các loại dữ liệu cụ thể được xác định trong tệp kê khai.

Hình ảnh sau đây cho thấy 2 tiện ích TextInput. Thao tác đầu tiên được định cấu hình dưới dạng RICH_TEXT và có văn bản cũng như một biến đầu ra. Thứ hai được định cấu hình là PLAIN_TEXT và chỉ cho phép một biến đầu ra.

• 

  Hình 5: Tiện ích nhập văn bản được định cấu hình dưới dạng RICH_TEXT và PLAIN_TEXT.

Bạn nên đặt chế độ nhập một cách rõ ràng cho tất cả các tiện ích TextInput.

Dưới đây là tệp kê khai để định cấu hình các tiện ích TextInput bằng nhiều chế độ nhập:

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

Dưới đây là mã để định cấu hình các tiện ích TextInput bằng nhiều chế độ nhập:

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

Những điểm cần lưu ý và hạn chế đối với thẻ

• Thao tác điều hướng bằng thẻ như popCard(), pushCard() và updateCard() không được hỗ trợ trong các tiện ích bổ sung mở rộng Workspace Studio.

• Khi SelectionInput được dùng trong một bộ chọn biến, các tiện ích chỉ hỗ trợ "type": "MULTI_SELECT". Ở những nơi khác trong thẻ cấu hình, SelectionInput hỗ trợ tất cả các giá trị của SelectionType.

Chủ đề có liên quan

• Tạo một bước
• Biến đầu vào
• Xác thực biến đầu vào
• Biến đầu ra
• Ghi nhật ký hoạt động và lỗi
• Đối tượng sự kiện của Workspace Studio