หน้านี้ได้รับการแปลโดย Cloud Translation API

สร้างการ์ดการกำหนดค่าสำหรับขั้นตอน

คู่มือนี้อธิบายวิธีสร้างการ์ดการกำหนดค่าที่ช่วยให้ผู้ใช้ปรับแต่งและระบุข้อมูลสำหรับขั้นตอนใน Google Workspace Studio ได้

โดยทั่วไปแล้ว หากต้องการสร้างการ์ดการกำหนดค่า คุณจะต้องสร้างอินเทอร์เฟซการ์ดเหมือนกับที่สร้างสำหรับส่วนเสริมอื่นๆ ของ Google Workspace หากต้องการความช่วยเหลือในการสร้างอินเทอร์เฟซการ์ดการกำหนดค่า โปรดดูข้อมูลต่อไปนี้

เครื่องมือสร้างการ์ด ซึ่งเป็นเครื่องมือแบบอินเทอร์แอกทีฟที่ช่วยคุณสร้างและกำหนดการ์ด
การ์ดใน เอกสารประกอบข้อมูลอ้างอิงของ Google Workspace Add-ons API
บริการการ์ด ซึ่งเป็น บริการ Apps Script ที่ช่วยให้สคริปต์กำหนดค่าและสร้าง การ์ดได้
อินเทอร์เฟซแบบการ์ดใน เอกสารสำหรับนักพัฒนาส่วนเสริมของ Google Workspace

วิดเจ็ตการ์ดบางรายการมีฟังก์ชันและฟีเจอร์พิเศษเฉพาะ Workspace Studio ซึ่งมีรายละเอียดอยู่ในคู่มือนี้

กำหนดการ์ดการกำหนดค่า

กำหนดการ์ดการกำหนดค่าทั้งในไฟล์ Manifest ของ Apps Script และในโค้ด

ตัวอย่างต่อไปนี้แสดงวิธีสร้างการ์ดการกำหนดค่าที่ขอให้ผู้ใช้ เลือกพื้นที่ทำงาน Google Chat

แก้ไขไฟล์ Manifest

กำหนด workflowElements ในไฟล์ Manifest

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

แก้ไขโค้ด

ส่งคืนการ์ดในโค้ดแอปพลิเคชัน

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

ตั้งค่าการเติมข้อความอัตโนมัติสำหรับวิดเจ็ตอินพุต

คุณสามารถกำหนดค่าการเติมข้อความอัตโนมัติสำหรับวิดเจ็ต SelectionInput เพื่อช่วยให้ผู้ใช้เลือกจากรายการตัวเลือกได้ ตัวอย่างเช่น หากผู้ใช้เริ่มพิมพ์ Atl สำหรับเมนูที่แสดงเมืองในสหรัฐอเมริกา องค์ประกอบของคุณจะสามารถแนะนำ Atlanta โดยอัตโนมัติก่อนที่ผู้ใช้จะพิมพ์เสร็จ คุณสามารถป้อนข้อมูลอัตโนมัติได้สูงสุด 100 รายการ

คำแนะนำการเติมข้อความอัตโนมัติอาจมาจากแหล่งข้อมูลต่อไปนี้

การเติมข้อความอัตโนมัติฝั่งเซิร์ฟเวอร์: ระบบจะสร้างคำแนะนำจากแหล่งข้อมูลบุคคลที่สาม หรือแหล่งข้อมูลภายนอกที่คุณกำหนด
ข้อมูล Google Workspace: ระบบจะสร้างคำแนะนำจากแหล่งที่มาของ Google Workspace เช่น ผู้ใช้ Google Workspace หรือพื้นที่ Google Chat

การเติมข้อความอัตโนมัติฝั่งเซิร์ฟเวอร์

คุณกำหนดค่าวิดเจ็ต SelectionInput เพื่อเติมข้อความอัตโนมัติจากแหล่งข้อมูลภายนอกได้ เช่น คุณช่วยให้ผู้ใช้เลือกจากรายชื่อผู้มีโอกาสเป็นลูกค้าได้จากระบบการจัดการลูกค้าสัมพันธ์ (CRM)

หากต้องการใช้การเติมข้อความอัตโนมัติฝั่งเซิร์ฟเวอร์ คุณต้องทำดังนี้

กำหนดแหล่งข้อมูล: ในวิดเจ็ต SelectionInput ให้เพิ่ม DataSourceConfig ที่ระบุRemoteDataSource การกำหนดค่านี้ชี้ไปยังฟังก์ชัน Apps Script ที่ ดึงคำแนะนำในการเติมข้อความอัตโนมัติ
ใช้ฟังก์ชันเติมข้อความอัตโนมัติ: ฟังก์ชันนี้จะทริกเกอร์เมื่อผู้ใช้พิมพ์ในช่องป้อนข้อมูล ฟังก์ชันควรค้นหาแหล่งข้อมูลภายนอกตามข้อมูลที่ผู้ใช้ป้อนและแสดงรายการคำแนะนำ

ตัวอย่างต่อไปนี้แสดงวิธีกำหนดค่าวิดเจ็ต SelectionInput สำหรับการเติมข้อความอัตโนมัติฝั่งเซิร์ฟเวอร์

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

จัดการคำขอเติมข้อความอัตโนมัติ

ฟังก์ชันที่ระบุใน setFunctionName (เช่น getAutocompleteResults) จะได้รับออบเจ็กต์เหตุการณ์เมื่อผู้ใช้พิมพ์ในช่อง ฟังก์ชันนี้ต้องมีคุณสมบัติดังนี้

