无法从App Script向侧边栏HTML传递动态列表及侧边栏关闭问题

一、解决下拉列表为空的问题 #

独立HTML文件无法直接读取Google Apps Script中的变量，必须通过google.script.run实现客户端与服务端的异步通信来获取数据，步骤如下：

1. 服务端（Code.gs）编写数据获取函数 #

这个函数负责从Sheet中提取下拉选项并返回：

function getDropdownOptions() {
  // 替换成你的目标工作表名称
  const targetSheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("OptionsSheet");
  // 假设选项存储在A列，从第2行开始（跳过表头）
  const dataRange = targetSheet.getRange("A2:A" + targetSheet.getLastRow());
  // 扁平化二维数组并过滤空值，避免下拉出现空白选项
  return dataRange.getValues().flat().filter(opt => opt.trim() !== "");
}

2. 客户端（独立HTML文件）异步获取并渲染下拉框 #

在HTML中通过google.script.run.withSuccessHandler接收服务端返回的数据，动态生成下拉选项：

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <style>
    .sidebar-container { padding: 1.2rem; }
    .loading-spinner { 
      display: none;
      border: 3px solid #f0f0f0;
      border-top: 3px solid #2196F3;
      border-radius: 50%;
      width: 22px;
      height: 22px;
      animation: spin 1s linear infinite;
      margin: 0.8rem 0;
    }
    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
  </style>
</head>
<body>
  <div class="sidebar-container">
    <select id="targetDropdown"></select>
    <div class="loading-spinner" id="submitSpinner"></div>
    <button id="submitBtn">提交</button>
  </div>

  <script>
    // 页面加载完成后拉取下拉数据
    window.addEventListener('load', function() {
      google.script.run
        .withSuccessHandler(function(options) {
          const dropdown = document.getElementById('targetDropdown');
          options.forEach(optText => {
            const option = document.createElement('option');
            option.textContent = optText;
            option.value = optText;
            dropdown.appendChild(option);
          });
        })
        .withFailureHandler(err => console.error('加载选项失败:', err))
        .getDropdownOptions();
    });
  </script>
</body>
</html>

二、实现提交后关闭侧边栏/加载动效 #

1. 提交后关闭侧边栏 #

在客户端JS的提交按钮点击事件中，通过google.script.host.close()关闭侧边栏，注意要放在提交逻辑的成功回调中，避免提前关闭：

在HTML的script标签中添加以下代码：

document.getElementById('submitBtn').addEventListener('click', function() {
  const spinner = document.getElementById('submitSpinner');
  const selectedVal = document.getElementById('targetDropdown').value;

  // 显示加载动效
  spinner.style.display = 'block';

  // 调用服务端提交函数，完成后关闭侧边栏
  google.script.run
    .withSuccessHandler(function() {
      spinner.style.display = 'none';
      google.script.host.close(); // 关闭侧边栏
    })
    .withFailureHandler(err => {
      spinner.style.display = 'none';
      console.error('提交失败:', err);
      // 可添加用户错误提示，比如alert('提交失败，请重试')
    })
    .processSubmission(selectedVal); // 对应服务端的提交处理函数
});

2. 服务端（Code.gs）提交处理函数 #

添加处理提交数据的函数：

function processSubmission(selectedValue) {
  // 这里写你的业务逻辑，比如将选中值写入Sheet
  const logSheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("SubmissionLog");
  logSheet.appendRow([new Date(), selectedValue]);
}

3. 加载动效备用方案 #

如果关闭侧边栏功能异常，加载动效已经在上述代码中实现：点击提交时显示旋转的spinner，提交完成（成功/失败）后隐藏。

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