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

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

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 trong giao diện tiện ích bổ sung, 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 của trình chỉnh sửa chính. Apps Script hộp thoại được đặt theo chế độ; Khi chúng được mở, người dùng không thể tương tác với các phần tử khác trong giao diện trình chỉnh sửa. Bạn có thể tuỳ chỉnh nội dung và kích thước hộp thoại.

Bạn tạo hộp thoại tiện ích bổ sung giống như Apps Script hộp thoại tuỳ chỉnh; tổng quát quy trình đượ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 của hộp thoại, CSS và hành vi JavaScript phía máy khách. Khi xác định hộp thoại, hãy tham khảo theo Nguyên tắc về kiểu tiện ích bổ sung dành cho trình chỉnh sửa.
  2. Trong đoạn mã phía máy chủ mà bạn muốn mở hộp thoại, hãy gọi HtmlService.createHtmlOutputFromFile(filename) để tạo một HtmlOutput đối tượng đại diện cho hộp thoại. Ngoài ra, nếu bạn đang sử dụng HTML mẫu mà bạn có thể gọi HtmlService.createTemplateFromFile(filename) để tạo một mẫu rồi sau đó HtmlTemplate.evaluate() để chuyển đổi thành Đối tượng HtmlOutput.
  3. Gọi Ui.showModalDialog(htmlOutput, dialogTitle) để hiển thị hộp thoại bằng cách dùng HtmlOutput.

Các hộp thoại không tạm ngưng tập lệnh phía máy chủ trong khi chúng đang mở. Chiến lược phát hành đĩa đơn 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ủ sử dụng google.script.run() và hàm xử lý liên kết. Để biết thêm thông tin, hãy xem Giao tiếp giữa máy khách với máy chủ.

Hộp thoại mở tệp

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

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

Thanh bên là các 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 thích 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 khi thanh bên 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 giống như Apps Script thanh bên tuỳ chỉnh; tổng quát quy trình đượ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 của thanh bên, CSS và hành vi JavaScript phía máy khách. Khi xác định thanh bên, hãy tham khảo theo Nguyên tắc về kiểu tiện ích bổ sung dành cho trình chỉnh sửa.

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

  3. Gọi Ui.showSidebar(htmlOutput) để hiển thị thanh bên bằng cách sử dụng HtmlOutput.

Trong khi mở, các thanh bên không tạm ngưng tập lệnh phía máy chủ. Chiến lược phát hành đĩa đơn 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ủ sử dụng google.script.run() và hàm xử lý liên kết. Để biết thêm thông tin, hãy xem Giao tiếp giữa máy khách với máy chủ.