如何在我的谷歌电子表格插件中创建范围选择器答案

【问题标题】：How do I create the range picker in my google spreadsheet add-ons如何在我的谷歌电子表格插件中创建范围选择器
【发布时间】：2017-07-06 08:37:43
【问题描述】：

我想创建我的电子表格插件。如何实现如图所示的范围选择器：

我知道应用脚本可以使用这个：

SpreadsheetApp.getActiveSpreadsheet().getActiveRange().getA1Notation();

但我不知道如何将结果发送到附加 html 输入文本。

【问题讨论】：

标签： google-sheets spreadsheet add-on

【解决方案1】：

来自Medium post（作者 Piyush Goel）的代码似乎可以解决问题。范围应由用户在单击按钮之前选择。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
  </head>
  <body>
    <div class="sidebar branding-below">
      <div class="block form-group">
        <label for="names-range"><b>Comissions</b></label>
        <input id="names-range" type="text" placeholder="Specify Range.." value=""/>
        <button class="blue" id="names-range_button" onClick="getSelectedRange(this);">Get Selected Range</button>
      </div>
      <div class="block form-group">
        <label for="ages-range"><b>Easyship Handling Fees</b></label>
        <input id="ages-range" type="text" placeholder="Specify Range.." value=""/>
        <button class="blue" id="ages-range_button" onClick="getSelectedRange(this);">Get Selected Range</button>
      </div>
    </div>  
    
    <div class="sidebar bottom">
      <span class="gray">
        Code sample by Piyush Goel</span>
    </div>
  
    <script>
      function getSelectedRange(button){
        button.innerHTML = "Picking.."; // Change the button value while getting range
        button.disabled = true;         // Disable the button while getting range
        google.script.run                       // Executes a Apps Script JS Function
          .withSuccessHandler(updateTextField)  // function to be called upon successfull completion of Apps Script function
          .withUserObject(button)               // To pass the event element object
          .getSelectedRange();                  // Apps Sript JS Function
        return;
      }
      
      // Function to be called on success
      function updateTextField(range, button){
        var textFieldId = button.id.split("_").shift();
        document.getElementById(textFieldId).value = range; // Update the text field value
        button.innerHTML = "Get Selected Range"; // Reset the button value
        button.disabled = false;
      }
    </script>
  </body>
</html>

// Add the options to the custom menu
function onOpen() {
  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .createMenu('Custom Menu')
      .addItem('Show Settings', 'showSidebar')
      .addToUi();
}

// initiates the sidebar
function showSidebar() {
  var html = HtmlService.createHtmlOutputFromFile('settings')
      .setTitle('Settings Sidebar')
      .setWidth(300);
  SpreadsheetApp.getUi().showSidebar(html);
}

/** Function to pick the selected range from the Google Sheet
  * This returns the picked range, so that the client-side JS 
  * function (in HTML file) can populate it in the text field **/
function getSelectedRange(){
  var selected = SpreadsheetApp.getActiveSheet().getActiveRange(); // Gets the selected range
  var rangeString = selected.getA1Notation(); // converts it to the A1 type notation
  return rangeString;
}

【讨论】：