0

我有一个谷歌应用程序脚本插件，它加载在谷歌电子表格的侧栏中。

如何重新加载用户切换工作表或单击按钮的应用程序脚本插件？

4

1 回答 1

2

重新加载插件的最简单方法是从插件的菜单中再次启动/启动它 - 这将重新加载侧边栏。或者，您可以向运行 google.script.run.showSidebar() 的侧边栏添加一个按钮（或调用任何用于显示侧边栏的服务器端函数）。

由于附加组件只能访问简单的触发器（onInstall()、onOpen() 和 onEdit()）并且不能（还）知道用户在附加组件之外做了什么，所以您必须编写自己的 javascript 函数在侧边栏的 html 页面中将插件的用户界面重新设置为默认状态（我假设这就是您所说的“重新加载”），即将所有表单字段重置为默认值，删除任何注入的帮助/状态文本等等等等。

要在按钮单击时执行此功能并不难 - 只需从按钮的 onclick 事件触发该功能。通过更多的工作，您甚至可以在附加组件的菜单中添加一个“重置”菜单项，它可以做同样的事情。

在用户切换工作表时使此类功能“自动”运行也是可能的，但需要轮询电子表格更改。基本上，您可以在插件的侧边栏页面中编写一个以特定时间间隔运行的 javascript 函数，并调用一个服务器端函数来检查当前活动的工作表是否与以前相同（例如，您可以将其存储在 userProperties 中）。如果工作表不同，请调用您的 js 函数来重置插件的 ui + 使用当前活动工作表的名称更新 userProperty。请记住，在用户切换工作表和您的加载项运行其重置代码并重新加载其 ui 之间会有一点延迟 - 如果这是一个问题，那么从按钮单击重新加载 ui 是一个更好的选择。

这是一些示例代码，可让您了解可以做什么。您可以在此处查看工作电子表格

代码.gs

function onOpen(e) {
  // Add this add-on to Add-ons menu
  SpreadsheetApp.getUi().createAddonMenu()
      .addItem('Start / Reset', 'showSidebar')
      .addToUi();

  // save current active sheet name in user properties for later checking if user switched sheets
  saveSheetNameToProperty();
};

function onInstall(e) {
  onOpen(e);
};

function showSidebar() {
  var ui = HtmlService.createHtmlOutputFromFile('Sidebar').setTitle('Add-on Reset Test');
  SpreadsheetApp.getUi().showSidebar(ui);
};

/**
 * Saves current active sheet name to user property lastActiveSheet
 * @param String sheetname Name of sheet to save to user property. If undefined (not passed), saves current active sheet name.
 */
function saveSheetNameToProperty(sheetname) {
  var sheetName = sheetname || SpreadsheetApp.getActiveSheet().getName();
  PropertiesService.getUserProperties().setProperty("lastActiveSheet", sheetName)
};

/**
 * Checks if user has switched sheets by comparing current active sheet name to name stored in user property
 * @return Boolean True/False flag denoting if sheet was switched. True=sheet was switched; False=still on same sheet
 */
function checkSheetChanged() {
  var sheetChanged = false;
  var sheetName = SpreadsheetApp.getActiveSheet().getName();
  var lastActiveSheet = PropertiesService.getUserProperties().getProperty("lastActiveSheet");
  if (sheetName!=lastActiveSheet) {
    sheetChanged = true;
    saveSheetNameToProperty(sheetName);
    // if you'd rather just reload the whole sidebar, then un-comment the line below and delete the return statement
    // showSidebar();
  }
  return sheetChanged;
};

边栏.html

<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<!-- The CSS package above applies Google styling to buttons and other elements. -->

<div class="sidebar branding-below">
  <form id="addonForm">
    <div class="block">
      <label for="selectBox">Select a value:</label>
      <select name="selectBox" id="selectBox">
        <option value="" selected>Select a value...</option>
        <option value="Value 1">Value 1</option>
        <option value="Value 2">Value 2</option>
        <option value="Value 3">Value 3</option>
      </select>
    </div>
    <div class="block">
      <label for="textBox">Enter some text:</label>
      <input type="text" name="textBox" id="textBox" placeholder="Enter some text...">
    </div>
    <div class="block" id="button-bar">
      <button type="button" class="blue" id="simpleResetBtn" onclick="resetForm(true);" title="I reset the sidebar's form controls to their default state">Reset form</button>
      <button type="button" class="red" id="reloadAddonBtn" onclick="google.script.run.showSidebar();" title="I completely reload the sidebar - fresh start!">Reload add-on</button>
    </div>
  </form>
  <div class="block" id="statusText" style="color:#666; margin-top:10px;"></div>
</div>

<div class="sidebar bottom">
  <span class="gray branding-text">Reset Add-on Sample by Azadi</span>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
/**
 * On document load, set up interval-based execution of checkSheetChanged() function to check if user has switched sheets
 */
$(function() {
  // run checkSheetChanged() function every 5000 miliseconds
  var sheetChecker = window.setInterval(checkSheetChanged, 5000);
});

/**
 * Resets the form in the add-on's sidebar and shows status text.
 * @param Boolean fromButtonClick Boolean flag denoting if form reset was triggered from button click or via timed script execution
 */
function resetForm(fromButtonClick) {
  var buttonClick = fromButtonClick || false;
  var form = $("#addonForm")[0];
  var statusDiv = $("#statusText");
  form.reset();
  if (buttonClick) {
    statusDiv.text("Addon UI has been reset from [Reset form] button click");
  }
  else {
    statusDiv.text("Addon UI has been reset automatically via timed script following sheet switch");
  }
};

/**
 * Runs the checkSheetChanged() server-side function (in Code.gs) to check if user has switched sheets
 * and executes checkSheetChangedCallback() function on success
 */
function checkSheetChanged() {
  google.script.run.withSuccessHandler(checkSheetChangedCallback).checkSheetChanged();
};

/**
 * Callback for checkSheetChanged() function.
 * Resets the form in the sidebar if user has switched sheets.
 * @param Boolean isDifferentSheet Boolean flag returned from server-side script. True=sheet was switched. False=user is still on same sheet.
 */
function checkSheetChangedCallback(isDifferentSheet) {
  if (isDifferentSheet) {
    resetForm();
  }
};
</script>

希望这可以帮助！

于 2014-09-26T02:04:51.430 回答