繫結至 Google 文件的指令碼。 試算表或表單可顯示多種類型的使用者介面元素： 預先建構的快訊和提示，以及內含自訂快訊的對話方塊和側欄 HTML 服務網頁。一般來說，這些元素 是從選單項目中開啟。(請注意，在 Google 表單中， 只有開啟表單的編輯者才能看到使用者介面元素 而不需要修改開啟表單的使用者)。
快訊對話方塊
快訊是預先建立的對話方塊，會在 Google 文件、試算表、試算表
簡報或表單編輯器。這類對話方塊會顯示訊息和「確定」按鈕；標題和其他按鈕則為選用項目。這與呼叫
window.alert()敬上
。
快訊會在對話方塊開啟時暫停伺服器端指令碼。腳本 使用者關閉對話方塊後繼續執行，但 JDBC 連線也不會持續。
如以下範例所示，Google 文件、表單、簡報
和試算表都使用 Ui.alert() 方法，
都有三個變化版本如要覆寫預設的「OK」按鈕時，請傳送
Ui.ButtonSet 列舉的值
做為 buttons 引數若要評估使用者點選了哪個按鈕，請比較
alert() 傳回的值
Ui.Button 列舉。
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 文件、試算表、簡報或表單編輯器中開啟。這個應用程式會顯示訊息、文字輸入欄位和「確定」
按鈕；標題和替代按鈕為選用項目。通話方式與呼叫
window.prompt()敬上
。
對話方塊開啟時，提示暫停伺服器端指令碼。腳本 使用者關閉對話方塊後繼續執行，但 JDBC 連線也不會持續。
如以下範例所示，Google 文件支援的表單、簡報和試算表均使用 Ui.prompt() 方法。
提供三種變化版本如要覆寫預設的「OK」按鈕，
從 Ui.ButtonSet 傳遞值
做為 buttons 引數。為了評估使用者的回應，請擷取
傳回 prompt() 的值，然後呼叫
PromptResponse.getResponseText()
擷取使用者的輸入內容，然後比較
PromptResponse.getSelectedButton()
加入 Ui.Button 列舉後即可
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 文件、試算表、簡報或表單編輯器
自訂對話方塊在開啟時「不會」暫停伺服器端指令碼。用戶端元件可以對伺服器端指令碼進行非同步呼叫
使用 google.script API
適用於 HTML-service 介面
對話方塊可以藉由呼叫
google.script.host.close()敬上
。對話方塊無法由
或只存取自己的資源
如以下範例所示，Google 文件、表單、簡報和試算表都是使用 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()" />
自訂側欄
側欄可在 Google 文件、表單、簡報和試算表編輯器中顯示 HTML 服務使用者介面。
對話方塊開啟時，側欄不會暫停伺服器端指令碼。
用戶端元件可以對伺服器端指令碼進行非同步呼叫
使用 google.script API
適用於 HTML-service 介面
側欄可以呼叫
google.script.host.close()敬上
。其他介面無法關閉側欄，只有使用者或側欄本身可以關閉。
如以下範例所示，Google 文件、表單、簡報和試算表都使用 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 Picker 是「開啟檔案」顯示 Google Cloud 控制台中 Google 伺服器，包括 Google 雲端硬碟、Google 圖片搜尋、Google 影片 搜尋等。
如以下範例所示，您可以使用挑選器的用戶端 JavaScript API 啟用 HTML 服務，即可建立自訂對話方塊，讓 使用者選取現有檔案或上傳新檔案後 指令碼，以便日後使用
如要啟用 Picker 並取得 API 金鑰，請按照下列說明操作：
- 確認您的指令碼專案使用標準 GCP 專案。
- 啟用 Google Picker API在 Google Cloud 專案中設定
- Google Cloud 專案仍處於開啟狀態時，請選取「API 與」「服務」，則 按一下「憑證」。
- 按一下「建立憑證」>「API 金鑰」。這個動作會建立金鑰，但您應編輯金鑰，為金鑰新增應用程式限制和 API 限制。
- 在「API 金鑰」對話方塊中，按一下「關閉」。
- 在您建立的 API 金鑰旁邊，依序按一下「更多」圖示
>「編輯 API 金鑰」。 在「應用程式限制」下方，完成下列步驟：
- 選取「HTTP 參照網址 (網站)」。
- 在「網站限制」下方，按一下「新增項目」。
- 按一下「Referrer」，然後輸入
*.google.com。 - 新增其他項目，並輸入
*.googleusercontent.com做為參照網址。 - 按一下 [完成]。
在「API 限制」下方，完成下列步驟：
- 選取「限制金鑰」。
在「選取 API」專區中選取「Google Picker API」，然後按一下「確定」。
注意：你必須啟用 Google Picker API，才能顯示這個 API 因為清單只會顯示已為 Cloud 啟用的 API 專案。
在「API 金鑰」下方，按一下「複製到剪貼簿」圖示
。按一下底部的 [儲存]。