CODEWITHSUNDEEP
google-apps-scriptweb-applications
user3311045
user3311045

Reputation: 759

Alert Dialogue Box in Google Apps Script

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?

Upvotes: 4

Views: 9971

Answers (3)

Wicket
Wicket

Reputation: 38210

Class Browser is specific for Google Sheets, it can't be used on web apps, but it might be used on dialogs and sidebars on a script contained in a spreadsheet or a Google Sheets Add-on.

There are many options for showing a dialog on a web app.

The most basic option is alert(message), but it's also the ugliest when used in a Google Apps Script web app: the alert title shows a long string not intended to say something helpful for the end-user.

A better simple option is to use <dialog>.

Example

Code.gs

function doGet(e){
  return HtmlService.createHtmlOutputFromFile('index.html');
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <!-- button -->
    <input type="button" value="Click Me" onclick="validate()">
    
    <!-- dialog -->
    <dialog>
      <p>Hello world!</p>
      <form method="dialog">
        <button>OK</button>
      </form>
    </dialog>
    
    <!-- Client-side JavaScript -->
    <script>
      function validate(){
         document.querySelector('dialog').setAttribute('open', true)
      }
    </script>
  </body>
</html>

When the web app loads, the dialog is closed. The dialog will be opened when the user clicks the button.

Screenshot of the index.html showing an open dialog

Dialogs might be created in Google Apps Script web apps using user interface frameworks like jQuery UI and Bootstrap, among others.

Upvotes: 0

Zig Mandel
Zig Mandel

Reputation: 19835

Browser methods are for uiApp, not for htmlApp. they run server-side and might not even work when called from clientside as a foogle.run function. it also will have sidewffects as it wont be modal to the client.

simply use the existing alert/prompt javascript functions available in the client side browser.

Upvotes: 0

Alan Wells
Alan Wells

Reputation: 31300

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)
    }

Upvotes: 2

Related Questions