Hộp thoại và thanh bên cho tiện ích bổ sung dành cho Trình chỉnh sửa

Đối với hầu hết tiện ích bổ sung của Trình chỉnh sửa, cửa sổ hộp thoại và bảng điều khiển bên là giao diện người dùng chính của tiện ích bổ sung. Cả hai đều có thể tuỳ chỉnh hoàn toàn bằng HTML và CSS tiêu chuẩn, đồng thời bạn có thể sử dụng mô hình giao tiếp máy chủ-máy khách của Apps Script để chạy các hàm Apps Script khi người dùng tương tác với thanh bên hoặc hộp thoại. Tiện ích bổ sung của bạn có thể xác định nhiều thanh bên và hộp thoại, nhưng tiện ích bổ sung chỉ có thể hiển thị một thanh bên hoặc hộp thoại tại một thời điểm.

Khi bạn muốn ngăn người dùng tương tác với trình chỉnh sửa cho đến khi họ đưa ra lựa chọn nào đó trong giao diện của tiện ích bổ sung, hãy sử dụng hộp thoại; nếu không, hãy sử dụng thanh bên.

Hộp thoại

Hộp thoại là các bảng điều khiển cửa sổ phủ lên nội dung chính của trình chỉnh sửa. Hộp thoại Apps Script là hộp thoại phương thức; trong khi hộp thoại này mở, người dùng không thể tương tác với các phần tử khác của giao diện trình chỉnh sửa. Bạn có thể tuỳ chỉnh nội dung và kích thước của hộp thoại.

Bạn tạo hộp thoại tiện ích bổ sung theo cách tương tự như hộp thoại tuỳ chỉnh của Apps Script; quy trình chung được đề xuất như sau:

  1. Tạo một tệp dự án tập lệnh xác định cấu trúc HTML, CSS và hành vi JavaScript phía máy khách của hộp thoại. Khi xác định hộp thoại, hãy tham khảo Nguyên tắc về kiểu cho tiện ích bổ sung của Trình chỉnh sửa.
  2. Trong mã phía máy chủ mà bạn muốn hộp thoại mở ra, hãy gọi HtmlService.createHtmlOutputFromFile(filename) để tạo một đối tượng HtmlOutput đại diện cho hộp thoại. Ngoài ra, nếu đang sử dụng HTML dựa trên mẫu, bạn có thể gọi HtmlService.createTemplateFromFile(filename) để tạo mẫu, sau đó gọi HtmlTemplate.evaluate() để chuyển đổi mẫu đó thành đối tượng HtmlOutput.
  3. Gọi Ui.showModalDialog(htmlOutput, dialogTitle) để hiển thị hộp thoại bằng HtmlOutput đó.

Hộp thoại không tạm dừng tập lệnh phía máy chủ trong khi đang mở. JavaScript phía máy khách có thể thực hiện các lệnh gọi không đồng bộ đến phía máy chủ bằng cách sử dụng google.script.run() và các hàm trình xử lý được liên kết. Để biết thêm thông tin chi tiết, hãy xem phần Giao tiếp giữa máy khách và máy chủ.

Hộp thoại mở tệp

Hộp thoại mở tệp là hộp thoại được tạo sẵn, cho phép người dùng chọn tệp từ Google Drive của họ. Bạn có thể thêm hộp thoại mở tệp vào tiện ích bổ sung mà không cần thiết kế, nhưng bạn cần phải định cấu hình thêm. Bạn cũng cần có quyền truy cập vào dự án Cloud Platform của tiện ích bổ sung để bật Google Picker API.

Để biết toàn bộ thông tin chi tiết, hãy xem phần Hộp thoại mở tệp.

Thanh bên là những bảng điều khiển xuất hiện ở bên phải giao diện trình chỉnh sửa và là loại giao diện tiện ích bổ sung phổ biến nhất. Không giống như hộp thoại, bạn có thể tiếp tục tương tác với các phần tử khác của giao diện trình chỉnh sửa trong khi thanh bên đang mở. Thanh bên có chiều rộng cố định, nhưng bạn có thể tuỳ chỉnh nội dung của thanh bên.

Bạn tạo thanh bên của tiện ích bổ sung theo cách tương tự như thanh bên tuỳ chỉnh của Apps Script; quy trình chung được đề xuất như sau:

  1. Tạo một tệp dự án tập lệnh xác định cấu trúc HTML, CSS và hành vi JavaScript phía máy khách của thanh bên. Khi xác định thanh bên, hãy tham khảo Nguyên tắc về kiểu của tiện ích bổ sung cho Trình chỉnh sửa.

  2. Trong mã phía máy chủ mà bạn muốn mở thanh bên, hãy gọi HtmlService.createHtmlOutputFromFile(filename) để tạo một đối tượng HtmlOutput đại diện cho thanh bên. Ngoài ra, nếu đang sử dụng HTML dựa trên mẫu, bạn có thể gọi HtmlService.createTemplateFromFile(filename) để tạo mẫu, sau đó gọi HtmlTemplate.evaluate() để chuyển đổi mẫu đó thành đối tượng HtmlOutput.

  3. Gọi Ui.showSidebar(htmlOutput) để hiện thanh bên bằng HtmlOutput đó.

Thanh bên không tạm dừng tập lệnh phía máy chủ khi đang mở. JavaScript phía máy khách có thể thực hiện các lệnh gọi không đồng bộ đến phía máy chủ bằng cách sử dụng google.script.run() và các hàm trình xử lý được liên kết. Để biết thêm thông tin chi tiết, hãy xem phần Giao tiếp giữa máy khách và máy chủ.