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 thanh 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 khách-máy 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ọ thực hiện một số lựa chọn trong giao diện 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 đang mở, người dùng không thể tương tác với các thành phần 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 giống như hộp thoại tuỳ chỉnh của Apps Script; quy trình chung được đề xuất như sau:

  1. Tạo 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 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 mở hộp thoại, hãy gọi HtmlService.createHtmlOutputFromFile(filename) để tạo đối tượng HtmlOutput đại diện cho hộp thoại. Ngoài ra, nếu đang sử dụng HTML mẫu, bạn có thể gọi HtmlService.createTemplateFromFile(filename) để tạo một mẫu, sau đó 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 ngư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ý liên kết. Để biết thêm 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à các hộp thoại tạo sẵn cho phép người dùng chọn tệp trong Google Drive. 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ế hộp thoại đó, nhưng bạn 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 trên Cloud Platform của tiện ích bổ sung để bật API Google Picker.

Để 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à 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 giống như hộp thoại, bạn có thể tiếp tục tương tác với các thành phần 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 tiện ích bổ sung giống như thanh bên tuỳ chỉnh của Apps Script; quy trình chung được đề xuất như sau:

  1. Tạo 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 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 mở thanh bên, hãy gọi HtmlService.createHtmlOutputFromFile(filename) để tạo đối tượng HtmlOutput đại diện cho thanh bên. Ngoài ra, nếu đang sử dụng HTML mẫu, bạn có thể gọi HtmlService.createTemplateFromFile(filename) để tạo một mẫu, sau đó HtmlTemplate.evaluate() để chuyển đổi mẫu đó thành đối tượng HtmlOutput.

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

Thanh bên không tạm ngư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ý liên kết. Để biết thêm chi tiết, hãy xem phần Giao tiếp giữa máy khách và máy chủ.