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

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

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

대화상자

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

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

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

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

파일 열기 대화상자

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

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

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

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

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

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

    부가기능 사이드바의 너비는 300픽셀로 고정되어 있으며 HtmlOutput.setWidth를 호출하여 변경할 수 없습니다.

  3. Ui.showSidebar 를 호출하여 해당 HtmlOutput을 사용하여 사이드바를 표시합니다.

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