Google Apps Scripts - HTML Service - "wait" for client-side form submission

Question

I am creating a container-bound Google Apps Scripts that is bound to a Google Spreadsheet. In my GS code I am using Google HTML Service to display a dialogue box in Google Sheets (i.e. an HTML form).

The issue I am running into is that when I render the HTML form client-side, the GS server-side code continues to run. Instead, I would like to "pause" the server side code and have it wait until the user submits the form.

Is that possible to do?

Here's what I have so far:

Code.gs

function onOpen(e) {
  var ui = SpreadsheetApp.getUi();
  ui.createMenu('Custom')
      .addItem('Generate Shipping Email', 'menuItem1')
      .addToUi();
}

function menuItem1() {
  var html = HtmlService.createHtmlOutputFromFile('index');
  var ui = SpreadsheetApp.getUi()
  ui.showModalDialog(html, 'Shipping Email Options'); // This line shows the modal in index.html

  // Here is where I would like to "pause" until the HTML form is submitted by user clicking the button with id="button1id" ...

  Logger.log("Line after showModalDialog"); // ... however, currently this code runs before the user clicks submit or cancel button in the html form
  // Rest of code which should not run until user clicks submit or cancel button will go here
}

readyToSendEmail(shippingNeeded, notes) {
  // Some non-relevant code goes here
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <form class="form-horizontal">
    <fieldset>

    <!-- Form Name -->


    <!-- Multiple Radios (inline) -->
    <div class="form-group">
    <label class="col-md-4 control-label" for="radios">Do you need expedited shipping?</label>
    <div class="col-md-4"> 
    <label class="radio-inline" for="radios-0">
    <input type="radio" name="radios" id="shippingNeededYes" value="Yes" checked="checked">
    Yes
    </label> 
    <label class="radio-inline" for="radios-1">
    <input type="radio" name="radios" id="shippingNeededNo" value="No">
    No
    </label>
    </div>
    </div>

    <!-- Textarea -->
    <div class="form-group">
    <label class="col-md-4 control-label" for="textarea">Additional shipping notes:</label>
    <div class="col-md-4">                     
    <textarea class="form-control" id="textarea" name="textarea"></textarea>
    </div>
    </div>

    <!-- Button (Double) -->
    <div class="form-group">
    <label class="col-md-4 control-label" for="button1id">Ready to send?</label>
    <div class="col-md-8">
    <button id="button1id" name="button1id" class="btn btn-primary" onclick="clickedSubmit()">Yes, send the email</button>
    <button id="button2id" name="button2id" class="btn btn-default" onclick="google.script.host.close()">Cancel, do not send an email</button>
    </div>
    </div>

    </fieldset>
    </form>

  <script>
  function clickedSubmit() {
    if(document.getElementById('shippingNeededYes').checked) {
      var shippingNeeded = "Yes";
    } else {
      var shippingNeeded = "No";
    }
    var notes = document.getElementById('textarea');
    google.script.run.readyToSendEmail(shippingNeeded, notes);
  }
  </script>  

  </body>
</html>

Any ideas, thoughts or suggestions are appreciated!

menuItem1 function will always run when someone clicks on Generate Shipping Email menu...if you want a section of code to run after user submit move that block to readyToSendEmail function — Ritesh Nair
– Ritesh Nair, Commented Aug 16, 2017 at 10:01
@Ritz Actually that is fine. To clarify, what I am trying to do is get it so that the line Logger.log("Line after showModalDialog"); doesn't run until after the form in index.html is submitted by having the user click either the form button with id="button1d" — Adam
– Adam, Commented Aug 16, 2017 at 12:50
The line Logger.log("Line after showModalDialog");will run as soon as user selects the menu Generate Shipping Email — Ritesh Nair
– Ritesh Nair, Commented Aug 16, 2017 at 12:54
@Ritz correct, that is the issue I am trying to solve :) I have updated my question a little bit to try to clarify what I am trying to do. I see what you mean in your first comment about moving the code to run after user submit to readyToSendEmail function but I was wanting to know if there were any other functions in javascript that would allow me to check for client side response in HTML before continuing server side code in GS. — Adam
– Adam, Commented Aug 16, 2017 at 17:15

Ritesh Nair · Accepted Answer · 2017-08-16 18:57:02Z

I guess you are bit confused how the js function works in app script.

//This function will run when the spreadsheet is loaded
       function onOpen(e) {
          var ui = SpreadsheetApp.getUi();
          ui.createMenu('Custom')
              .addItem('Generate Shipping Email', 'menuItem1')
              .addToUi();
        }

    //This entire function will run when you click on the menu item in the spreadsheet.
        function menuItem1() {
          var html = HtmlService.createHtmlOutputFromFile('index');
          var ui = SpreadsheetApp.getUi()
          ui.showModalDialog(html, 'Shipping Email Options'); 
        }


    //This is where you need to write the logic...this function will be called when you click on the button
       function readyToSendEmail(shippingNeeded, notes) {

        }

Also, its better to add type="button" to both the button or else it can consider it as submit buttons.

Collectives™ on Stack Overflow

Google Apps Scripts - HTML Service - "wait" for client-side form submission

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related