In this post, I demonstrate how to call Google Apps Script Functions from Web App. I also show how to pass parameters in and out of functions.
How to Video:
Video Notes:
- Legacy Apps Script Editor Used in Video
- Apps Script (Script Editor) is now located under tab ‘Extensions’ instead of ‘Tools’ on Google Sheets
- For Further Details on Deploying a Web App Click Here
Code in Video:
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('WebApp');
}
function getOneCellData() {
var ss= SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName("Sheet1");
var data = sheet.getRange('A1').getValue();
return data;
}
function getMultiCellData() {
var ss= SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName("Sheet1");
var data = sheet.getRange('A1:C1').getValues();
return data;
}
function getInOutData(inData) {
var outData = "IN DATA: " + inData;
return outData;
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function callOneCellData()
{
google.script.run.withSuccessHandler(function(returnData)
{
document.getElementById("oneCellData").innerHTML = returnData;
}).getOneCellData();
}
function callMultiCellData()
{
google.script.run.withSuccessHandler(function(returnArray)
{
console.log(returnArray);
var stringArray = returnArray.toString();
document.getElementById("multiData").innerHTML = stringArray;
}).getMultiCellData();
}
function callInOutData()
{
var inData = document.getElementById("inData").value
google.script.run.withSuccessHandler(function(outData)
{
document.getElementById("outData").innerHTML = outData;
}).getInOutData(inData);
}
function callData()
{
callOneCellData();
callMultiCellData();
callInOutData();
}
</script>
</head>
<body>
<label>One Cell Data</label><br><textarea id="oneCellData" ></textarea><br>
<label>Multi Data</label><br><textarea id="multiData" ></textarea><br>
<label>In Data</label><br><input type="text" id="inData" /><br>
<label>Out Data</label><br><textarea id="outData" ></textarea><br>
<input type="button" onclick="callData()" value="Get Data" />
</body>
</html>
Related Posts
![Create Custom HTML Form Google Sheets](https://codewithcurt.com/wp-content/uploads/2022/02/Create-Custom-Web-App-GS-WS-150x150.png)
![Link Web App Pages](https://codewithcurt.com/wp-content/uploads/2022/01/Link-Web-App-Pages-WS-150x150.png)
![Create Web App Form on Google Sheets](https://codewithcurt.com/wp-content/uploads/2021/12/Create-Web-App-Form-on-GS-WS-150x150.png)
![Multi Select Web App Google Sheets](https://codewithcurt.com/wp-content/uploads/2021/11/Multi-Select-Web-App-GS-WS-150x150.png)
![File Loader Google Web App](https://codewithcurt.com/wp-content/uploads/2021/02/File-Loader-Web-App-WS-150x150.png)
![Dependent Drop Down Web App WS](https://codewithcurt.com/wp-content/uploads/2021/01/Dependent-Drop-Down-Web-App-WS-150x150.png)