편집기 부가기능의 대화상자 및 사이드바

대부분의 편집기 부가기능의 경우 대화상자 창과 사이드바 패널은 기본 부가기능 사용자 인터페이스입니다. 둘 다 표준 HTML 및 CSS를 사용하여 완전히 맞춤설정할 수 있으며, 사용자가 사이드바 또는 대화상자와 상호작용할 때 Apps Script의 클라이언트-서버 통신 모델을 사용하여 Apps Script 기능을 실행할 수 있습니다. 부가기능은 여러 사이드바와 대화상자를 정의할 수 있지만 부가기능은 한 번에 하나씩만 표시할 수 있습니다.

사용자가 부가기능 인터페이스에서 어떤 옵션을 선택할 때까지 편집기와 상호작용하지 못하게 하려면 대화상자를 사용하고, 그렇지 않은 경우에는 사이드바를 사용하세요.

대화상자

대화상자는 기본 편집기 콘텐츠를 오버레이하는 창 패널입니다. Apps Script 대화상자는 모달입니다. 열려 있는 동안에는 사용자가 편집기 인터페이스의 다른 요소와 상호작용할 수 없습니다. 대화상자의 콘텐츠와 크기를 맞춤설정할 수 있습니다.

부가기능 대화상자는 Apps Script 커스텀 대화상자와 같은 방식으로 빌드합니다. 일반적인 권장 절차는 다음과 같습니다.

  1. 대화상자의 HTML 구조, CSS, 클라이언트 측 JavaScript 동작을 정의하는 스크립트 프로젝트 파일을 만듭니다. 대화상자를 정의할 때 Editor 부가기능 스타일 가이드라인을 참고하세요.
  2. 대화상자를 열 서버 측 코드에서 HtmlService.createHtmlOutputFromFile(filename)를 호출하여 대화상자를 나타내는 HtmlOutput 객체를 만듭니다. 또는 템플릿 HTML을 사용하는 경우 HtmlService.createTemplateFromFile(filename)를 호출하여 템플릿을 생성한 다음 HtmlTemplate.evaluate()를 호출하여 HtmlOutput 객체로 변환할 수 있습니다.
  3. Ui.showModalDialog(htmlOutput, dialogTitle)를 호출하여 HtmlOutput를 사용하여 대화상자를 표시합니다.

대화상자는 서버 측 스크립트가 열려 있는 동안 정지되지 않습니다. 클라이언트 측 JavaScript는 google.script.run() 및 연결된 핸들러 함수를 사용하여 서버 측을 비동기식으로 호출할 수 있습니다. 자세한 내용은 클라이언트 간 통신을 참고하세요.

파일 열기 대화상자

파일 열기 대화상자는 사용자가 Google 드라이브에서 파일을 선택할 수 있도록 미리 만들어진 대화상자입니다. 파일 열기 대화상자를 설계할 필요 없이 부가기능에 추가할 수 있지만 몇 가지 추가 구성이 필요합니다. 또한 Google Picker API를 사용 설정하려면 부가기능의 Cloud Platform 프로젝트에 액세스해야 합니다.

자세한 내용은 파일 열기 대화상자를 참고하세요.

사이드바는 편집기 인터페이스의 오른쪽에 표시되는 패널로, 가장 일반적인 부가기능 인터페이스 유형입니다. 대화상자와 달리 사이드바가 열려 있는 동안 편집기 인터페이스의 다른 요소와 계속 상호작용할 수 있습니다. 사이드바의 너비는 고정되어 있지만 콘텐츠를 맞춤설정할 수 있습니다.

부가기능 사이드바는 Apps Script 커스텀 사이드바와 동일한 방식으로 빌드합니다. 일반적인 권장 절차는 다음과 같습니다.

  1. 사이드바의 HTML 구조, CSS, 클라이언트 측 JavaScript 동작을 정의하는 스크립트 프로젝트 파일을 만듭니다. 사이드바를 정의할 때 Editor 부가기능 스타일 가이드라인을 참고하세요.
  2. 사이드바를 열 서버 측 코드에서 HtmlService.createHtmlOutputFromFile(filename)를 호출하여 사이드바를 나타내는 HtmlOutput 객체를 만듭니다. 또는 템플릿 HTML을 사용하는 경우 HtmlService.createTemplateFromFile(filename)를 호출하여 템플릿을 생성한 다음 HtmlTemplate.evaluate()를 호출하여 HtmlOutput 객체로 변환할 수 있습니다.

  3. Ui.showSidebar(htmlOutput)를 호출하여 HtmlOutput를 사용하여 사이드바를 표시합니다.

사이드바는 서버 측 스크립트가 열려 있는 동안 정지되지 않습니다. 클라이언트 측 JavaScript는 google.script.run() 및 연결된 핸들러 함수를 사용하여 서버 측을 비동기식으로 호출할 수 있습니다. 자세한 내용은 클라이언트 간 통신을 참고하세요.