Interfejsy dodatków do edytora
Zadbaj o dobrą organizację dzięki kolekcji
Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Dodatki do edytora umożliwiają interakcję użytkownika za pomocą dostosowanych menu, okien dialogowych i paneli bocznych. Poniższe linki zawierają informacje o tworzeniu tego typu interfejsów.
Menu dodatków są tworzone za pomocą podstawowej usługi Ui w Apps Script.
Elementy menu stanowią początkowe punkty wyjścia do korzystania z dodatku, ale musisz je zaprojektować tak, aby uwzględniały cykl autoryzacji dodatku.
Paski boczne i okna są tworzone za pomocą usługi HTML Apps Script. Ta usługa umożliwia określanie struktury i wyglądu interfejsu za pomocą HTML i CSS.
Więcej informacji znajdziesz w artykule Tworzenie i dostarczanie kodu HTML.
- Możesz też skonfigurować wywołania komunikacji klient-serwer, aby działania użytkownika w interfejsie powodowały działania na serwerach Google, na których znajduje się plik edytora, lub odwrotnie.
- Apps Script udostępnia też składnię szablonu, która ułatwia tworzenie dynamicznych interfejsów.
Podczas tworzenia interfejsów HTML dla dodatków edytora używaj pakietu CSS dodatku edytora, aby Twój dodatek wyglądał i działał jak edytory Google Workspace, które rozszerza.
O ile nie stwierdzono inaczej, treść tej strony jest objęta licencją Creative Commons – uznanie autorstwa 4.0, a fragmenty kodu są dostępne na licencji Apache 2.0. Szczegółowe informacje na ten temat zawierają zasady dotyczące witryny Google Developers. Java jest zastrzeżonym znakiem towarowym firmy Oracle i jej podmiotów stowarzyszonych.
Ostatnia aktualizacja: 2025-07-31 UTC.
[null,null,["Ostatnia aktualizacja: 2025-07-31 UTC."],[[["\u003cp\u003eEditor add-ons enhance user interaction with custom menus, dialogs, and sidebars, built using Apps Script's UI and HTML services.\u003c/p\u003e\n"],["\u003cp\u003eAdd-on menus initiate add-on usage and should be designed considering the add-on authorization lifecycle.\u003c/p\u003e\n"],["\u003cp\u003eSidebars and dialogs, created with HTML service, allow for defining the add-on's interface structure and appearance using HTML, CSS, and client-server communication for dynamic interactions.\u003c/p\u003e\n"],["\u003cp\u003eThe Editor add-on CSS package ensures visual consistency with Google Workspace editors.\u003c/p\u003e\n"]]],["Editor add-ons allow user interaction via custom menus, dialogs, and sidebars. Menus, built with the Ui service, serve as starting points, requiring design consideration for the add-on authorization lifecycle. Sidebars and dialogs, created using the HTML service, utilize HTML and CSS for interface design. Client-server communication enables actions on the server based on user interface interactions. The editor add-on CSS package maintains a consistent look and feel with Google Workspace editors. Dynamic interface creation is supported via a template syntax.\n"],null,["# Editor add-on user interfaces\n\n[Editor add-ons](/workspace/add-ons/concepts/types#editor_add-ons)\nenable user interaction through customized menus, dialogs, and\nsidebars. The following links provide information building these types of\ninterfaces.\n\n- [Add-on menus](/workspace/add-ons/concepts/menus) are created using\n Apps Script's base [Ui service](/apps-script/reference/base/ui).\n Menus items provide initial starting points for using your add-on,\n but you must design them to take into account the add-on\n [authorization lifecycle](/workspace/add-ons/concepts/editor-auth-lifecycle#the_complete_lifecycle).\n\n- [Sidebars and dialogs](/workspace/add-ons/concepts/dialogs) are created using\n Apps Script's [HTML service](/apps-script/reference/html). This service\n lets you define the interface structure and appearence using HTML and CSS.\n See [Create and serve HTML](/apps-script/guides/html) for more details.\n\n - You can also set up [client-server communication](/apps-script/guides/html/communication) calls so that user actions in the interface result in actions taken on the Google servers where the editor file resides, or vice versa.\n - Apps Script also provides a [template syntax](/apps-script/guides/html/templates) to make building dynamic interfaces easier.\n- When building HTML interfaces for Editor add-ons, you should use the\n [Editor add-on CSS package](/workspace/add-ons/guides/css) to help your add-on\n look and feel like the Google Workspace editors\n they extend."]]
