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

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

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

กล่องโต้ตอบ

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

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

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

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

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

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

ดูรายละเอียดทั้งหมดได้ที่กล่องโต้ตอบเปิดไฟล์

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

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

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

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

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

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