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

  • 归档

向 Google 表格添加自定义侧边栏可让您将个性化工具和界面直接集成到电子表格中。 Google 表格提供了一个名为 Apps Script 的内置脚本编辑器，可让您使用 HTML、CSS 和 JavaScript 创建自定义侧边栏。

步骤一：打开您的 Google 表格文档。从菜单栏中，单击Tools并选择Script editor.

这将在新选项卡中打开 Apps 脚本编辑器，您可以在其中编写自定义代码。

步骤2：在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);
}

这onOpen()此脚本中的函数添加了一个名为的自定义菜单My New Menu到 Google 表格菜单栏。在此菜单中，有一个项目标记为My sidebar 1。单击此项目将执行showSidebar()函数，它在工作表的右侧显示侧边栏。

步骤3：在 Apps 脚本编辑器中，为侧边栏内容创建一个新的 HTML 文件。

为此，请单击+旁边的图标文件部分并选择HTML从下拉菜单中。

将新的 HTML 文件重命名为Sidebar。确保该名称与在中指定的名称相匹配showSidebar()在你的脚本中运行。

第4步：里面的Sidebar.html文件中，添加以下代码<body>标签：

<p>This is my new Sidebar</p>
<input type="button" value="Close" onclick="google.script.host.close()" />

此代码将显示文本“这是我的新侧边栏”和Close单击时将关闭侧边栏的按钮。

您完整的Sidebar.html文件现在应如下所示：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <p>This is my new Sidebar.</p>
    <input type="button" value="Close" onclick="google.script.host.close()" />
  </body>
</html>

上面的代码设置了侧边栏的基本结构。

第5步：单击保存您的项目Save工具栏中的图标。然后，通过单击运行脚本Run图标。

当您第一次运行该脚本时，Google Sheets 会提示您授权该脚本。

第6步：运行脚本后，将出现一个对话框，要求您选择您的 Google 帐户。选择您的帐户以继续。

可能会出现一条警告消息，指出该应用程序未经验证。点击Advanced，然后选择Go to Untitled project (unsafe)或您的项目名称。

在下一个窗口中，单击Allow授予脚本运行所需的权限。

第7步：授权后，返回您的 Google 表格并刷新页面。您现在将看到一个名为的新菜单项My New Menu在菜单栏中。单击它并选择My sidebar 1显示您的自定义侧边栏。

您的自定义侧边栏现在将显示在 Google 表格窗口的右侧，显示文本和Close您添加的按钮。单击该按钮将关闭侧边栏。

通过执行这些步骤，您已成功使用 Apps 脚本向 Google 表格添加了自定义侧边栏，从而通过附加功能增强了您的电子表格。

相关文章