绑定到 Google 文档、 Google 表格或表单可以显示多种类型的界面元素,例如 预先构建的提醒和提示,以及包含自定义 HTML 服务网页。通常情况下,这些元素 即可从菜单项中打开。(请注意,在 Google 表单中, 界面元素只有打开表单的编辑者可见 修改表单,而不是打开表单进行回复的用户。)
提醒对话框
提醒是指在 Google 文档、表格、
幻灯片或表单编辑器。屏幕上会显示一条消息和“OK”按钮;标题以及
其他按钮是可选的。它类似于调用
window.alert()
使用网络浏览器中的客户端 JavaScript 编写代码。
对话框打开时提醒会暂停服务器端脚本。脚本 会在用户关闭对话框后恢复运行,而 JDBC 在整个暂停期间不会持续有效。
如下例所示,Google 文档、表单、幻灯片
和 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()
使用网络浏览器中的客户端 JavaScript 编写代码。
当对话框打开时,提示会暂停服务器端脚本。脚本 会在用户关闭对话框后恢复运行,而 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 文档”功能。
自定义对话框在打开时不会挂起服务器端脚本。
客户端组件可以对服务器端脚本进行异步调用
使用 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()" />
自定义边栏
边栏可以显示 HTML 服务用户 Google 文档、表单、幻灯片和表格编辑器内的界面。
当对话框打开时,边栏不会暂停服务器端脚本。通过
客户端组件可以对服务器端脚本进行异步调用
使用 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 视频 搜索等。
如下例所示,可以使用 Picker 的客户端 JavaScript API (在 HTML 服务中)创建自定义对话框, 用户选择现有文件或上传新文件,然后将选择内容传回 以供进一步使用。
如需启用选择器并获取 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 密钥下,点击“复制到剪贴板”图标
。
点击底部的保存。