Alert Dialogue Box in Google Apps Script

Question

It is my understanding that Google Apps Script (GAS) has provided a popup dialogue box that corresponds to the alert dialogue box in client-side JS. In trying to get acquainted with this dialogue box, I have prepared the test code shown below:

Code.gs:

var validate=function() {
   Browser.msgBox('Hello, world!', Browser.Buttons.OK);  // See: http://www.mousewhisperer.co.uk/drivebunny/message-dialogs-in-apps-script/
}
function doGet() {
      return HtmlService.createTemplateFromFile('index').evaluate().setTitle('Test').setSandboxMode(HtmlService.SandboxMode.IFRAME)
    }

index.html:

<div>
 <form>
  <input type="button" value="Click Me" onclick="validate">
 </form>
</div>

When I click on the "Click Me" button, instead of seeing a popup dialogue box, nothing happens and an error is reported in the JS console complaining that "validate" is not defined. Can anyone please tell me what I'm missing?

Answer 1

Browser.msgBox() runs from the server. You probably already know that. But you aren't calling the server. Your onclick attribute needs to have a google.script.run.serverFunctionName(); call in it. Or, as shown below, put the google.script.run call in a separate function.

HTML Code:

<div>
 <form>
  <input type="button" value="Click Me" onclick="validate()">
 </form>
</div>

<script>
  window.validate = function() {
    google.script.run.validate();
  };
</script>

Code.gs

function validate() {
  Logger.log('It ran!');
  Browser.msgBox('Hello, world!', Browser.Buttons.OK);  // See: http://www.mousewhisperer.co.uk/drivebunny/message-dialogs-in-apps-script/
}
function doGet() {
      return HtmlService.createTemplateFromFile('index').evaluate().setTitle('Test').setSandboxMode(HtmlService.SandboxMode.IFRAME)
    }