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

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

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

กล่องโต้ตอบ

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

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

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