如何在 Google 表格中创建侧边栏

侧边栏是一个用户界面元素(一个小的垂直区域),它出现在较大窗口的左侧或右侧或用户屏幕上,以显示相关信息或选项列表或导航选项。

Google 表格中的侧边栏是显示在 Google 表格右侧的用户界面面板。 Google 提供了一个名为 Apps Script 的内置脚本编辑器,它可以为 G-Suite 应用程序创建各种附加组件和元素。它还可以用于在 Google 表格中构建您自己的自定义侧边栏。

本文将向您展示如何使用 Google Apps 脚本编辑器在 Google 表格中制作自定义侧边栏。

使用 Apps 脚本在 Google 表格中创建边栏

如果要制作自定义侧边栏,则需要在 Apps 脚本编辑器中输入并运行某些代码。然后,您可以使用 HTML、CSS 和 Javascript 代码在侧边栏中构建自己的小部件。

首先,打开 Google 表格。在 Google 表格菜单中,点击“工具”并选择“脚本编辑器”。

这将在浏览器的新选项卡中打开 Apps 脚本编辑器,您可以在其中编写用户界面代码。

在 Code.gs 页面中编写以下代码:

function onOpen() { SpreadsheetApp.getUi() .createMenu('My New Menu') .addItem('My sidebar 1', 'showSidebar') .addToUi(); } function showSidebar() { var html = HtmlService.createHtmlOutputFromFile('Sidebar') .setTitle('Calculation Sidebar'); SpreadsheetApp.getUi() .showSidebar(html); }

在上面的 Code.gs 脚本代码中,OnOpen() 函数在 Google 表格菜单栏中创建了一个名为“我的新菜单”的自定义菜单。该菜单将包含一个名为“My sidebar-1”的菜单项。当您单击此菜单项时,将运行 showAdminSidebar() 函数(代码的第二部分),并且侧边栏将显示在 Google 工作表窗口的右侧。

接下来,我们需要在脚本编辑器中创建一个 HTML 文件,然后使用这个文件,您就可以创建侧边栏了。

要创建 HTML 文件,请单击 Apps 脚本编辑器中文件旁边的加号 (+) 图标,然后选择“HTML”。

这将在 Code.gs 下创建一个 HTML 文件。将文件重命名为“侧边栏”。此名称应与在 showSidebar() 函数中添加的名称相同(var html = HtmlService.createHtmlOutputFromFile(‘Sidebar’))。

在 Sidebar.html 文件的部分中编写以下代码:

这是我的新侧边栏

上面的代码显示文本字符串“这是我的新侧边栏”和“关闭”按钮,单击时关闭侧边栏。

在 Sidebar.html 部分编写完上述代码后,它应该包含以下代码:

这是我的新侧边栏。

截图:

输入完两个代码后,单击工具栏中的保存图标来保存项目(请参见下面的屏幕截图)。然后通过单击“运行”图标运行这些功能。

无论您在此处运行脚本还是在 Google 表格工具栏中选择自定义菜单项(第一次),Google 都会要求您授权脚本运行。由于您正在运行第三方自定义小部件,因此 google 将请求您的授权。一旦您授权该脚本,它就会在您的 Google 表格中显示侧边栏。

如何在 Google 中授权应用程序脚本代码

要授权您的自定义脚本,请按照下列步骤操作:

运行脚本后,Google 会要求您选择 Google 帐户。选择后,会出现一个小弹出窗口,点击“查看权限”。

将出现另一个弹出窗口,在这里选择“显示高级”并单击“转到无标题项目(不安全)”(它将显示您的项目名称)。

在下一个窗口中,单击“允许”,谷歌表将运行您的脚本。

完成后,返回到您的 Google 表格并刷新它。新的自定义菜单(我的新菜单)将添加到我们通过 Code.gs 脚本添加的 Google 工作表工具栏。单击“我的新菜单”并选择菜单项“我的侧边栏 1”以显示侧边栏。

现在您的自定义侧边栏将与我们添加的文本和按钮一起显示在您的谷歌表格的右侧(如下所示)。当您单击该按钮时,侧边栏将关闭。

好吧,现在您知道如何在 Google 表格中构建自己的侧边栏了。