สำหรับส่วนเสริมเครื่องมือแก้ไขส่วนใหญ่ หน้าต่างกล่องโต้ตอบและแผงแถบด้านข้างเป็นอินเทอร์เฟซผู้ใช้ของส่วนเสริมหลัก ทั้ง 2 อย่างนี้ปรับแต่งได้อย่างเต็มรูปแบบโดยใช้ HTML และ CSS มาตรฐาน และคุณสามารถใช้โมเดลการสื่อสารแบบไคลเอ็นต์-เซิร์ฟเวอร์ของ Apps Script เพื่อเรียกใช้ฟังก์ชัน Apps Script เมื่อผู้ใช้โต้ตอบกับแถบด้านข้างหรือกล่องโต้ตอบ ส่วนเสริมกำหนดแถบด้านข้างและกล่องโต้ตอบได้หลายรายการ แต่ส่วนเสริมจะแสดงได้ครั้งละ 1 รายการเท่านั้น
เมื่อไม่ต้องการให้ผู้ใช้โต้ตอบกับตัวแก้ไขจนกว่าผู้ใช้จะเลือกตัวเลือกในอินเทอร์เฟซส่วนเสริม ให้ใช้กล่องโต้ตอบ หรือมิฉะนั้น ให้ใช้แถบด้านข้าง
กล่องโต้ตอบ
กล่องโต้ตอบคือแผงหน้าต่างที่วางซ้อนเนื้อหาเครื่องมือแก้ไขหลัก กล่องโต้ตอบของ Apps Script เป็นแบบโมดัล โดยขณะที่เปิดไว้ ผู้ใช้จะโต้ตอบกับองค์ประกอบอื่นๆ ของอินเทอร์เฟซเครื่องมือแก้ไขไม่ได้ คุณสามารถปรับแต่งเนื้อหาและขนาด ของกล่องโต้ตอบ
คุณสร้างกล่องโต้ตอบส่วนเสริมแบบเดียวกันกับกล่องโต้ตอบที่กำหนดเองของ Apps Script กระบวนการทั่วไปที่แนะนำมีดังนี้
- สร้างไฟล์โครงการสคริปต์ที่กำหนดโครงสร้าง HTML, CSS และลักษณะการทำงานของ JavaScript ฝั่งไคลเอ็นต์ของกล่องโต้ตอบ เมื่อกำหนดกล่องโต้ตอบ โปรดดูหลักเกณฑ์สไตล์ของส่วนเสริมเอดิเตอร์
- ในโค้ดฝั่งเซิร์ฟเวอร์ที่คุณต้องการให้กล่องโต้ตอบเปิด ให้เรียกใช้
HtmlService.createHtmlOutputFromFile(filename)
เพื่อสร้างออบเจ็กต์HtmlOutput
ที่แสดงถึงกล่องโต้ตอบ หรือหากใช้ HTML แบบเทมเพลต คุณอาจเรียกใช้HtmlService.createTemplateFromFile(filename)
เพื่อสร้างเทมเพลต จากนั้นใช้HtmlTemplate.evaluate()
เพื่อแปลงเป็นออบเจ็กต์HtmlOutput
- เรียกใช้
Ui.showModalDialog(htmlOutput, dialogTitle)
เพื่อแสดงกล่องโต้ตอบโดยใช้HtmlOutput
กล่องโต้ตอบจะไม่ระงับสคริปต์ฝั่งเซิร์ฟเวอร์ในขณะที่เปิดอยู่ JavaScript ฝั่งไคลเอ็นต์จะเรียกใช้ฝั่งเซิร์ฟเวอร์แบบไม่พร้อมกันโดยใช้ google.script.run()
และฟังก์ชันตัวแฮนเดิลที่เกี่ยวข้อง ดูรายละเอียดเพิ่มเติมได้ที่การสื่อสารระหว่างไคลเอ็นต์กับเซิร์ฟเวอร์
กล่องโต้ตอบสำหรับเปิดไฟล์
กล่องโต้ตอบสำหรับการเปิดไฟล์คือกล่องโต้ตอบที่สร้างไว้ล่วงหน้าเพื่อให้ผู้ใช้เลือกไฟล์จาก Google ไดรฟ์ของตนเองได้ คุณเพิ่มกล่องโต้ตอบการเปิดไฟล์ลงในส่วนเสริมได้โดยไม่ต้องออกแบบ แต่ต้องมีการกำหนดค่าเพิ่มเติมบางอย่าง คุณต้องมีสิทธิ์เข้าถึงโปรเจ็กต์ Cloud Platform ของส่วนเสริมเพื่อเปิดใช้ Google Picker API ด้วย
โปรดดูรายละเอียดทั้งหมดที่หัวข้อกล่องโต้ตอบการเปิดไฟล์
แถบด้านข้าง
แถบด้านข้างคือแผงที่ปรากฏทางด้านขวาของอินเทอร์เฟซเครื่องมือแก้ไข และเป็นอินเทอร์เฟซส่วนเสริมประเภทที่พบได้บ่อยที่สุด โดยคุณจะโต้ตอบกับองค์ประกอบอื่นๆ ในอินเทอร์เฟซของตัวแก้ไขต่อได้ในขณะที่แถบด้านข้างเปิดอยู่ ซึ่งต่างจากกล่องโต้ตอบ แถบด้านข้างมีความกว้างคงที่ แต่คุณปรับแต่งเนื้อหาได้
แถบด้านข้างของส่วนเสริมจะสร้างในลักษณะเดียวกับแถบด้านข้างที่กำหนดเองของ Apps Script กระบวนการทั่วไปที่แนะนำมีดังนี้
- สร้างไฟล์โปรเจ็กต์สคริปต์ที่กำหนดโครงสร้าง HTML, CSS และลักษณะการทำงานของ JavaScript ฝั่งไคลเอ็นต์ของแถบด้านข้าง เมื่อกำหนดแถบด้านข้าง โปรดดูหลักเกณฑ์สไตล์ของส่วนเสริมเอดิเตอร์
ในโค้ดฝั่งเซิร์ฟเวอร์ที่คุณต้องการให้แถบด้านข้างเปิด ให้เรียกใช้
HtmlService.createHtmlOutputFromFile(filename)
เพื่อสร้างออบเจ็กต์HtmlOutput
ที่แสดงถึงแถบด้านข้าง หรือหากใช้ HTML แบบเทมเพลต คุณอาจเรียกใช้HtmlService.createTemplateFromFile(filename)
เพื่อสร้างเทมเพลต จากนั้นใช้HtmlTemplate.evaluate()
เพื่อแปลงเป็นออบเจ็กต์HtmlOutput
เรียกใช้
Ui.showSidebar(htmlOutput)
เพื่อแสดงแถบด้านข้างโดยใช้HtmlOutput
แถบด้านข้างจะไม่ระงับสคริปต์ฝั่งเซิร์ฟเวอร์ขณะเปิดอยู่ JavaScript ฝั่งไคลเอ็นต์จะเรียกใช้ฝั่งเซิร์ฟเวอร์แบบไม่พร้อมกันโดยใช้ google.script.run()
และฟังก์ชันตัวแฮนเดิลที่เกี่ยวข้อง ดูรายละเอียดเพิ่มเติมได้ที่การสื่อสารระหว่างไคลเอ็นต์กับเซิร์ฟเวอร์