Using Google Apps Script, can we display a data in the HTML page as soon as somebody enters that data into Google spreadsheet?
Question
Using Google Apps Script, how to display a data in the HTML page (without refreshing the page) as soon as somebody enters that data into the Google spreadsheet?
I have written the following codes, which renders all the data present in the spreadsheet. But I am not able to add the feature of rendering the data dynamically without the need of refreshing the page.
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>Hello world</h1>
<? for(var i=0; i<list.length; i++){ ?>
<h3><?= list[i] ?></h3>
<? } ?>
</body>
</html>
code.gs
var ss = SpreadsheetApp.getActiveSpreadsheet();
function doGet() {
var ws = ss.getSheetByName('list');
var lastRow = ws.getLastRow();
var numRow = lastRow - 1;
var vals = ws.getRange(2,1,numRow,2).getValues();
var temp = HtmlService.createTemplateFromFile('index');
temp.list = vals;
return temp.evaluate();
}
spreadsheet
1 answers
solution1
2 ACCPTED 2021-01-21 01:26:03
I believe your goal as follows.
- You want to refresh
<h3><?= list[i]?></h3>when the Spreadsheet is edited. - You want to achieve this without reloading the Web Apps page.
Issue and workaround:
In the current stage, unfortunately, HTML side cannot be directly updated from Google Apps Script side without reloading the Web Apps page. So in this case, it is required to refresh the HTML in the page from Javascript side.
In this answer, as a workaround, I would like to refresh the tags of H3 using setInterval . When this workaround is reflected to your script, it becomes as follows.
Modified script:
Please modify your Google Apps Script and HTML&Javascript as follows. When the following modified script is used for the Web Apps, when the Web Apps page is opened with the browser, the values of 'H3` are automatically refreshed every 5 seconds.
Google Apps Script side ( Code.gs ):
The function is splitted with 2 functions as follows.
function doGet() {
var temp = HtmlService.createTemplateFromFile('index');
temp.list = getValues();
return temp.evaluate();
}
function getValues() {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var ws = ss.getSheetByName('list');
var lastRow = ws.getLastRow();
var numRow = lastRow - 1;
return ws.getRange(2,1,numRow,2).getValues();
}
HTML&Javascript side ( index.html ):
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>Hello world</h1>
<div id="sample">
<? for(var i=0; i<list.length; i++){ ?>
<h3><?= list[i] ?></h3>
<? } ?>
</div>
</body>
<script>
function main() {
google.script.run.withSuccessHandler(v => {
const div = document.getElementById('sample');
const value = [...div.children].map(e => e.innerHTML);
if (value.length != v.length || value.some((e, i) => e != v[i].join(","))) {
while(div.firstChild) div.removeChild(div.firstChild);
v.forEach(e => {
const h3 = document.createElement("h3");
h3.innerHTML = e.join(",");
div.appendChild(h3);
});
}
}).getValues();
}
setInterval(main, 5000); // In this sample, the tags of H3 are refreshed every 5 seconds.
</script>
</html>
- In this modified script, the tags of
H3are refreshed using Javascript.mainfunction is run every 5 seconds. When the existing values ofH3are different from the values of current Spreadsheet, the values ofH3are updated. When the existing values ofH3are the same with the values of current Spreadsheet, the values ofH3are not updated.
Note:
- When you modified the script of Web Apps, please redeploy the Web Apps as new version. By this, the latest script is reflected to the Web Apps. Please be careful this.
- I think that there are several methods for retrieving the values from Spreadsheet. In this answer,
google.script.runis used, because you are using the template HTML. I think that you can also retrieve the values from Spreadsheet usingfetchof Javascript.
Reference:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.