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

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

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

กล่องโต้ตอบ

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

คุณสร้างกล่องโต้ตอบของส่วนเสริมได้ในลักษณะเดียวกับกล่องโต้ตอบที่กำหนดเองของ 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

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

แถบด้านข้าง

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

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

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

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

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

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

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