Google Docs, Sheets 또는 Forms에 바인딩된 스크립트에는 사전 빌드된 알림 및 메시지뿐만 아니라 맞춤 HTML 서비스 페이지가 포함된 대화상자 및 사이드바 등 여러 유형의 사용자 인터페이스 요소가 표시될 수 있습니다. 일반적으로 이러한 요소는 메뉴 항목에서 열립니다. (Google 양식에서 사용자 인터페이스 요소는 양식을 열어 수정하는 편집자가 볼 수 있으며 응답을 위해 양식을 여는 사용자는 볼 수 없습니다.)
알림 대화상자
알림은 Google Docs, Sheets, Slides, Forms 편집기에서 열리는 사전 빌드된 대화상자입니다. 메시지와 'OK' 버튼이 표시됩니다. 제목과 대체 버튼은 선택사항입니다. 이는 웹브라우저 내 클라이언트 측 자바스크립트에서 window.alert()
를 호출하는 것과 유사합니다.
대화상자가 열려 있는 동안 알림이 서버 측 스크립트를 정지합니다. 사용자가 대화상자를 닫으면 스크립트가 재개되지만 JDBC 연결은 정지 기간 동안 유지되지 않습니다.
아래 예에서와 같이 Google Docs, Forms, Slides, Sheets는 모두 세 가지 변형으로 제공되는 Ui.alert()
메서드를 사용합니다. 기본 'OK' 버튼을 재정의하려면 Ui.ButtonSet
enum의 값을 buttons
인수로 전달합니다. 사용자가 클릭한 버튼을 평가하려면 alert()
의 반환 값을 Ui.Button
enum과 비교합니다.
function onOpen() {
SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
.createMenu('Custom Menu')
.addItem('Show alert', 'showAlert')
.addToUi();
}
function showAlert() {
var ui = SpreadsheetApp.getUi(); // Same variations.
var result = ui.alert(
'Please confirm',
'Are you sure you want to continue?',
ui.ButtonSet.YES_NO);
// Process the user's response.
if (result == ui.Button.YES) {
// User clicked "Yes".
ui.alert('Confirmation received.');
} else {
// User clicked "No" or X in the title bar.
ui.alert('Permission denied.');
}
}
프롬프트 대화상자
프롬프트는 Google Docs, Sheets, Slides, Forms 편집기에서 열리는 사전 빌드된 대화상자입니다. 메시지, 텍스트 입력란, '확인' 버튼을 표시합니다. 제목과 대체 버튼은 선택사항입니다. 이는 웹브라우저 내 클라이언트 측 자바스크립트에서 window.prompt()
를 호출하는 것과 유사합니다.
대화상자가 열려 있는 동안 서버 측 스크립트를 정지하라는 메시지가 표시됩니다. 사용자가 대화상자를 닫으면 스크립트가 재개되지만 JDBC 연결은 정지 기간 동안 유지되지 않습니다.
아래 예에서와 같이 Google Docs, Forms, Slides, Sheets는 모두 세 가지 변형으로 제공되는 Ui.prompt()
메서드를 사용합니다. 기본 'OK' 버튼을 재정의하려면 Ui.ButtonSet
enum의 값을 buttons
인수로 전달합니다. 사용자의 응답을 평가하려면 prompt()
의 반환 값을 캡처한 다음 PromptResponse.getResponseText()
를 호출하여 사용자의 입력을 검색하고 PromptResponse.getSelectedButton()
의 반환 값을 Ui.Button
enum과 비교합니다.
function onOpen() {
SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
.createMenu('Custom Menu')
.addItem('Show prompt', 'showPrompt')
.addToUi();
}
function showPrompt() {
var ui = SpreadsheetApp.getUi(); // Same variations.
var result = ui.prompt(
'Let\'s get to know each other!',
'Please enter your name:',
ui.ButtonSet.OK_CANCEL);
// Process the user's response.
var button = result.getSelectedButton();
var text = result.getResponseText();
if (button == ui.Button.OK) {
// User clicked "OK".
ui.alert('Your name is ' + text + '.');
} else if (button == ui.Button.CANCEL) {
// User clicked "Cancel".
ui.alert('I didn\'t get your name.');
} else if (button == ui.Button.CLOSE) {
// User clicked X in the title bar.
ui.alert('You closed the dialog.');
}
}
맞춤 대화상자
맞춤 대화상자에서는 Google Docs, Sheets, Slides, Forms 편집기 내에 HTML 서비스 사용자 인터페이스를 표시할 수 있습니다.
맞춤 대화상자는 대화상자가 열려 있는 동안 서버 측 스크립트를 정지하지 않습니다.
클라이언트 측 구성요소는 HTML 서비스 인터페이스용 google.script
API를 사용하여 서버 측 스크립트를 비동기식으로 호출할 수 있습니다.
이 대화상자는 HTML 서비스 인터페이스의 클라이언트 측에서 google.script.host.close()
를 호출하여 닫을 수 있습니다. 대화상자는 다른 인터페이스로 닫을 수 없으며 사용자 또는 나 자신만 닫을 수 있습니다.
아래 예에서와 같이 Google Docs, Forms, Slides, Sheets는 모두 Ui.showModalDialog()
메서드를 사용하여 대화상자를 엽니다.
코드.gs
function onOpen() { SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp. .createMenu('Custom Menu') .addItem('Show dialog', 'showDialog') .addToUi(); } function showDialog() { var html = HtmlService.createHtmlOutputFromFile('Page') .setWidth(400) .setHeight(300); SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp. .showModalDialog(html, 'My custom dialog'); }
페이지.html
Hello, world! <input type="button" value="Close" onclick="google.script.host.close()" />
맞춤 사이드바
사이드바를 사용하면 Google Docs, Forms, Slides, Sheets 편집기 내에 HTML 서비스 사용자 인터페이스를 표시할 수 있습니다.
사이드바는 대화상자가 열려 있는 동안 서버 측 스크립트를 정지하지 않습니다. 클라이언트 측 구성요소는 HTML 서비스 인터페이스용 google.script
API를 사용하여 서버 측 스크립트를 비동기식으로 호출할 수 있습니다.
사이드바는 HTML 서비스 인터페이스의 클라이언트 측에서 google.script.host.close()
를 호출하여 자체적으로 닫을 수 있습니다. 사이드바는 다른 인터페이스로 닫을 수 없으며 사용자 또는 닫는 인터페이스로만 닫을 수 있습니다.
아래 예에서와 같이 Google Docs, Forms, Slides, Sheets는 모두 Ui.showSidebar()
메서드를 사용하여 사이드바를 엽니다.
코드.gs
function onOpen() { SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp. .createMenu('Custom Menu') .addItem('Show sidebar', 'showSidebar') .addToUi(); } function showSidebar() { var html = HtmlService.createHtmlOutputFromFile('Page') .setTitle('My custom sidebar'); SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp. .showSidebar(html); }
페이지.html
Hello, world! <input type="button" value="Close" onclick="google.script.host.close()" />
파일 열기 대화상자
Google 선택 도구는 Google Drive, Google 이미지 검색, Google 동영상 검색 등의 Google 서버에 저장된 정보를 위한 '파일 열기' 대화상자입니다.
아래 예와 같이 선택도구의 클라이언트 측 자바스크립트 API를 HTML 서비스에서 사용하여 사용자가 기존 파일을 선택하거나 새 파일을 업로드한 다음 이 선택 항목을 스크립트로 전달하여 나중에 사용할 수 있는 맞춤 대화상자를 만들 수 있습니다.
선택 도구를 사용 설정하고 API 키를 가져오려면 다음 안내를 따르세요.
- 스크립트 프로젝트가 표준 GCP 프로젝트를 사용하고 있는지 확인합니다.
- GCP 프로젝트에서 'Google Picker API'를 사용 설정합니다.
- GCP 프로젝트가 열린 상태에서 API 및 서비스를 선택한 다음 사용자 인증 정보를 클릭합니다.
- 사용자 인증 정보 만들기 > API 키를 클릭합니다. 이렇게 하면 키가 생성되지만, 애플리케이션 제한사항과 API 제한사항을 모두 추가하려면 키를 수정해야 합니다.
- API 키 대화상자에서 닫기를 클릭합니다.
- 생성한 API 키 옆에 있는 더보기
> API 키 수정을 클릭합니다.
애플리케이션 제한사항에서 다음 단계를 완료합니다.
- HTTP 리퍼러 (웹사이트)를 선택합니다.
- 웹사이트 제한사항에서 항목 추가를 클릭합니다.
- 리퍼러를 클릭하고
*.google.com
를 입력합니다. - 다른 항목을 추가하고 리퍼러로
*.googleusercontent.com
을 입력합니다. - 완료를 클릭합니다.
API 제한사항에서 다음 단계를 완료합니다.
- 키 제한을 선택합니다.
API 선택 섹션에서 Google Picker API를 선택하고 확인을 클릭합니다.
참고: Google Picker API는 Cloud 프로젝트에 사용 설정된 API만 표시하므로 사용 설정하지 않는 한 표시되지 않습니다.
API 키에서 클립보드에 복사
를 클릭합니다.
하단에서 저장을 클릭합니다.