תיבות דו-שיח וסרגלי צד בתוסף העריכה
קל לארגן דפים בעזרת אוספים
אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.
ברוב תוספי Editor, חלונות דו-שיח וחלוניות צד הן ממשקי המשתמש העיקריים של התוסף.
אפשר להתאים אישית את שניהם באופן מלא באמצעות HTML ו-CSS רגילים, ואפשר להשתמש במודל תקשורת בין לקוח לשרת של Apps Script כדי להפעיל פונקציות של Apps Script כשהמשתמש מנהל אינטראקציה עם סרגל הצד או עם תיבת הדו-שיח.
תוסף יכול להגדיר כמה סרגלי צד ותיבות דו-שיח, אבל הוא יכול להציג רק אחד בכל פעם.
אם רוצים למנוע מהמשתמש אינטראקציה עם העורך עד שהוא יבחר אפשרות בממשק התוסף, צריך להשתמש בתיבת דו-שיח. אחרת, אפשר להשתמש בסרגל צד.
תיבות דו-שיח
תיבות דו-שיח הן חלוניות חלון שמוצגות מעל התוכן הראשי של העורך. תיבות דו-שיח של Apps Script הן מודאליות. בזמן שהן פתוחות, המשתמש לא יכול לבצע פעולות ברכיבים אחרים בממשק העריכה. אתם יכולים להתאים אישית את התוכן והגודל של תיבות הדו-שיח.
אתם יוצרים תיבות דו-שיח של תוספים באותו אופן שבו יוצרים תיבות דו-שיח מותאמות אישית ב-Apps Script. התהליך המומלץ הוא כדלקמן:
- יוצרים קובץ פרויקט של סקריפט שמגדיר את מבנה ה-HTML של תיבת הדו-שיח, את ה-CSS ואת התנהגות ה-JavaScript בצד הלקוח. כשמגדירים את תיבת הדו-שיח, כדאי לעיין בהנחיות הסגנון של תוסף העריכה.
- בצד השרת, בקוד שבו רוצים שהתיבה תיפתח, קוראים ל-
HtmlService.createHtmlOutputFromFile(filename) כדי ליצור אובייקט HtmlOutput שמייצג את התיבה. לחלופין, אם אתם משתמשים ב-templated HTML, אתם יכולים להתקשר אל HtmlService.createTemplateFromFile(filename) כדי ליצור תבנית ואז אל HtmlTemplate.evaluate() כדי להמיר אותה לאובייקט HtmlOutput.
- מפעילים את
Ui.showModalDialog(htmlOutput, dialogTitle) כדי להציג את תיבת הדו-שיח באמצעות HtmlOutput.
תיבות דו-שיח לא משעות את הסקריפט בצד השרת בזמן שהן פתוחות. ה-JavaScript בצד הלקוח יכול לבצע קריאות אסינכרוניות לצד השרת באמצעות google.script.run() ופונקציות handler משויכות. פרטים נוספים זמינים במאמר בנושא תקשורת בין לקוח לשרת.
תיבות דו-שיח לפתיחת קובץ
תיבות דו-שיח לפתיחת קבצים הן תיבות דו-שיח מוכנות מראש שמאפשרות למשתמשים לבחור קבצים מ-Google Drive. אפשר להוסיף לתוסף תיבת דו-שיח לפתיחת קובץ בלי לעצב אותה, אבל צריך לבצע כמה הגדרות נוספות. כדי להפעיל את Google Picker API, צריך גם גישה לפרויקט Cloud Platform של התוסף.
פרטים נוספים זמינים במאמר בנושא תיבות דו-שיח לפתיחת קבצים.
סרגלי צד הם חלוניות שמופיעות בצד שמאל של ממשק העריכה, והם הסוג הנפוץ ביותר של ממשק תוסף. בניגוד לתיבות דו-שיח, אפשר להמשיך לבצע פעולות עם שאר הרכיבים בממשק העריכה בזמן שסרגל הצד פתוח. רוחב סרגלי הצד קבוע, אבל אפשר להתאים אישית את התוכן שלהם.
אתם יוצרים סרגלי צד של תוספים באותו אופן שבו יוצרים סרגלי צד מותאמים אישית ב-Apps Script. ההליך המומלץ הוא כדלקמן:
- יוצרים קובץ פרויקט של סקריפט שמגדיר את מבנה ה-HTML של סרגל הצד, את ה-CSS ואת ההתנהגות של JavaScript בצד הלקוח. כשמגדירים את סרגל הצד, כדאי לעיין בהנחיות הסגנון של תוסף Editor.
בקוד בצד השרת, במקום שבו רוצים שהסרגל הצדדי ייפתח, קוראים ל-HtmlService.createHtmlOutputFromFile(filename) כדי ליצור אובייקט HtmlOutput שמייצג את הסרגל הצדדי. לחלופין, אם אתם משתמשים ב-templated HTML, אתם יכולים להתקשר אל HtmlService.createTemplateFromFile(filename) כדי ליצור תבנית ואז אל HtmlTemplate.evaluate() כדי להמיר אותה לאובייקט HtmlOutput.
מפעילים את Ui.showSidebar(htmlOutput) כדי להציג את סרגל הצד באמצעות HtmlOutput.
סרגלי צד לא משעים את הסקריפט בצד השרת כשהם פתוחים. ה-JavaScript בצד הלקוח יכול לבצע קריאות אסינכרוניות לצד השרת באמצעות google.script.run() ופונקציות handler משויכות. פרטים נוספים זמינים במאמר בנושא תקשורת בין לקוח לשרת.
אלא אם צוין אחרת, התוכן של דף זה הוא ברישיון Creative Commons Attribution 4.0 ודוגמאות הקוד הן ברישיון Apache 2.0. לפרטים, ניתן לעיין במדיניות האתר Google Developers. Java הוא סימן מסחרי רשום של חברת Oracle ו/או של השותפים העצמאיים שלה.
עדכון אחרון: 2025-08-21 (שעון UTC).
[null,null,["עדכון אחרון: 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)."]]
