从代码重新加载

Posted 2021-05-06

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

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

答案

重新加载广告的最简单方法是从加载项菜单再次启动/启动它 - 这将重新加载侧边栏。或者，您可以在侧边栏中添加一个按钮，该按钮运行google.script.run.showSidebar（）（或者用于显示侧边栏的服务器端功能）。

由于附加组件只能访问简单的触发器（onInstall（），onOpen（）和onEdit（）），并且无法（尚未）告诉用户在附加组件外做什么，因此您必须编写自己的javascript函数在侧边栏的html页面中将您的加载项的用户界面重新设置为默认状态（我假设这是“重新加载”的意思），即将所有表单字段重置为默认值，删除任何注入的帮助/状态文本等等

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

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

下面是一些示例代码，可以让您了解可以执行的操作。 You can view the working spreadsheet here

code.公司

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;
};

Sidebar.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>

希望这可以帮助！