In this post, I demonstrate how to display a Google Sheet Table in a Web App using Google Apps Script.
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
- Templated HTML Documentation
- Sample Web App From Video
Code in Video:
function doGet(e) {
var htmlOutput = HtmlService.createTemplateFromFile('DisplaySheet');
return htmlOutput.evaluate();
}
function getSheetData() {
var ss= SpreadsheetApp.getActiveSpreadsheet();
var dataSheet = ss.getSheetByName('Data');
var dataRange = dataSheet.getDataRange();
var dataValues = dataRange.getValues();
return dataValues;
}<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>Display Google Sheet Web App</h1>
<table border="1" cellpadding="5px" >
<?var tableData = getSheetData();?>
<?for(var i = 0; i < tableData.length; i++) { ?>
<?if(i == 0) { ?>
<tr>
<?for(var j = 0; j < tableData[i].length; j++) { ?>
<th><?= tableData[i][j] ?></th>
<? } ?>
</tr>
<? } else { ?>
<tr>
<?for(var j = 0; j < tableData[i].length; j++) { ?>
<td><?= tableData[i][j] ?></td>
<? } ?>
</tr>
<? } ?>
<? } ?>
</table>
</body>
</html>Related Posts
How to Create Web App Report from Google Sheets - In this post, I demonstrate how to take a Web App and display an HTML report with input filters using Google Sheets. Also included in this video is the use of the QUERY formula for Google Sheets.
Convert Google Sheet into JSON Web App - In this post, I demonstrate how to convert a Google Sheet into a JSON Web App. The JSON Web App can be used as a web service to bring data into a website.
How to Sort Google Sheet on Google Web App - In this post, I demonstrate how to Sort a Google Sheet on a Google Web Application. It is set up for each Column to be Sorted in Ascending Order.
How to Filter Google Sheet in Google Web App - In this post, I demonstrate how to Filter a Google Sheet in a Google Web Application using HTML and Google Apps Script.
