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

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

사용자가 부가기능 인터페이스에서 선택을 할 때까지 편집기와 상호작용할 수 없도록 하려면 대화상자를 사용하고, 그렇지 않으면 사이드바를 사용하세요.

대화상자

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

부가기능 대화상자는 Apps Script 맞춤 대화상자와 동일한 방식으로 빌드합니다. 일반적으로 권장되는 절차는 다음과 같습니다.

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

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

파일 열기 대화상자

파일 열기 대화상자는 사용자가 Google Drive에서 파일을 선택할 수 있는 사전 빌드된 대화상자입니다. 파일 열기 대화상자를 디자인하지 않고도 부가기능에 추가할 수 있지만 추가 구성이 필요합니다. 또한 Google Picker API를 사용 설정하려면 부가기능의 Cloud Platform 프로젝트에 대한 액세스 권한도 필요합니다.

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

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

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

  1. 사이드바의 HTML 구조, CSS, 클라이언트 측 JavaScript 동작을 정의하는 스크립트 프로젝트 파일을 만듭니다. 사이드바를 정의할 때는 편집기 부가기능 스타일 가이드라인을 참고하세요.

  2. 사이드바를 열려는 서버 측 코드에서 HtmlService.createHtmlOutputFromFile(filename)를 호출하여 사이드바를 나타내는 HtmlOutput 객체를 만듭니다. 또는 템플릿 HTML을 사용하는 경우 HtmlService.createTemplateFromFile(filename)를 호출하여 템플릿을 생성한 다음 HtmlTemplate.evaluate()를 호출하여 HtmlOutput 객체로 변환할 수 있습니다.

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

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