Boîtes de dialogue et barres latérales pour les modules complémentaires d'éditeurs
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Pour la plupart des modules complémentaires d'éditeurs, les fenêtres de dialogue et les panneaux de barre latérale sont les principales interfaces utilisateur des modules complémentaires.
Les deux sont entièrement personnalisables à l'aide des langages HTML et CSS standards. Vous pouvez utiliser le modèle de communication client-serveur d'Apps Script pour exécuter des fonctions Apps Script lorsque l'utilisateur interagit avec la barre latérale ou la boîte de dialogue.
Votre module complémentaire peut définir plusieurs barres latérales et boîtes de dialogue, mais il ne peut en afficher qu'une à la fois.
Si vous souhaitez empêcher l'utilisateur d'interagir avec l'éditeur tant qu'il n'a pas fait un choix dans l'interface du module complémentaire, utilisez une boîte de dialogue. Sinon, utilisez une barre latérale.
Boîtes de dialogue
Les boîtes de dialogue sont des panneaux de fenêtre qui se superposent au contenu principal de l'éditeur. Les boîtes de dialogue Apps Script sont modales. Lorsqu'elles sont ouvertes, l'utilisateur ne peut pas interagir avec les autres éléments de l'interface de l'éditeur. Vous pouvez personnaliser le contenu et la taille des boîtes de dialogue.
Vous créez des boîtes de dialogue de module complémentaire de la même manière que les boîtes de dialogue personnalisées Apps Script. La procédure générale recommandée est la suivante :
Créez un fichier de projet de script qui définit la structure HTML, le CSS et le comportement JavaScript côté client de votre boîte de dialogue. Lorsque vous définissez la boîte de dialogue, reportez-vous aux Consignes relatives au style des modules complémentaires de l'éditeur.
Les boîtes de dialogue ne suspendent pas le script côté serveur lorsqu'elles sont ouvertes. Le JavaScript côté client peut effectuer des appels asynchrones au côté serveur à l'aide de google.script.run() et des fonctions de gestion associées. Pour en savoir plus, consultez Communication entre le client et le serveur.
Boîtes de dialogue "Ouvrir un fichier"
Les boîtes de dialogue d'ouverture de fichier sont des boîtes de dialogue prédéfinies qui permettent à vos utilisateurs de sélectionner des fichiers dans leur Google Drive. Vous pouvez ajouter une boîte de dialogue d'ouverture de fichier à votre module complémentaire sans avoir à la concevoir, mais cela nécessite une configuration supplémentaire. Vous devez également avoir accès au projet Cloud Platform du module complémentaire pour activer l'API Google Picker.
Les barres latérales sont des panneaux qui s'affichent à droite de l'interface de l'éditeur. Il s'agit du type d'interface de module complémentaire le plus courant. Contrairement aux boîtes de dialogue, vous pouvez continuer à interagir avec les autres éléments de l'interface de l'éditeur lorsqu'une barre latérale est ouverte. Les barres latérales ont une largeur fixe, mais vous pouvez personnaliser leur contenu.
Vous créez des barres latérales de module complémentaire de la même manière que les barres latérales personnalisées Apps Script. La procédure générale recommandée est la suivante :
Créez un fichier de projet de script qui définit la structure HTML, le CSS et le comportement JavaScript côté client de votre barre latérale. Lorsque vous définissez la barre latérale, reportez-vous aux consignes de style pour les modules complémentaires de l'éditeur.
Les barres latérales ne suspendent pas le script côté serveur lorsqu'elles sont ouvertes. Le JavaScript côté client peut effectuer des appels asynchrones au côté serveur à l'aide de google.script.run() et des fonctions de gestion associées. Pour en savoir plus, consultez Communication entre le client et le serveur.
Sauf indication contraire, le contenu de cette page est régi par une licence Creative Commons Attribution 4.0, et les échantillons de code sont régis par une licence Apache 2.0. Pour en savoir plus, consultez les Règles du site Google Developers. Java est une marque déposée d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/08/21 (UTC).
[null,null,["Dernière mise à jour le 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)."]]
