คู่มือนี้จะอธิบายวิธีสร้างการ์ดการกำหนดค่าที่ช่วยให้ผู้ใช้ปรับแต่งและระบุอินพุตสำหรับขั้นตอนใน Google Workspace Studio ได้
โดยทั่วไป หากต้องการสร้างการ์ดการกำหนดค่า คุณจะต้องสร้างอินเทอร์เฟซการ์ดเช่นเดียวกับส่วนเสริมอื่นๆ ของ Google Workspace หากต้องการความช่วยเหลือในการสร้างอินเทอร์เฟซการ์ดการกำหนดค่า โปรดดูข้อมูลต่อไปนี้
- Card Builder ซึ่งเป็นเครื่องมือแบบอินเทอร์แอกทีฟที่ ช่วยคุณสร้างและกำหนดการ์ด
- การ์ดใน เอกสารอ้างอิง API ของส่วนเสริม Google Workspace
- Card Service ซึ่งเป็นบริการ Apps Script ที่ช่วยให้สคริปต์กำหนดค่าและสร้างการ์ดได้
- อินเทอร์เฟซแบบการ์ดใน เอกสารประกอบสำหรับนักพัฒนาแอปของส่วนเสริม Google Workspace
วิดเจ็ตการ์ดบางรายการมีฟังก์ชันการทำงานและฟีเจอร์เฉพาะของ Workspace Studio ซึ่งมีรายละเอียดอยู่ในคู่มือนี้
กำหนดการ์ดการกำหนดค่า
กำหนดการ์ดการกำหนดค่าทั้งในไฟล์ Manifest ของ Apps Script และในโค้ด
ตัวอย่างต่อไปนี้แสดงวิธีสร้างการ์ดการกำหนดค่าที่ขอให้ผู้ใช้เลือกพื้นที่ใน 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 ...
}
ข้อควรพิจารณาและข้อจำกัดของการ์ด
- ระบบไม่รองรับ
การนำทางของการ์ด
popCard()เช่น `popCard()`pushCard(), `pushCard()`updateCard()และ `updateCard()` ในส่วนเสริมที่ขยาย Workspace Studio
หัวข้อที่เกี่ยวข้อง
- สร้างขั้นตอน
- ตัวแปรอินพุต
- ตรวจสอบตัวแปรอินพุต
- ตัวแปรเอาต์พุต
- บันทึกกิจกรรมและข้อผิดพลาด
- ออบเจ็กต์เหตุการณ์ Workspace Studio