ส่วนเสริมส่วนใหญ่ทำให้ผู้ใช้ต้องป้อนข้อมูลนอกเหนือจากการนำเสนอข้อมูลแล้ว เมื่อสร้างส่วนเสริมแบบการ์ด คุณสามารถใช้วิดเจ็ตแบบอินเทอร์แอกทีฟ เช่น ปุ่ม รายการในเมนูแถบเครื่องมือ หรือช่องทำเครื่องหมาย เพื่อขอข้อมูลที่ส่วนเสริมของคุณต้องการจากผู้ใช้ หรือมอบการควบคุมการโต้ตอบอื่นๆ
การเพิ่มการดำเนินการลงในวิดเจ็ต
โดยส่วนใหญ่ คุณทำให้วิดเจ็ตเป็นแบบอินเทอร์แอกทีฟโดยลิงก์กับการดำเนินการที่เจาะจงและใช้ลักษณะการทำงานที่จำเป็นในฟังก์ชันเรียกกลับ ดูรายละเอียดในการดำเนินการของส่วนเสริม
ในกรณีส่วนใหญ่ คุณสามารถทำตามขั้นตอนทั่วไปนี้เพื่อกำหนดค่าวิดเจ็ตให้ดำเนินการบางอย่างเมื่อเลือกหรืออัปเดต
- สร้างออบเจ็กต์
Action
โดยระบุฟังก์ชันเรียกกลับที่ควรดำเนินการ รวมถึงพารามิเตอร์ที่จำเป็น - ลิงก์วิดเจ็ตกับ
Action
โดยเรียกใช้ฟังก์ชันตัวแฮนเดิลวิดเจ็ตที่เหมาะสม - ใช้ฟังก์ชันเรียกกลับเพื่อสร้างลักษณะการทำงานที่จำเป็น
ตัวอย่าง
ตัวอย่างต่อไปนี้กำหนดปุ่มที่จะแสดงการแจ้งเตือนผู้ใช้หลังจากที่คลิก การคลิกจะทริกเกอร์ฟังก์ชันเรียกกลับ notifyUser()
ด้วยอาร์กิวเมนต์ที่ระบุข้อความแจ้งเตือน การแสดง ActionResponse
ที่สร้างขึ้น คุณจะเห็นการแจ้งเตือนที่แสดง
/**
* Build a simple card with a button that sends a notification.
* @return {Card}
*/
function buildSimpleCard() {
var buttonAction = CardService.newAction()
.setFunctionName('notifyUser')
.setParameters({'notifyText': 'Button clicked!'});
var button = CardService.newTextButton()
.setText('Notify')
.setOnClickAction(buttonAction);
// ...continue creating widgets, then create a Card object
// to add them to. Return the built Card object.
}
/**
* Callback function for a button action. Constructs a
* notification action response and returns it.
* @param {Object} e the action event object
* @return {ActionResponse}
*/
function notifyUser(e) {
var parameters = e.parameters;
var notificationText = parameters['notifyText'];
return CardService.newActionResponseBuilder()
.setNotification(CardService.newNotification()
.setText(notificationText)
.build(); // Don't forget to build the response!
}
ออกแบบการโต้ตอบที่มีประสิทธิภาพ
เมื่อออกแบบการ์ดแบบอินเทอร์แอกทีฟ โปรดคำนึงถึงสิ่งต่อไปนี้
วิดเจ็ตแบบอินเทอร์แอกทีฟมักต้องมีเมธอดเครื่องจัดการอย่างน้อย 1 วิธีเพื่อกำหนดพฤติกรรม
ใช้ฟังก์ชันแฮนเดิลวิดเจ็ต
setOpenLink()
เมื่อมี URL และต้องการเปิดในแท็บ ซึ่งจะช่วยให้ไม่ต้องกำหนดออบเจ็กต์Action
และฟังก์ชันเรียกกลับ หากต้องการสร้าง URL ก่อนหรือทำตามขั้นตอนเพิ่มเติมก่อนที่จะเปิด URL ให้กำหนดAction
และใช้setOnClickOpenLinkAction()
แทนเมื่อใช้ฟังก์ชันตัวแฮนเดิลวิดเจ็ต
setOpenLink()
หรือsetOnClickOpenLinkAction()
คุณต้องระบุออบเจ็กต์OpenLink
เพื่อกำหนด URL ที่จะเปิด คุณยังใช้ออบเจ็กต์นี้เพื่อระบุลักษณะการเปิดและปิดโดยใช้ Enum ของOpenAs
และOnClose
ได้ด้วยวิดเจ็ตมากกว่า 1 รายการจะใช้ออบเจ็กต์
Action
เดียวกันได้ อย่างไรก็ตาม คุณต้องกำหนดออบเจ็กต์Action
ที่ต่างกันหากต้องการระบุพารามิเตอร์ที่ต่างกันสำหรับฟังก์ชันเรียกกลับทำให้ฟังก์ชันเรียกกลับเรียบง่าย บริการการ์ดจำกัดฟังก์ชันการเรียกกลับไว้ที่เวลาการดำเนินการสูงสุด 30 วินาทีเพื่อให้ส่วนเสริมตอบสนองอยู่เสมอ หากการดำเนินการใช้เวลานานกว่านั้น UI ของส่วนเสริมอาจไม่อัปเดตการแสดงการ์ดอย่างเหมาะสมเพื่อตอบสนองต่อ
Action
หากสถานะข้อมูลในแบ็กเอนด์ของบุคคลที่สามเปลี่ยนแปลงเนื่องจากการโต้ตอบของผู้ใช้กับ UI ของส่วนเสริม เราขอแนะนำให้ส่วนเสริมตั้งค่าบิต "เปลี่ยนสถานะ" เป็น
true
เพื่อให้ระบบล้างแคชฝั่งไคลเอ็นต์ที่มีอยู่ ดูรายละเอียดเพิ่มเติมในคำอธิบายเมธอดActionResponseBuilder.setStateChanged()