Hộp thoại và thanh bên cho tiện ích bổ sung dành cho Trình chỉnh sửa
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Đố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 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:
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
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:
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ý đượ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ủ.
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 2025-08-21 UTC."],[[["\u003cp\u003eEditor add-ons primarily use customizable dialog windows and sidebar panels for user interfaces, built with HTML, CSS, and Apps Script.\u003c/p\u003e\n"],["\u003cp\u003eDialogs are modal windows, overlaying editor content and preventing interaction until a choice is made, while sidebars allow continued editor interaction.\u003c/p\u003e\n"],["\u003cp\u003eBoth dialogs and sidebars are created using HtmlService to define their structure and displayed using Ui methods.\u003c/p\u003e\n"],["\u003cp\u003eFile-open dialogs are pre-built for selecting files from Google Drive but need extra configuration and Cloud Platform project access.\u003c/p\u003e\n"],["\u003cp\u003eAdd-on sidebars have a fixed width of 300 pixels and appear on the right of the editor, enabling user interaction with other editor elements.\u003c/p\u003e\n"]]],["Editor add-ons utilize customizable dialogs and sidebars as user interfaces, built with HTML, CSS, and Apps Script. Dialogs, which overlay the editor, prevent user interaction until closed, created via `HtmlService` and displayed with `Ui.showModalDialog`. Sidebars, residing on the editor's right, allow continued editor interaction and are created and displayed similarly, using `Ui.showSidebar`. Both interfaces facilitate client-server communication through `google.script.run()` for asynchronous interactions. File-open dialogs offer pre-built file selection.\n"],null,["# Dialogs and sidebars for Editor add-on\n\nFor most [Editor add-on](/workspace/add-ons/concepts/types#editor_add-ons),\ndialog windows and sidebar panels are the primary add-on user interfaces.\nBoth are fully customizable using standard HTML and CSS, and you can use\nApps Script's\n[client-server communication model](/apps-script/guides/html/communication)\nto run Apps Script functions when the user interacts with the sidebar or dialog.\nYour add-on can define multiple sidebars and dialogs, but the add-on can display\nonly one at a time.\n\nWhen you want to prevent the user from interacting with the editor until they\nmake some choice in the add-on interface, use a dialog; otherwise use a\nsidebar.\n\nDialogs\n-------\n\n*Dialogs* are window panels that overlay the primary editor content. Apps Script\ndialogs are modal; while they are opened the user can't interact with the\nother elements of the editor interface. You can customize the content and size\nof dialogs.\n\nYou build add-on dialogs the same way as Apps Script\n[custom dialogs](/apps-script/guides/dialogs#custom_dialogs); the general\nrecommended procedure is the following:\n\n1. Create a script project file that defines your dialog's HTML structure, CSS, and client-side JavaScript behavior. When defining the dialog, refer to the [Editor add-on style guidelines](/workspace/add-ons/guides/editor-style#dialogs).\n2. In your server-side code where you want the dialog to open, call [`HtmlService.createHtmlOutputFromFile(filename)`](/apps-script/reference/html/html-service#createhtmloutputfromfilefilename) to create an [`HtmlOutput`](/apps-script/reference/html/html-output) object representing the dialog. Alternatively, if you are using [templated HTML](/apps-script/guides/html/templates) you can call [`HtmlService.createTemplateFromFile(filename)`](/apps-script/reference/html/html-service#createtemplatefromfilefilename) to generate a template and then [`HtmlTemplate.evaluate()`](/apps-script/reference/html/html-template#evaluate()) to convert it to an [`HtmlOutput`](/apps-script/reference/html/html-output) object.\n3. Call [`Ui.showModalDialog(htmlOutput, dialogTitle)`](/apps-script/reference/base/ui#showModalDialog(Object,String)) to display the dialog using that [`HtmlOutput`](/apps-script/reference/html/html-output).\n\nDialogs don't suspend the server-side script while they are open. The\nclient-side JavaScript can make asynchronous calls to the server-side\nusing [`google.script.run()`](/apps-script/guides/html/reference/run) and\nassociated handler functions. For more details, see\n[Client-to-server communication](/apps-script/guides/html/communication).\n\n### File-open dialogs\n\n*File-open dialogs* are pre-built dialogs that let your users select files\nfrom their Google Drive. You can add a file-open dialog to your add-on without\nneeding to design it, but it requires some additional configuration. You also\nrequire access to the add-on's\n[Cloud Platform project](/apps-script/guides/cloud-platform-projects)\nin order to enable the Google Picker API.\n\nFor full details, see [File-open dialogs](/apps-script/guides/dialogs#file-open_dialogs).\n\nSidebars\n--------\n\n*Sidebars* are panels that appear in the right of the editor interface, and\nare the most common type of add-on interface. Unlike dialogs, you can continue\nto interact with the other elements of the editor interface while a sidebar is\nopen. Sidebars have a fixed width, but you can customize their content.\n\nYou build add-on sidebars the same way as Apps Script\n[custom sidebars](/apps-script/guides/dialogs#custom_sidebars); the general\nrecommended procedure is the following:\n\n1. Create a script project file that defines your sidebar's HTML structure, CSS, and client-side JavaScript behavior. When defining the sidebar, refer to the [Editor add-on style guidelines](/workspace/add-ons/guides/editor-style#sidebars).\n2. In your server-side code where you want the sidebar to open, call\n [`HtmlService.createHtmlOutputFromFile(filename)`](/apps-script/reference/html/html-service#createhtmloutputfromfilefilename)\n to create an [`HtmlOutput`](/apps-script/reference/html/html-output)\n object representing the sidebar. Alternatively, if you are using\n [templated HTML](/apps-script/guides/html/templates) you can call\n [`HtmlService.createTemplateFromFile(filename)`](/apps-script/reference/html/html-service#createtemplatefromfilefilename)\n to generate a template and then\n [`HtmlTemplate.evaluate()`](/apps-script/reference/html/html-template#evaluate())\n to convert it to an\n [`HtmlOutput`](/apps-script/reference/html/html-output) object.\n\n | **Note:** Add-on sidebars have a fixed width of 300 pixels that you can't alter by calling [`HtmlOutput.setWidth(width)`](/apps-script/reference/html/html-output#setwidthwidth).\n3. Call [`Ui.showSidebar(htmlOutput)`](/apps-script/reference/base/ui#showSidebar(Object))\n to display the sidebar using that\n [`HtmlOutput`](/apps-script/reference/html/html-output).\n\nSidebars don't suspend the server-side script while they are open. The\nclient-side JavaScript can make asynchronous calls to the server-side\nusing [`google.script.run()`](/apps-script/guides/html/reference/run) and\nassociated handler functions. For more details, see\n[Client-to-server communication](/apps-script/guides/html/communication)."]]
