Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Sidebar HTML code to show fields and buttons to select the range
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment