Dialogfelder und Seitenleisten für das Editor-Add-on
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Bei den meisten Editor-Add-ons sind Dialogfenster und Seitenleisten die primären Add-on-Benutzeroberflächen.
Beide lassen sich mit Standard-HTML und ‑CSS vollständig anpassen. Außerdem können Sie das Client-Server-Kommunikationsmodell von Apps Script verwenden, um Apps Script-Funktionen auszuführen, wenn der Nutzer mit der Seitenleiste oder dem Dialogfeld interagiert.
In Ihrem Add-on können mehrere Seitenleisten und Dialogfelder definiert werden, aber es kann jeweils nur eines angezeigt werden.
Wenn Sie verhindern möchten, dass der Nutzer mit dem Editor interagiert, bis er eine Auswahl in der Add-on-Oberfläche getroffen hat, verwenden Sie ein Dialogfeld. Andernfalls verwenden Sie eine Seitenleiste.
Dialogfelder
Dialogfelder sind Fensterbereiche, die den primären Editorinhalt überlagern. Apps Script-Dialogfelder sind modal. Während sie geöffnet sind, kann der Nutzer nicht mit den anderen Elementen der Editoroberfläche interagieren. Sie können den Inhalt und die Größe von Dialogfeldern anpassen.
Add-on-Dialogfelder werden auf dieselbe Weise wie benutzerdefinierte Dialogfelder in Apps Script erstellt. Die allgemeine empfohlene Vorgehensweise ist folgende:
Erstellen Sie eine Script-Projektdatei, in der die HTML-Struktur, das CSS und das clientseitige JavaScript-Verhalten des Dialogfelds definiert werden. Beachten Sie beim Definieren des Dialogfelds die Stilrichtlinien für Editor-Add‑ons.
Dialogfelder unterbrechen das serverseitige Skript nicht, während sie geöffnet sind. Das clientseitige JavaScript kann mit google.script.run() und zugehörigen Handler-Funktionen asynchrone Aufrufe an den Server senden. Weitere Informationen finden Sie unter Client-Server-Kommunikation.
Dialogfelder zum Öffnen von Dateien
Dialogfelder zum Öffnen von Dateien sind vorgefertigte Dialogfelder, mit denen Nutzer Dateien aus ihrem Google Drive auswählen können. Sie können Ihrem Add-on ein Dialogfeld zum Öffnen von Dateien hinzufügen, ohne es selbst gestalten zu müssen. Dazu ist jedoch eine zusätzliche Konfiguration erforderlich. Außerdem benötigen Sie Zugriff auf das Cloud Platform-Projekt des Add-ons, um die Google Picker API zu aktivieren.
Seitenleisten sind Bereiche, die rechts in der Editoroberfläche angezeigt werden. Sie sind die häufigste Art von Add-on-Oberfläche. Im Gegensatz zu Dialogfeldern können Sie weiterhin mit den anderen Elementen der Editoroberfläche interagieren, während eine Seitenleiste geöffnet ist. Die Seitenleisten haben eine feste Breite, aber Sie können ihren Inhalt anpassen.
Add-on-Seitenleisten werden auf dieselbe Weise wie benutzerdefinierte Seitenleisten in Apps Script erstellt. Die allgemeine empfohlene Vorgehensweise ist folgende:
Erstellen Sie eine Skriptprojektdatei, in der die HTML-Struktur, das CSS und das clientseitige JavaScript-Verhalten der Seitenleiste definiert werden. Beachten Sie beim Definieren der Seitenleiste die Stilrichtlinien für Editor-Add‑ons.
Seitenleisten unterbrechen das serverseitige Skript nicht, wenn sie geöffnet sind. Das clientseitige JavaScript kann mit google.script.run() und zugehörigen Handler-Funktionen asynchrone Aufrufe an den Server senden. Weitere Informationen finden Sie unter Client-Server-Kommunikation.
[[["Leicht verständlich","easyToUnderstand","thumb-up"],["Mein Problem wurde gelöst","solvedMyProblem","thumb-up"],["Sonstiges","otherUp","thumb-up"]],[["Benötigte Informationen nicht gefunden","missingTheInformationINeed","thumb-down"],["Zu umständlich/zu viele Schritte","tooComplicatedTooManySteps","thumb-down"],["Nicht mehr aktuell","outOfDate","thumb-down"],["Problem mit der Übersetzung","translationIssue","thumb-down"],["Problem mit Beispielen/Code","samplesCodeIssue","thumb-down"],["Sonstiges","otherDown","thumb-down"]],["Zuletzt aktualisiert: 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)."]]
