การสร้างการ์ดแบบอินเทอร์แอกทีฟ

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

การเพิ่มการดำเนินการลงในวิดเจ็ต

โดยส่วนใหญ่ คุณทำให้วิดเจ็ตเป็นแบบอินเทอร์แอกทีฟได้โดยการเชื่อมโยงกับ การดำเนินการเฉพาะ และการใช้ลักษณะการทำงานที่จำเป็นใน Callback โปรดดูรายละเอียดในการดำเนินการของส่วนเสริม

ในกรณีส่วนใหญ่ คุณสามารถทำตามขั้นตอนทั่วไปนี้เพื่อกำหนดค่าวิดเจ็ตให้ ดำเนินการที่เฉพาะเจาะจงเมื่อเลือกหรืออัปเดต ดังนี้

1. สร้างออบเจ็กต์ Action ระบุฟังก์ชัน Callback ที่ควรเรียกใช้ รวมถึง พารามิเตอร์ที่จำเป็น
2. ลิงก์วิดเจ็ตกับ Action โดยโทรหา ฟังก์ชันเครื่องจัดการวิดเจ็ต
3. ใช้ฟังก์ชัน Callback ทำตามลักษณะการทำงานที่จำเป็น

ตัวอย่าง

ตัวอย่างต่อไปนี้ตั้งค่าปุ่มสำหรับแสดงการแจ้งเตือนของผู้ใช้ หลังจากที่คลิกแล้ว การคลิกจะทำให้ฟังก์ชัน Callback ของ 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 และ Callback หากคุณจําเป็นต้องสร้าง URL ก่อน หรือใช้ URL อื่นเพิ่มเติม ก่อนเปิด URL ให้ระบุ Action และใช้ setOnClickOpenLinkAction() แทน

• เมื่อใช้setOpenLink() หรือ setOnClickOpenLinkAction() ของตัวแฮนเดิลวิดเจ็ต คุณจะต้องระบุ OpenLink เพื่อกำหนด URL ที่จะเปิด คุณยังใช้ออบเจ็กต์นี้ได้ด้วย เพื่อระบุพฤติกรรมการเปิดและปิดโดยใช้ OpenAs และ enum ของ OnClose

• วิดเจ็ตมากกว่า 1 รายการจะใช้แบบเดียวกันได้ Action อย่างไรก็ตาม คุณจำเป็นต้องกำหนด Action ออบเจ็กต์หากต้องการ เพื่อระบุพารามิเตอร์ที่แตกต่างกันสำหรับฟังก์ชัน Callback

• ทำให้ฟังก์ชัน Callback ของคุณเรียบง่ายอยู่เสมอ หากต้องการให้ส่วนเสริมทำงานอย่างทันท่วงที บริการของบัตรจำกัดฟังก์ชัน Callback ไม่ให้อยู่ที่ไม่เกิน 30 วินาที เวลาดำเนินการ หากการดำเนินการใช้เวลานานกว่านั้น UI ส่วนเสริมอาจ ไม่อัปเดตการแสดงการ์ดอย่างถูกต้องตาม Action

• หากสถานะข้อมูลในแบ็กเอนด์ของบุคคลที่สามเปลี่ยนแปลงเนื่องจากผู้ใช้ การโต้ตอบกับ UI ของส่วนเสริม ขอแนะนำให้ตั้งค่าชุดส่วนเสริม "สถานะเปลี่ยนแปลง" บิตไปยัง true เพื่อให้แคชฝั่งไคลเอ็นต์ที่มีอยู่ ล้างแล้ว โปรดดู ActionResponseBuilder.setStateChanged() สำหรับรายละเอียดเพิ่มเติม