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

컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

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

사용자가 부가기능 인터페이스에서 몇 가지 옵션을 선택할 때까지 편집기와 상호작용하지 못하게 하려면 대화상자를 사용하고 그렇지 않으면 사이드바를 사용합니다.

대화상자

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

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

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

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

파일 열기 대화상자

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

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

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

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

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

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

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