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 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 hoàn toàn có thể tuỳ chỉnh bằng cách sử dụng HTML và CSS tiêu chuẩn. Bạn có thể sử dụng mô hình giao tiếp giữa máy khách và 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 mỗi lần chỉ có thể hiển thị một tiện ích bổ sung.

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 một 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. Các hộp thoại Apps Script đã được đặt vào chế độ; trong 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 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 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 một đối tượng HtmlOutput biểu thị 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ẫu rồ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 ngư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ộ tới 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 bài viết 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 mở tệp là các hộp thoại được tạo sẵn cho phép người dùng chọn tệp trong Google Drive của họ. Bạn có thể thêm hộp thoại đang mở tệp vào tiện ích bổ sung mà không cần thiết kế nhưng sẽ yêu cầu 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 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à 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 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 chúng.

Bạn tạo thanh bên của 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 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 Tiện ích bổ sung chỉnh sửa.

  2. Trong mã phía máy chủ nơi bạn muốn thanh bên mở ra, 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 mẫu, bạn có thể gọi HtmlService.createTemplateFromFile(filename) để tạo mẫu rồi 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ủ trong khi chúng đ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ộ tới 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 bài viết Giao tiếp giữa máy khách với máy chủ.