Refresh the deployed HTML web page using Google Apps Script

Question

I have created a small website using HTML service of Google apps script. Here is GAS Code

function doGet() {
   var t = HtmlService.createTemplateFromFile('form');
  t.email=Session.getActiveUser().getEmail();
   return t.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

and this is HTML Code

<!DOCTYPE html>
<html>
   <head>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
     <base target="_top">  
   </head>
   
    <body onLoad="addEventListeners()">
    <div class="container-fluid">
   <form id="form1"> 
     <label for="comp_indiv_name" id="company_individual_name" style="display: block" >2. COMPANY NAME</label>
      <input type="text" class="form-control" name="cName" required>
  <br>
   <input type="submit" class="btn btn-primary" value="Create Contract Now">
   </form>
   </div>
   
  
    
<script>
function addEventListeners() {
var condition=true;

document.getElementById('form1').addEventListener('submit', function(e){
e.preventDefault();
if(condition==true){condition=false;google.script.run.addData(this);}});

}
</script>
</body>

</html>

HTML page has one form with just one question, and when that form is submitted, the value get written in spreadsheet. Code for that is

function addData(form)
{
  var ss=SpreadsheetApp.getActiveSpreadsheet();
  var sheet=ss.getSheetByName('test');
  sheet.getRange(5,5).setValue(form.cName)
  htmlPage();
}

All i want is once the value gets written on the sheet, this HTML page gets refreshed automatically. Right now it just stays as it is. Link to the HTML page is https://script.google.com/macros/s/AKfycbzavm6TPFOkIXj_V0uD8XIqMN-9w6jAgp_QgRkJXawFJF59rPU/exec

Simply return something from your addData() function- for example the new HTML content of the page and use it in an "onSuccess" client JavaScript function to update the page. — Serge insas
I just tested your app, still a lot of work to do on it, use client JavaScript to modify the page once the question had been answered, disabling the button would be a good idea too! This is typically what onSuccess() handler is made for. I cannot give you the link here but it's easy to find in Google'd documentation (I'm on cellphone right now) — Serge insas
Thank you Serges. I have disabled the button if(condition==true){condition=false;google.script.run.addData(this);} I called the a function that returns the same page (clone of doGet() function), but no luc) — shahbaz haidar
Search for the doc about success handler and read the examples. This has to happen in the HTML script part. — Serge insas

Alan Wells Alan Wells · Accepted Answer · 2018-05-19T16:57:49

If you truly want to refresh the page, and not just clear the input field, then I would add a hidden link that has your web app URL, and then programatically "click" it when the server code has completed.

HTML

</form>

   <a id="linkToThisWebApp" href="https://script.google.com/macros/s/webAppID/exec" style="display:none">Hidden</a>
   <!-- <button onclick="reloadPg()">Test</button> -->
   </div>

Script tag - Code with success handler

<script>
function addEventListeners() {
var condition=true;

document.getElementById('form1')
  .addEventListener('submit',
  function(e){
    e.preventDefault();

    if(condition==true){
      condition=false;
      google.script.run
        .withSuccessHander(reloadPg)
        .addData(this);
    }


  });

}

window.reloadPg = function() {//Runs when server code has completed
  console.log('reloadPg ran');
  document.getElementById('linkToThisWebApp').click();//Click the link
}
</script>

Refresh the deployed HTML web page using Google Apps Script

1 Answers

HTML

Script tag - Code with success handler