Google Docs에 결합된 스크립트 Sheets 또는 Forms에서는 여러 유형의 사용자 인터페이스 요소를 표시할 수 있습니다. 사전 빌드된 알림과 프롬프트, 그리고 사용자 정의 기능이 포함된 HTML 서비스 페이지에서 사용할 수 있습니다. 일반적으로 이러한 요소는 메뉴 항목에서 열립니다. (Google Forms에서는 사용자 인터페이스 요소가 양식을 여는 편집자만 볼 수 있음 응답하기 위해 양식을 여는 사용자가 아니라 수정할 수 있습니다.
알림 대화상자
알림은 Google Docs, Sheets,
Slides 또는 Forms 편집기 메시지와 'OK'를 표시합니다. 버튼; 제목 및
대체 버튼은 선택사항입니다. 이것은
window.alert()
를 사용해야 합니다.
알림은 대화상자가 열려 있는 동안 서버 측 스크립트를 정지합니다. 스크립트 다시 시작하지만 JDBC는 정지 기간 동안 연결이 유지되지 않습니다.
아래 예에서 볼 수 있듯이 Google Docs, Forms, Slides,
Sheets는 모두 Ui.alert()
메서드를 사용합니다.
3가지 변형으로 제공됩니다 기본값인 '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 문서, 스프레드시트, 문서 도구 내에서 열리는
Slides 또는 Forms 편집기 메시지, 텍스트 입력란, 'OK'가 표시됩니다.
버튼; 제목과 대체 버튼은 선택사항입니다. 이것은
window.prompt()
를 사용해야 합니다.
프롬프트는 대화상자가 열려 있는 동안 서버 측 스크립트를 정지합니다. 스크립트 다시 시작하지만 JDBC는 정지 기간 동안 연결이 유지되지 않습니다.
아래 예에서 볼 수 있듯이 Google Docs, Forms, Slides, Sheets는 모두 Ui.prompt()
메서드를 사용합니다.
세 가지 변형으로 제공됩니다 기본값인 'OK'를 재정의하는 방법 버튼,
Ui.ButtonSet
의 값 전달
buttons
인수로 enum을 전달합니다. 사용자의 응답을 평가하려면
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.');
}
}
맞춤 대화상자
맞춤 대화상자에 HTML 서비스 사용자가 표시될 수 있음 Google Docs, Sheets, Slides 또는 Forms 편집기 내의 인터페이스에 액세스할 수 있습니다
맞춤 대화상자는 대화상자가 열려 있는 동안 서버 측 스크립트를 정지하지 않습니다.
클라이언트 측 구성요소는 서버 측 스크립트를 비동기식으로 호출할 수 있습니다.
google.script
API 사용
(HTML 서비스 인터페이스용)
대화상자는
google.script.host.close()
클라이언트 측에서 구현됩니다 대화상자를 닫을 수 없습니다.
다른 인터페이스에 액세스할 수 있습니다.
아래 예와 같이 Google Docs, Forms, Slides, Sheets 모두 Ui.showModalDialog()
메서드를 사용하여 대화상자를 엽니다.
Code.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'); }
Page.html
Hello, world! <input type="button" value="Close" onclick="google.script.host.close()" />
맞춤 사이드바
사이드바는 HTML 서비스 사용자를 표시할 수 있습니다. Google Docs, Forms, Slides, Sheets 편집기 내의 인터페이스입니다.
사이드바는 대화상자가 열려 있는 동안 서버 측 스크립트를 정지하지 않습니다. 이
클라이언트 측 구성요소가 서버 측 스크립트를 비동기식으로 호출할 수 있음
google.script
API 사용
(HTML 서비스 인터페이스용)
사이드바는
google.script.host.close()
클라이언트 측에서 구현됩니다 사이드바를 닫을 수 없음
다른 인터페이스에서 사용자 또는 사용자 자신에 의해서만 액세스할 수 있습니다.
아래 예와 같이 Google Docs, Forms, Slides, Sheets 모두 Ui.showSidebar()
메서드를 사용하여 사이드바를 엽니다.
Code.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); }
Page.html
Hello, world! <input type="button" value="Close" onclick="google.script.host.close()" />
파일 열기 대화상자
Google 선택 도구는 '파일 열기'입니다. 저장된 정보에 대한 대화상자 Google Drive, Google 이미지 검색, Google 비디오를 비롯한 Google 서버 검색 등
아래 예와 같이 Picker의 클라이언트 측 JavaScript API를 사용할 수 있습니다. HTML 서비스에서 맞춤 대화상자를 생성하여 사용자는 기존 파일을 선택하거나 새 파일을 업로드한 다음 선택한 파일을 사용할 수 있습니다.
선택 도구를 사용 설정하고 API 키를 가져오려면 다음 안내를 따르세요.
- 스크립트 프로젝트가 표준 GCP 프로젝트를 사용하고 있는지 확인합니다.
- 'Google Picker API' 사용 설정 설정을 해야 합니다.
- Google Cloud 프로젝트가 아직 열려 있는 상태에서 API 및 서비스를 선택한 다음 사용자 인증 정보를 클릭합니다.
- 사용자 인증 정보 만들기 > API 키를 클릭합니다. 이 작업으로 키가 생성되지만 애플리케이션 제한사항과 API 제한사항을 모두 키에 추가하려면 키를 수정해야 합니다.
- API 키 대화상자에서 닫기를 클릭합니다.
- 생성한 API 키 옆에 있는 더보기 > API 키 수정을 클릭합니다.
애플리케이션 제한사항에서 다음 단계를 완료합니다.
- HTTP 리퍼러 (웹사이트)를 선택합니다.
- 웹사이트 제한사항에서 항목 추가를 클릭합니다.
- 리퍼러를 클릭하고
*.google.com
를 입력합니다. - 다른 항목을 추가하고 리퍼러로
*.googleusercontent.com
를 입력합니다. - 완료를 클릭합니다.
API 제한사항에서 다음 단계를 완료하세요.
- 키 제한을 선택합니다.
API 선택 섹션에서 Google Picker API를 선택하고 확인을 클릭합니다.
참고: Google Picker API는 사용 설정하지 않으면 표시되지 않습니다. 목록에 Cloud SQL에 사용 설정된 API만 표시되기 때문에 살펴보겠습니다
API 키에서 클립보드에 복사 를 클릭합니다.
하단에서 저장을 클릭합니다.