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. Bạn có thể sử dụng mô hình giao tiếp máy khách-máy chủ của Google 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ó thể xác định nhiều thanh bên và hộp thoại, nhưng 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 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; khi hộp thoại này 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 theo cách tương tự như Apps Script hộp thoại tuỳ chỉnh. Quy trình chung là:

  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. Tham khảo Nguyên tắc về kiểu của 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ở, hãy gọi HtmlService.createHtmlOutputFromFile để tạo một HtmlOutput đối tượng đạ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 để tạo một mẫu, sau đó gọi HtmlTemplate.evaluate để chuyển đổi mẫu đó thành đối tượng HtmlOutput.
  3. Gọi Ui.showModalDialog để 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ủ 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, hãy xem bài viết 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 đượ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 hộp thoại này yêu cầu một số cấu hình bổ sung. 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 API Google Picker.

Để biết thêm thông tin, hãy xem 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 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 theo cách tương tự như Apps Script thanh bên tuỳ chỉnh. Quy trình chung là:

  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 của Trình chỉnh sửa.

  2. Trong mã phía máy chủ mà bạn muốn thanh bên mở, hãy gọi HtmlService.createHtmlOutputFromFile để tạo một đối tượngHtmlOutput đạ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 để tạo một mẫu, sau đó gọi HtmlTemplate.evaluate để chuyển đổi mẫu đó thành đối tượng HtmlOutput.

    Thanh bên tiện ích bổ sung có chiều rộng cố định là 300 pixel mà bạn không thể thay đổi bằng cách gọi HtmlOutput.setWidth.

  3. Gọi Ui.showSidebar để hiển thị 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, hãy xem bài viết Giao tiếp giữa máy khách và máy chủ.