Apps Script dialog box - HTML Service - Apply "withSuccessHandler" Properly - google.script.run

1
votes

Background

I'm fairly new to coding in general and as I've gone through building this little UI for Google Sheets using GAS, this is one of the concepts that has just has me stumped. I've tried and tried reading, understand conceptually and apply withSuccessHandler(function) to all sorts of examples but I just can't seem to get it to work.

Here's what I understand so far:

  • When you run the following on the client side (e.g. Index.html):

google.script.run.withFailureHandler(CallbackFunction).ServerSideFunction(aVariable)

a. ServerSideFunction(aVariable): This function from your Code.gs is first called and returns a value, "OutputA," back to Index.html.

b. CallbackFunction: Then, this function is called and uses "OutputA" as its input and returns another value which you can use for whatever purpose.

Goal

  • Open Dialog Box asking for "Name" and "E-mail." DONE
  • Once user hits "Submit" the input is populated in the spreadsheet. DONE
  • The form is then cleared so they can potentially add another person or exit if they want.

Question

For that last piece, I can't seem to get withSuccessHandler to return a value back from my script, confirming that the inputs were entered properly, and I really don't know how to proceed.

I've included a working version of the code below without withSuccessHandler for reference. Any help at all in better understanding this and how I can incorporate it into the code below would be greatly appreciated!

Google Script

function onOpen(e) {
  SpreadsheetApp.getUi()
    .createMenu('Menu')
    .addItem('Add Member', 'createDialog')
    .addToUi();
}

function createDialog() {
  var htmlOutput = HtmlService
    .createHtmlOutputFromFile('Index')
    .setWidth(300)
    .setHeight(300);
  SpreadsheetApp.getUi().showModalDialog(htmlOutput, " ");
}

function addAName(bName, bEmail) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet();
  var ControlSheet = sheet.getSheetByName('Control Sheet');
  var lRow = ControlSheet.getRange(1, 1, ControlSheet.getLastRow(), 1).getValues().filter(String).length;
  var Name = ControlSheet.getRange(lRow + 1, 1);
  var Email = ControlSheet.getRange(lRow + 1, 2);

  var ValidName = /(^[A-Za-z]+)\s([A-Za-z]{1}[.]{1}\s)?([A-Za-z]+$)/g;
  var ValidEmail = /(^[A-Za-z]+)([.]{1})([A-Za-z]{1}[.]{1})?([A-Za-z]+)(@google.com|@yahoo.com)$/g;
  if (bName.match(ValidName) && bEmail.match(ValidEmail)) {
    Name.setValue(bName);
    Email.setValue(bEmail);

  }

}

HTML

<body>
  <h2>Add New Member</h2>
  <div class="mdc-layout-grid">

    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12">
      <div class="mdc-text-field mdc-text-field--upgraded" data-mdc-auto-init="MDCTextField">
        <input class="mdc-text-field__input" id="Name" type="text" aria-controls="name-validation-message" pattern="(^[A-Za-z]+)\s([A-Za-z]{1}[.]{1}\s)?([A-Za-z]+$)">
        <label for="Name" class="mdc-floating-label">Name</label>
        <div class="mdc-line-ripple"></div>
      </div>
      <p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg" id="name-validation-message" aria-hidden="true">
        Please enter your full name.
      </p>
    </div>
    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12">
      <div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
        <input class="mdc-text-field__input" id="Email" type="text" aria-controls="name-validation-message" pattern="(^[A-Za-z]+)([.]{1})([A-Za-z]{1}[.]{1})?([A-Za-z]+)(@google.com|@yahoo.com)$">
        <label for="Email" class="mdc-floating-label">Email Address</label>
        <div class="mdc-line-ripple"></div>
      </div>
      <p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg" id="name-validation-message" aria-hidden="true">
        Please enter a valid Google or Yahoo email address.
      </p>
    </div>

  </div>
  <div class="Right_Side">
    <button class="mdc-button mdc-button--unelevated secondary-filled-button" OnClick="google.script.host.close()">Cancel
    </button>
    <button class="mdc-button mdc-button--unelevated primary-filled-button" OnClick="sendInputToGS()">Submit
    </button>
  </div>

  <script>
    window.sendInputToGS = function() {
      var aName = document.getElementById("Name").value;
      var aEmail = document.getElementById("Email").value;
      google.script.run.addAName(aName, aEmail);
    }
  </script>

  <script type="text/javascript">
    window.mdc.autoInit();
  </script>

</body>
2
htmlgoogle-apps-scriptweb-applications

2 Answers

1
votes

Only one parameter can be added to the server function being called. But you can use an array as the one parameter and put multiple values into the array.

var data_Array = [aName, aEmail];
google.script.run
  .withSuccessHandler(myClientSideFunction)
  .addAName(data_Array);

A value is not automatically returned, you must add a return myValue statement.

function addAName(data) {
  var bName, bEmail;

  bName = data[0];//Arrays in JavaScript are zero indexed
  bEmail = data[1];


  //code

  return "something";
}

Client Code

<script>
  window.sendInputToGS = function() {
    var aName = document.getElementById("Name").value;
    var aEmail = document.getElementById("Email").value;

    var data_Array = [aName, aEmail];
    google.script.run
      .withSuccessHandler(confirmationBack)
      .addAName(data_Array);
  }

  window.confirmationBack = function(rtrn) {
    if (rtrn === 'success') {

    }
  }
</script>
0
votes

The success and failure handlers for the async communication between the Apps Script instance and the client-side HTML code are functions in the client-side code, not written in Apps Script (.gs).

When calling your server-side function foo(input), it can be used to call other server-side functions (bar(), baz()) as desired, and use their outputs to form the value that is sent to the client-side success handler.

Example:

.gs

function foo(valFromClient) {
  var firstPart = bar(valFromClient);
  var secondPart = baz(valFromClient);
  return {input: valFromClient, first: firstPart, second: secondPart};
}
function bar(input) {
  return "'bar' called, input '" + String(input) + "'.";
}
function baz(val) {
  return "'baz' called, input '" + String(val) + "'.";
}

.html

...
<script>
  function getServerStuff() {
    google.script.run
      .withFailureHandler(serverThrewException)
      .withSuccessHandler(serverFunctionCalledReturn)
      .foo("Hi");
  }
  function serverThrewException(err) {
    console.log(err);
  }
  function serverFunctionCalledReturn(value) {
    console.log(value);
  }
</script>

In this example, because our code does not throw any exceptions, the failure handler will never be called, and only the success handler will be called. The browser console would log the object {input: "Hi", first: "'bar' called, input 'Hi'.", second: "'baz' called, input 'Hi'."}.