กล่องโต้ตอบและแถบด้านข้างสำหรับส่วนเสริมของ Editor

สำหรับส่วนเสริมของ Editorส่วนใหญ่ หน้าต่างกล่องโต้ตอบและแผงแถบด้านข้างเป็นอินเทอร์เฟซผู้ใช้หลักของส่วนเสริม ทั้ง 2 อย่างนี้ปรับแต่งได้อย่างเต็มที่ โดยใช้ HTML และ CSS มาตรฐาน และคุณสามารถใช้ โมเดลการสื่อสารแบบไคลเอ็นต์-เซิร์ฟเวอร์ ของ Google Apps Script เพื่อเรียกใช้ฟังก์ชัน Apps Script เมื่อผู้ใช้โต้ตอบกับ แถบด้านข้างหรือกล่องโต้ตอบ ส่วนเสริมสามารถกำหนดแถบด้านข้างและกล่องโต้ตอบได้หลายรายการ แต่จะแสดงได้ครั้งละ 1 รายการเท่านั้น

หากต้องการป้องกันไม่ให้ผู้ใช้โต้ตอบกับ Editor จนกว่าจะเลือกตัวเลือกในอินเทอร์เฟซของส่วนเสริม ให้ใช้กล่องโต้ตอบ แต่หากไม่เป็นเช่นนั้น ให้ใช้แถบด้านข้าง

กล่องโต้ตอบ

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

คุณสร้างกล่องโต้ตอบของส่วนเสริมด้วยวิธีเดียวกับ Apps Script กล่องโต้ตอบที่กำหนดเอง ขั้นตอนทั่วไปมีดังนี้

1. สร้างไฟล์โปรเจ็กต์สคริปต์ที่กำหนดโครงสร้าง HTML, CSS และลักษณะการทำงานของ JavaScript ฝั่งไคลเอ็นต์ของกล่องโต้ตอบ ดูหลักเกณฑ์ด้านรูปแบบของส่วนเสริมของ Editor
2. ในโค้ดฝั่งเซิร์ฟเวอร์ที่คุณต้องการให้กล่องโต้ตอบเปิดขึ้น ให้เรียกใช้ HtmlService.createHtmlOutputFromFile เพื่อสร้างออบเจ็กต์ HtmlOutput ที่แสดงกล่องโต้ตอบ หรือหากใช้ HTML ที่มีเทมเพลต คุณสามารถเรียกใช้ HtmlService.createTemplateFromFile เพื่อสร้างเทมเพลต แล้วเรียกใช้ HtmlTemplate.evaluate เพื่อแปลงเทมเพลตเป็นออบเจ็กต์ HtmlOutput
3. เรียกใช้ Ui.showModalDialog เพื่อแสดงกล่องโต้ตอบโดยใช้ HtmlOutput

กล่องโต้ตอบจะไม่ระงับสคริปต์ฝั่งเซิร์ฟเวอร์ขณะที่เปิดอยู่ JavaScript ฝั่งไคลเอ็นต์สามารถเรียกใช้ฝั่งเซิร์ฟเวอร์แบบไม่พร้อมกันได้ โดยใช้ google.script.run และ ฟังก์ชันตัวแฮนเดิลที่เกี่ยวข้อง ดูรายละเอียดเพิ่มเติมได้ที่ การสื่อสารจากไคลเอ็นต์ไปยังเซิร์ฟเวอร์

กล่องโต้ตอบการเปิดไฟล์

กล่องโต้ตอบการเปิดไฟล์ เป็นกล่องโต้ตอบที่สร้างไว้ล่วงหน้าซึ่งช่วยให้ผู้ใช้เลือกไฟล์จาก Google ไดรฟ์ได้ คุณสามารถเพิ่มกล่องโต้ตอบการเปิดไฟล์ลงในส่วนเสริมได้โดยไม่ต้องออกแบบ แต่ต้องมีการกำหนดค่าเพิ่มเติม นอกจากนี้ คุณยังต้องมีสิทธิ์เข้าถึงโปรเจ็กต์ Cloud Platform ของส่วนเสริม เพื่อเปิดใช้ Google Picker API

ดูข้อมูลเพิ่มเติมได้ที่ กล่องโต้ตอบการเปิดไฟล์

แถบด้านข้าง

แถบด้านข้าง คือแผงที่ปรากฏทางด้านขวาของอินเทอร์เฟซ Editor และเป็นอินเทอร์เฟซส่วนเสริมประเภทที่พบมากที่สุด คุณสามารถโต้ตอบกับองค์ประกอบอื่นๆ ของอินเทอร์เฟซ Editor ต่อไปได้ขณะที่แถบด้านข้างเปิดอยู่ ซึ่งแตกต่างจากกล่องโต้ตอบ แถบด้านข้างมีความกว้างคงที่ แต่คุณสามารถปรับแต่งเนื้อหาได้

คุณสร้างแถบด้านข้างของส่วนเสริมด้วยวิธีเดียวกับ Apps Script แถบด้านข้างที่กำหนดเอง ขั้นตอนทั่วไปมีดังนี้

1. สร้างไฟล์โปรเจ็กต์สคริปต์ที่กำหนดโครงสร้าง HTML, CSS และลักษณะการทำงานของ JavaScript ฝั่งไคลเอ็นต์ของแถบด้านข้าง เมื่อกำหนดแถบด้านข้าง ให้ดู ที่ หลักเกณฑ์ด้านรูปแบบของส่วนเสริมของ Editor

2. ในโค้ดฝั่งเซิร์ฟเวอร์ที่คุณต้องการให้แถบด้านข้างเปิดขึ้น ให้เรียกใช้ HtmlService.createHtmlOutputFromFile เพื่อสร้างออบเจ็กต์ HtmlOutput ที่แสดงแถบด้านข้าง หรือหากใช้ HTML ที่มีเทมเพลต คุณสามารถเรียกใช้ HtmlService.createTemplateFromFile เพื่อสร้างเทมเพลต แล้วเรียกใช้ HtmlTemplate.evaluate เพื่อแปลงเทมเพลตเป็นออบเจ็กต์ HtmlOutput

   แถบด้านข้างของส่วนเสริมมีความกว้างคงที่ 300 พิกเซล ซึ่งคุณจะเปลี่ยนไม่ได้โดยการเรียกใช้ HtmlOutput.setWidth

3. เรียกใช้ Ui.showSidebar เพื่อแสดงแถบด้านข้างโดยใช้ HtmlOutput

แถบด้านข้างจะไม่ระงับสคริปต์ฝั่งเซิร์ฟเวอร์ขณะที่เปิดอยู่ JavaScript ฝั่งไคลเอ็นต์สามารถเรียกใช้ฝั่งเซิร์ฟเวอร์แบบไม่พร้อมกันได้ โดยใช้ google.script.run และ ฟังก์ชันตัวแฮนเดิลที่เกี่ยวข้อง ดูรายละเอียดเพิ่มเติมได้ที่ การสื่อสารจากไคลเอ็นต์ไปยังเซิร์ฟเวอร์