ตรวจสอบ event.workflow.elementUiAutocomplete.invokedFunction เพื่อให้แน่ใจว่าตรงกับชื่อฟังก์ชันที่คาดไว้
รับข้อมูลที่ผู้ใช้ป้อนจาก event.workflow.elementUiAutocomplete.query
ค้นหาแหล่งข้อมูลภายนอกโดยใช้คำค้นหา
แสดงคำแนะนำได้สูงสุด 100 รายการในรูปแบบที่กำหนด

ตัวอย่างต่อไปนี้แสดงวิธีใช้ฟังก์ชัน handleAutocompleteRequest() เพื่อแสดงคำแนะนำตามคำค้นหาของผู้ใช้

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

นอกจากนี้ คุณยังป้อนคำแนะนำในการเติมข้อความอัตโนมัติจากข้อมูลภายในสภาพแวดล้อม Google Workspace ของผู้ใช้ได้ด้วย โดยทำดังนี้

ผู้ใช้ Google Workspace: ป้อนข้อมูลผู้ใช้ภายในองค์กร Google Workspace เดียวกัน
พื้นที่ใน Google Chat: แสดงพื้นที่ใน Google Chat ที่ผู้ใช้เป็นสมาชิก

หากต้องการกำหนดค่า ให้ตั้งค่า PlatformDataSource ในวิดเจ็ต SelectionInput โดยระบุ WorkflowDataSourceType เป็น USER หรือ 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)
            ))
    );

ตัวอย่าง: การรวมประเภทการเติมข้อความอัตโนมัติ

ตัวอย่างต่อไปนี้แสดงonConfigฟังก์ชันที่สร้างการ์ดที่มีวิดเจ็ต SelectionInput 3 รายการ ซึ่งแสดงการเติมข้อความอัตโนมัติฝั่งเซิร์ฟเวอร์ ผู้ใช้ และพื้นที่

JSON

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

ฟีเจอร์เฉพาะของ Workspace Studio

วิดเจ็ตการ์ดบางรายการมีฟังก์ชันและฟีเจอร์พิเศษเฉพาะ Workspace Studio ซึ่งมีรายละเอียดอยู่ที่นี่

TextInput และ SelectionInput

วิดเจ็ต TextInput และ SelectionInput มีฟีเจอร์เฉพาะของ Workspace Studio ดังนี้

includeVariables: พร็อพเพอร์ตี้บูลีนที่ให้ผู้ใช้เลือกตัวแปรจากขั้นตอนก่อนหน้า หากต้องการให้เครื่องมือเลือกตัวแปรแสดงในขั้นตอนต่อๆ ไป ทั้ง เหตุการณ์เริ่มต้นและ ตัวแปรเอาต์พุตที่สอดคล้องกันอย่างน้อย 1 รายการ ต้องแมปกับตัวแปร
type: ค่าที่แจงนับซึ่งเติมข้อความอัตโนมัติในคำแนะนำ ค่าที่รองรับ มีดังนี้
- USER: แสดงคำแนะนำที่เติมข้อความอัตโนมัติสำหรับบุคคลในรายชื่อติดต่อของ ผู้ใช้
- SPACE: แสดงคำแนะนำในการเติมข้อความอัตโนมัติสำหรับพื้นที่ทำงานใน Google Chat ที่ผู้ใช้เป็นสมาชิก

เมื่อตั้งค่าทั้ง includeVariables และ type ช่องป้อนข้อมูลจะรวมประสบการณ์ของทั้ง 2 อย่างเข้าด้วยกัน ผู้ใช้สามารถเลือกตัวแปรของ type ที่ตรงกันจากเมนูแบบเลื่อนลง และดูคำแนะนำการเติมข้อความอัตโนมัติสำหรับตัวแปรนั้นได้

รูปที่ 1: ผู้ใช้ตรวจสอบคำแนะนำที่เติมข้อความอัตโนมัติเมื่อเลือกพื้นที่
รูปที่ 2: ผู้ใช้เลือกตัวแปรเอาต์พุตของขั้นตอนก่อนหน้าจากเมนูแบบเลื่อนลง ➕ตัวแปร

ข้อควรพิจารณาและข้อจำกัดของการ์ด

การนำทางด้วยการ์ด เช่น popCard(), pushCard() และ updateCard() ไม่รองรับในส่วนเสริมที่ขยาย เอเจนต์
เมื่อใช้ SelectionInput ในเครื่องมือเลือกตัวแปร วิดเจ็ตจะรองรับเฉพาะ "type": "MULTI_SELECT" ในส่วนอื่นๆ ของการ์ดการกำหนดค่า SelectionInput รองรับค่าทั้งหมดของ SelectionType

กำหนดการ์ดการกำหนดค่า

แก้ไขไฟล์ Manifest

JSON

แก้ไขโค้ด

Apps Script

ตั้งค่าการเติมข้อความอัตโนมัติสำหรับวิดเจ็ตอินพุต

การเติมข้อความอัตโนมัติฝั่งเซิร์ฟเวอร์

Apps Script

จัดการคำขอเติมข้อความอัตโนมัติ

Apps Script

การเติมข้อความอัตโนมัติของข้อมูล Google Workspace

Apps Script

ตัวอย่าง: การรวมประเภทการเติมข้อความอัตโนมัติ

JSON

Apps Script

ฟีเจอร์เฉพาะของ Workspace Studio

TextInput และ SelectionInput

ข้อควรพิจารณาและข้อจำกัดของการ์ด

หัวข้อที่เกี่ยวข้อง