Düzenleyici eklentisi için iletişim kutuları ve kenar çubukları
Koleksiyonlar ile düzeninizi koruyun
İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
Çoğu Düzenleyici eklentisi için iletişim kutuları ve kenar çubuğu panelleri, birincil eklenti kullanıcı arayüzleridir.
Her ikisi de standart HTML ve CSS kullanılarak tamamen özelleştirilebilir. Ayrıca, kullanıcı kenar çubuğu veya iletişim kutusuyla etkileşime girdiğinde Apps Komut Dosyası işlevlerini çalıştırmak için Apps Komut Dosyası'nın istemci-sunucu iletişim modelini kullanabilirsiniz.
Eklentiniz birden fazla kenar çubuğu ve iletişim kutusu tanımlayabilir ancak eklenti, aynı anda yalnızca birini gösterebilir.
Kullanıcının eklenti arayüzünde bir seçim yapana kadar düzenleyiciyle etkileşimde bulunmasını engellemek istediğinizde iletişim kutusu, aksi takdirde kenar çubuğu kullanın.
İletişim kutuları
İletişim kutuları, ana düzenleyici içeriğinin üzerinde yer alan pencere panelleridir. Apps Komut Dosyası
iletişim kutuları modaldır. Açık oldukları sürece kullanıcı, düzenleyici arayüzünün
diğer öğeleriyle etkileşimde bulunamaz. İletişim kutularının içeriğini ve boyutunu özelleştirebilirsiniz.
Eklenti iletişim kutularını Apps Komut Dosyası özel iletişim kutularıyla aynı şekilde oluşturursunuz. Genel olarak önerilen prosedür şöyledir:
- İletişim kutunuzun HTML yapısını, CSS'sini ve istemci tarafı JavaScript davranışını tanımlayan bir komut dosyası proje dosyası oluşturun. İletişim kutusunu tanımlarken Düzenleyici eklentisi stil kurallarına bakın.
- İletişim kutusunun açılmasını istediğiniz sunucu tarafı kodunuzda, iletişim kutusunu temsil eden bir
HtmlOutput nesnesi oluşturmak için HtmlService.createHtmlOutputFromFile(filename) işlevini çağırın. Alternatif olarak, şablonlu HTML kullanıyorsanız HtmlService.createTemplateFromFile(filename) işlevini çağırarak şablon oluşturabilir ve ardından HtmlTemplate.evaluate() işlevini çağırarak şablonu HtmlOutput nesnesine dönüştürebilirsiniz.
- İletişim kutusunu
Ui.showModalDialog(htmlOutput, dialogTitle) kullanarak görüntülemek için HtmlOutput çağrısı yapın.
İletişim kutuları açıkken sunucu tarafı komut dosyası askıya alınmaz. İstemci tarafı JavaScript, google.script.run() ve ilişkili işleyici işlevlerini kullanarak sunucu tarafına eşzamansız çağrılar yapabilir. Daha fazla bilgi için İstemciden sunucuya iletişim başlıklı makaleyi inceleyin.
Dosya açma iletişim kutuları
Dosya açma iletişim kutuları, kullanıcılarınızın Google Drive'larından dosya seçmesine olanak tanıyan önceden oluşturulmuş iletişim kutularıdır. Eklentinize, tasarlamanıza gerek kalmadan dosya açma iletişim kutusu ekleyebilirsiniz ancak bunun için bazı ek yapılandırmalar gerekir. Google Seçici API'yi etkinleştirmek için eklentinin Cloud Platform projesine de erişmeniz gerekir.
Tüm ayrıntılar için Dosya açma iletişim kutuları başlıklı makaleyi inceleyin.
Kenar çubukları, düzenleyici arayüzünün sağ tarafında görünen panellerdir ve en yaygın eklenti arayüzü türüdür. İletişim kutularının aksine, bir kenar çubuğu açıkken düzenleyici arayüzünün diğer öğeleriyle etkileşime devam edebilirsiniz. Kenar çubuklarının genişliği sabittir ancak içeriklerini özelleştirebilirsiniz.
Eklenti kenar çubuklarını Apps Komut Dosyası özel kenar çubuklarıyla aynı şekilde oluşturursunuz. Genel olarak önerilen prosedür şöyledir:
- Kenar çubuğunuzun HTML yapısını, CSS'sini ve istemci tarafı JavaScript davranışını tanımlayan bir komut dosyası proje dosyası oluşturun. Kenar çubuğunu tanımlarken Editor eklentisi stil kurallarına bakın.
Kenar çubuğunun açılmasını istediğiniz sunucu tarafı kodunuzda, kenar çubuğunu temsil eden bir HtmlOutput
nesnesi oluşturmak için HtmlService.createHtmlOutputFromFile(filename) işlevini çağırın. Alternatif olarak, şablonlu HTML kullanıyorsanız HtmlService.createTemplateFromFile(filename) işlevini çağırarak şablon oluşturabilir ve ardından HtmlTemplate.evaluate() işlevini çağırarak şablonu HtmlOutput nesnesine dönüştürebilirsiniz.
Ui.showSidebar(htmlOutput) tuşuna basarak HtmlOutput kullanarak kenar çubuğunu görüntüleyin.
Kenar çubukları açıkken sunucu tarafı komut dosyası askıya alınmaz. İstemci tarafı JavaScript, google.script.run() ve ilişkili işleyici işlevlerini kullanarak sunucu tarafına eşzamansız çağrılar yapabilir. Daha fazla bilgi için İstemciden sunucuya iletişim başlıklı makaleyi inceleyin.
Aksi belirtilmediği sürece bu sayfanın içeriği Creative Commons Atıf 4.0 Lisansı altında ve kod örnekleri Apache 2.0 Lisansı altında lisanslanmıştır. Ayrıntılı bilgi için Google Developers Site Politikaları'na göz atın. Java, Oracle ve/veya satış ortaklarının tescilli ticari markasıdır.
Son güncelleme tarihi: 2025-08-21 UTC.
[null,null,["Son güncelleme tarihi: 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)."]]
