Google表格自定义侧边栏：点击指定工作表链接实现当前窗口切换

我已经实现了一个可显示指定工作表标签链接的自定义侧边栏，但点击链接时会打开Google表格的新实例展示目标工作表。现在希望脚本能直接在当前表格实例中切换到对应的工作表标签，而非打开新窗口。

当前代码 #

Code.gs #

function onOpen() {
 SpreadsheetApp
   .getUi()
   .createMenu("Sidebar")
   .addItem("Show Sidebar", "Display.sidebar")
   .addToUi();
}

const Display ={
  html(){
    return HtmlService.createHtmlOutputFromFile('Home')
  },
  sidebar(){
    return SpreadsheetApp.getUi().showSidebar(this.html());    
  }
};

Home.html #

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
  </head>
  <body>
    <div style="padding:5px;">
    <ul>
      <li><a href="https://website.com" target="_blank">Website</a></li>
      <li><a href="https://docs.google.com/spreadsheets/d/*****/edit?gid=941347032#gid=941347032" target="_blank">Haulier List</a></li>
      <li><a href="https://docs.google.com/spreadsheets/d/*****/edit?gid=1977595707#gid=1977595707" target="_blank">Purchase Invoices</a></li>
      <li><a href="https://docs.google.com/spreadsheets/d/*****/edit?gid=969162599#gid=969162599" target="_blank">Sales Invoices</a></li>
      <li><a href="https://docs.google.com/spreadsheets/d/*****/edit?gid=344378613#gid=344378613" target="_blank">Create Sales Invoice</a></li>
      <li><a href="https://docs.google.com/spreadsheets/d/*****/edit?gid=838733436#gid=838733436" target="_blank">Customer Warehouse Stock</a></li>
    </ul>
    </div>
  </body>
</html>

我参考过可显示全部工作表的侧边栏方案，但需求是仅展示指定的工作表，同时实现点击后在当前实例切换工作表。

修改方案 #

1. 更新Code.gs #

添加切换工作表的函数，同时通过模板传入指定工作表列表，方便后续调整：

function onOpen() {
 SpreadsheetApp
   .getUi()
   .createMenu("Sidebar")
   .addItem("Show Sidebar", "Display.sidebar")
   .addToUi();
}

// 切换到指定工作表的核心函数
function switchToSheet(sheetName) {
  const activeSS = SpreadsheetApp.getActiveSpreadsheet();
  const targetSheet = activeSS.getSheetByName(sheetName);
  if (targetSheet) {
    activeSS.setActiveSheet(targetSheet);
  } else {
    SpreadsheetApp.getUi().alert(`工作表 "${sheetName}" 不存在`);
  }
}

const Display ={
  html(){
    // 定义需要展示的指定工作表列表，直接修改这里即可调整显示内容
    const targetSheets = [
      {name: "Haulier List"},
      {name: "Purchase Invoices"},
      {name: "Sales Invoices"},
      {name: "Create Sales Invoice"},
      {name: "Customer Warehouse Stock"}
    ];
    // 使用模板引擎将工作表数据传入HTML
    const template = HtmlService.createTemplateFromFile('Home');
    template.targetSheets = targetSheets;
    return template.evaluate();
  },
  sidebar(){
    return SpreadsheetApp.getUi().showSidebar(this.html());    
  }
};

2. 更新Home.html #

替换原链接为可触发切换的交互元素，保留外部链接功能：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
    <style>
      .sheet-item {
        cursor: pointer;
        color: #1a73e8;
        text-decoration: underline;
      }
      .sheet-item:hover {
        color: #0b479a;
      }
    </style>
  </head>
  <body>
    <div style="padding:5px;">
    <ul>
      <li><a href="https://website.com" target="_blank">Website</a></li>
      <!-- 渲染指定工作表列表 -->
      <? for (let sheet of targetSheets) { ?>
        <li><span class="sheet-item" onclick="triggerSwitch('<?= sheet.name ?>')"><?= sheet.name ?></span></li>
      <? } ?>
    </ul>
    </div>
    <script>
      // 调用后端切换函数
      function triggerSwitch(sheetName) {
        google.script.run.switchToSheet(sheetName);
      }
    </script>
  </body>
</html>

说明 #

• 后端通过getSheetByName定位目标工作表，调用setActiveSheet实现当前实例内的切换
• 前端使用模板渲染指定工作表，无需在HTML中硬编码，后续修改展示列表只需调整Code.gs中的targetSheets数组
• 保留原外部链接的功能，不影响原有使用逻辑

内容的提问来源于stack exchange，提问作者melrin