Antarmuka pengguna add-on editor
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Add-on editor
memungkinkan interaksi pengguna melalui menu, dialog, dan
sidebar yang disesuaikan. Link berikut memberikan informasi tentang cara membuat jenis antarmuka ini.
Menu add-on dibuat menggunakan
layanan Ui dasar Apps Script.
Item menu memberikan titik awal untuk menggunakan add-on Anda,
tetapi Anda harus mendesainnya dengan mempertimbangkan
siklus proses otorisasi add-on.
Sidebar dan dialog dibuat menggunakan
layanan HTML Apps Script. Layanan ini memungkinkan Anda menentukan struktur dan tampilan antarmuka menggunakan HTML dan CSS.
Lihat Membuat dan menyajikan HTML untuk mengetahui detail selengkapnya.
- Anda juga dapat menyiapkan panggilan komunikasi client-server
sehingga tindakan pengguna di antarmuka menghasilkan tindakan yang dilakukan di
server Google tempat file editor berada, atau sebaliknya.
- Apps Script juga menyediakan sintaksis template
untuk mempermudah pembuatan antarmuka dinamis.
Saat membuat antarmuka HTML untuk add-on Editor, Anda harus menggunakan
paket CSS add-on Editor untuk membantu add-on Anda
terlihat dan terasa seperti editor Google Workspace
yang diperluasnya.
Kecuali dinyatakan lain, konten di halaman ini dilisensikan berdasarkan Lisensi Creative Commons Attribution 4.0, sedangkan contoh kode dilisensikan berdasarkan Lisensi Apache 2.0. Untuk mengetahui informasi selengkapnya, lihat Kebijakan Situs Google Developers. Java adalah merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2025-07-31 UTC.
[null,null,["Terakhir diperbarui pada 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."]]
