0

Google スプレッドシートのサイドバーに読み込まれる google apps-script アドオンがあります。

ユーザーがシートを切り替えたり、ボタンをクリックしてアプリスクリプトアドオンをリロードするにはどうすればよいですか?

4

1 に答える 1

2

アドオンをリロードする最も簡単な方法は、アドオンのメニューから再度開始/起動することです。これにより、サイドバーが再ロードされます。または、サイドバーに google.script.run.showSidebar() (またはサイドバーを表示するためのサーバー側関数が呼び出されるもの) を実行するボタンを追加できます。

アドオンは単純なトリガー (onInstall()、onOpen()、および onEdit()) にしかアクセスできず、(まだ) ユーザーがアドオンの外で何をしているかを知ることができないため、独自の JavaScript 関数を作成する必要があります。サイドバーの html ページで、アドオンのユーザー インターフェイスをデフォルトの状態にリセットします (「リロード」の意味はこれだと思います)。つまり、すべてのフォーム フィールドをデフォルト値にリセットし、挿入されたヘルプ/ステータス テキストを削除します。など

ボタンのクリック時にこの関数を実行するのはそれほど難しくありません。ボタンの onclick イベントから関数をトリガーするだけです。もう少し作業をすれば、同じことを行うアドオンのメニューに「リセット」メニュー項目を追加することもできます。

ユーザーがシートを切り替えたときにそのような機能を「自動的に」実行することも可能ですが、スプレッドシートの変更をポーリングする必要があります。基本的に、特定の間隔で実行されるアドオンのサイドバー ページに JavaScript 関数を記述し、現在アクティブなシートが以前と同じかどうかを確認するサーバー側関数を呼び出すことができます (たとえば、userProperties に保存できます)。シートが異なる場合は、アドオンの UI をリセットする js 関数を呼び出して、現在アクティブなシートの名前で userProperty を更新します。ユーザーがシートを切り替えてから、アドオンがリセット コードを実行して UI をリロードするまでに少し時間がかかることに注意してください。それが問題になる場合は、ボタン クリックから UI をリロードすることをお勧めします。

以下に、何ができるかを理解するためのサンプル コードを示します。ここで作業用スプレッドシートを表示できます

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

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>

お役に立てれば！

于 2014-09-26T02:04:51.430 に答える