편집기 부가기능의 대화상자 및 사이드바
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
대부분의 편집기 부가기능에서 대화상자 창과 사이드바 패널은 기본 부가기능 사용자 인터페이스입니다.
둘 다 표준 HTML과 CSS를 사용하여 완전히 맞춤설정할 수 있으며, 사용자가 측면 패널 또는 대화상자와 상호작용할 때 Apps Script 함수를 실행하기 위해 Apps Script의 클라이언트-서버 통신 모델을 사용할 수 있습니다.
부가기능은 여러 사이드바와 대화상자를 정의할 수 있지만 한 번에 하나만 표시할 수 있습니다.
사용자가 부가기능 인터페이스에서 선택을 할 때까지 편집기와 상호작용하지 못하도록 하려면 대화상자를 사용하고, 그렇지 않으면 사이드바를 사용합니다.
대화상자
대화상자는 기본 편집기 콘텐츠를 오버레이하는 창 패널입니다. Apps Script 대화상자는 모달입니다. 대화상자가 열려 있는 동안 사용자는 편집기 인터페이스의 다른 요소와 상호작용할 수 없습니다. 대화상자의 콘텐츠와 크기를 맞춤설정할 수 있습니다.
Apps Script 맞춤 대화상자와 동일한 방식으로 부가기능 대화상자를 빌드합니다. 일반적으로 권장되는 절차는 다음과 같습니다.
- 대화상자의 HTML 구조, CSS, 클라이언트 측 JavaScript 동작을 정의하는 스크립트 프로젝트 파일을 만듭니다. 대화상자를 정의할 때는 Editor 부가기능 스타일 가이드라인을 참고하세요.
- 대화상자를 열려는 서버 측 코드에서
HtmlService.createHtmlOutputFromFile(filename)를 호출하여 대화상자를 나타내는 HtmlOutput 객체를 만듭니다. 또는 템플릿 HTML을 사용하는 경우 HtmlService.createTemplateFromFile(filename)를 호출하여 템플릿을 생성한 다음 HtmlTemplate.evaluate()를 호출하여 HtmlOutput 객체로 변환할 수 있습니다.
HtmlOutput를 사용하여 대화상자를 표시하려면 Ui.showModalDialog(htmlOutput, dialogTitle)를 호출합니다.
대화상자는 열려 있는 동안 서버 측 스크립트를 일시중지하지 않습니다. 클라이언트 측 JavaScript는 google.script.run() 및 관련 핸들러 함수를 사용하여 서버 측에 비동기 호출을 할 수 있습니다. 자세한 내용은 클라이언트-서버 통신을 참고하세요.
파일 열기 대화상자
파일 열기 대화상자는 사용자가 Google Drive에서 파일을 선택할 수 있도록 미리 빌드된 대화상자입니다. 파일 열기 대화상자를 디자인하지 않고도 애드온에 추가할 수 있지만 몇 가지 추가 구성이 필요합니다. Google Picker API를 사용 설정하려면 부가기능의 Cloud Platform 프로젝트에 대한 액세스 권한도 필요합니다.
자세한 내용은 파일 열기 대화상자를 참고하세요.
사이드바는 편집기 인터페이스의 오른쪽에 표시되는 패널로, 가장 일반적인 유형의 부가기능 인터페이스입니다. 대화상자와 달리 사이드바가 열려 있는 동안에도 편집기 인터페이스의 다른 요소와 계속 상호작용할 수 있습니다. 사이드바의 너비는 고정되어 있지만 콘텐츠는 맞춤설정할 수 있습니다.
Apps Script 맞춤 사이드바와 동일한 방식으로 부가기능 사이드바를 빌드합니다. 일반적으로 권장되는 절차는 다음과 같습니다.
- 사이드바의 HTML 구조, CSS, 클라이언트 측 JavaScript 동작을 정의하는 스크립트 프로젝트 파일을 만듭니다. 사이드바를 정의할 때는 Editor 부가기능 스타일 가이드라인을 참고하세요.
사이드바를 열려는 서버 측 코드에서 HtmlService.createHtmlOutputFromFile(filename)를 호출하여 사이드바를 나타내는 HtmlOutput 객체를 만듭니다. 또는 템플릿 HTML을 사용하는 경우 HtmlService.createTemplateFromFile(filename)를 호출하여 템플릿을 생성한 다음 HtmlTemplate.evaluate()를 호출하여 HtmlOutput 객체로 변환할 수 있습니다.
HtmlOutput를 사용하여 사이드바를 표시하려면 Ui.showSidebar(htmlOutput)를 호출합니다.
사이드바가 열려 있는 동안 서버 측 스크립트가 일시중지되지 않습니다. 클라이언트 측 JavaScript는 google.script.run() 및 관련 핸들러 함수를 사용하여 서버 측에 비동기 호출을 할 수 있습니다. 자세한 내용은 클라이언트-서버 통신을 참고하세요.
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책을 참조하세요. 자바는 Oracle 및/또는 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)."]]
