CODEWITHSUNDEEP
google-apps-scriptweb-applicationspopupgoogle-forms
mdo8105
mdo8105

Reputation: 67

Close Htmlservice popup

I am wondering if is possible to close the htmlservice popup when the submit button is hit on the Google form:

function launchForm() {
  var form = FormApp.openById('15Qw9jmolybvMbx2d3UhddEWHrKe0zBiV5_asKXolsM0');
  var formUrl = form.getPublishedUrl(); 

//  var response = UrlFetchApp.fetch(formUrl);
//  var formHtml = response.getContentText();

  var htmlApp = HtmlService
      .createHtmlOutput('<h1>Your Organization</h1>')
      .append('<iframe src ="' + formUrl + '?embedded=true" width="1000" height="900" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>')
      .setTitle('Form')
      .setWidth(1000) 
      .setHeight(1000);

  SpreadsheetApp.getActiveSpreadsheet().show(htmlApp);
}

I'm hoping that when I hit the submit button on the form, the html app will close.

Upvotes: 0

Views: 872

Answers (1)

TheMaster
TheMaster

Reputation: 50689

Google forms load each page on form navigation or submit. You can listen to those events, count the number of page loads and close the pop up.

Sample:

code.gs:

function showGoogleForm() {
  var form = FormApp.openById(/*FORM EDIT ID*/);
  var formUrl = form.getPublishedUrl();
  var temp = HtmlService.createTemplateFromFile('googleForm');
  temp.pubUrl = formUrl;
  var htmlApp = temp
    .evaluate()
    .setTitle('Form')
    .setWidth(1000)
    .setHeight(1000);
  SpreadsheetApp.getActiveSpreadsheet().show(htmlApp);
}

googleForm.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="text/javascript">
      var i = 0;
      var totalSections = 1; //TODO Set Total number of pages in your form
      check = () => {
        if (++i > totalSections) {
          alert('Thank You for filling up the form');
          setTimeout(google.script.host.close, 7);
        }
      };
    </script>
  </head>
  <body>
    <h1>
      MASTER FORM
    </h1>
    <iframe
      onload="check()"
      referrerpolicy="no-referrer"
      sandbox="allow-scripts allow-forms"
      src="<?=pubUrl?>?embedded=true"
      width="700"
      height="520"
      frameborder="0"
      marginheight="0"
      marginwidth="0"
    ></iframe>
  </body>
</html>

Upvotes: 1

Related Questions