goelp/pick_range_sidebar.html

## pick_range_sidebar.html
<!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>
	<!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>