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

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

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

กล่องโต้ตอบ

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