修复Google Sheets侧边栏下拉菜单获取用户名并存储变量的问题

原代码存在多个关键问题导致无法正常运行，以下是问题分析及修复后的完整代码：

核心问题梳理 #

• 服务器端函数selectUserName定义在onOpen内部，客户端无法通过google.script.run调用
• 模板变量设置时机错误：在evaluate()之后设置userNames，模板无法读取到变量
• 错误操作Spreadsheet对象而非Sheet对象：hideSheet()是Sheet对象的方法，原代码使用Spreadsheet对象会触发报错
• 关闭侧边栏的方式错误：服务器端无法通过ui.showSidebar(false)关闭侧边栏，需在客户端处理
• 元标签添加时机错误：addMetaTag在evaluate()之后调用无效

修复后的Code.gs代码 #

// 全局存储用户名列表，方便后续扩展
var userNames = ['User 1', 'User 2', 'User 3'];

function onOpen() {
  var ui = SpreadsheetApp.getUi();
  // 添加自定义菜单，用户可手动触发侧边栏（也可保留自动打开逻辑）
  ui.createMenu('用户操作')
    .addItem('选择用户名', 'showUserSidebar')
    .addToUi();
  
  // 若需打开表格时自动显示侧边栏，取消下方注释
  // showUserSidebar();
}

function showUserSidebar() {
  var activeSheet = SpreadsheetApp.getActiveSheet();
  activeSheet.hideSheet();
  
  // 先设置模板变量，再生成HTML输出
  var template = HtmlService.createTemplateFromFile('Page');
  template.userNames = userNames;
  
  var htmlOutput = template.evaluate()
    .setTitle('选择用户')
    .addMetaTag('viewport', 'width=device-width, initial-scale=1');
  
  SpreadsheetApp.getUi().showSidebar(htmlOutput);
}

// 全局服务器端函数，供客户端调用
function selectUserName(userName) {
  var activeSheet = SpreadsheetApp.getActiveSheet();
  var ui = SpreadsheetApp.getUi();
  
  if (userNames.indexOf(userName) >= 0) {
    activeSheet.showSheet();
    // 这里可扩展日志记录逻辑，比如记录用户名、操作时间
    Logger.log('用户「%s」于 %s 开始操作', userName, new Date());
    return true;
  } else {
    ui.alert('无效用户名，请选择以下之一：' + userNames.join(', '));
    activeSheet.hideSheet();
    return false;
  }
}

修复后的Page.html代码 #

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 若需自定义样式，创建Stylesheet.html文件并取消下方注释 -->
    <!-- <?!= include('Stylesheet'); ?> -->
    <style>
      /* 基础样式优化，可按需修改 */
      .container {
        padding: 15px;
        font-family: Arial, sans-serif;
      }
      select, button {
        margin-top: 10px;
        padding: 8px;
        width: 100%;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h2>选择用户</h2>
      <form>
        <label for="username">用户名:</label>
        <select id="username">
          <? for (var i = 0; i < userNames.length; i++) { ?>
            <option value="<?= userNames[i] ?>"><?= userNames[i] ?></option>
          <? } ?>
        </select>
        <br>
        <button type="button" onclick="submitUser()">提交</button>
      </form>
    </div>

    <script>
      function submitUser() {
        var userName = document.getElementById('username').value;
        google.script.run
          .withSuccessHandler(function(isValid) {
            if (isValid) {
              google.script.host.close(); // 验证成功后关闭侧边栏
            }
          })
          .selectUserName(userName);
      }
    </script>
  </body>
</html>

修复要点说明 #

1. 将selectUserName改为全局函数，确保客户端能正常调用
2. 拆分逻辑为onOpen（创建菜单）和showUserSidebar（显示侧边栏），结构更清晰
3. 先设置模板变量再调用evaluate()，确保模板能正确读取用户名列表
4. 使用getActiveSheet()操作当前工作表，避免Spreadsheet对象的方法调用错误
5. 在客户端通过google.script.host.close()关闭侧边栏，配合成功回调确保操作有效性
6. 添加基础样式优化界面，同时保留自定义样式的扩展入口

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