绑定到 Google 文档、表格或表单的脚本可以显示多种类型的界面元素，包括预构建的提醒和提示，以及包含自定义 HTML 服务页面的对话框和边栏。通常情况下，这些元素 即可从菜单项中打开。（请注意，在 Google 表单中， 界面元素只有打开表单的编辑者可见 修改表单，而不是打开表单进行回复的用户。）
提醒对话框
提醒是指在 Google 文档、表格、
幻灯片或表单编辑器。屏幕上会显示一条消息和“OK”按钮；标题以及
其他按钮是可选的。它类似于调用
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 文档、表格、
幻灯片或表单编辑器。它显示一条消息、一个文本输入字段和一个“OK”
按钮；标题和备用按钮是可选的。它类似于调用
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
。
对话框可通过调用
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
。
边栏可通过调用
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 选择器是一个“打开文件”工具信息存储的对话框 Google 服务器，包括 Google 云端硬盘、Google 图片搜索、Google 视频 搜索等。
如以下示例所示，您可以在 HTML 服务中使用 Picker 的客户端 JavaScript API 创建自定义对话框，让用户选择现有文件或上传新文件，然后将该选择传回给脚本以供进一步使用。
如需启用选择器并获取 API 密钥，请按照以下说明操作：
- 验证您的脚本项目使用的是标准 GCP 项目。
- 启用“Google Picker API”在您的 Google Cloud 项目中。
- 在 Google Cloud 项目仍处于打开状态时，选择 APIs & &服务 点击凭据。
- 点击创建凭据 > API 密钥。此操作会创建密钥，但您应修改密钥，以向密钥同时添加应用限制和 API 限制。
- 在 API 密钥对话框中，点击关闭。
- 在您创建的 API 密钥旁边，依次点击“更多”图标
> 修改 API 密钥。 在应用限制下，完成以下步骤：
- 选择 HTTP 引荐来源网址（网站）。
- 在网站限制下，点击添加一项。
- 点击引荐来源，然后输入
*.google.com。 - 再添加一项，然后输入
*.googleusercontent.com作为引荐来源网址。 - 点击完成。
在 API 限制下，完成以下步骤：
- 选择限制密钥。
在选择 API 部分中，选择 Google Picker API，然后点击确定。
注意：除非您已启用，否则不会显示 Google Picker API。 因为此列表仅显示已经针对 Cloud Storage 启用的 API， 项目。
在 API 密钥下，点击“复制到剪贴板”图标
。点击底部的保存。