Simple popup or dialog box in Google Apps Script

Question

I'm looking for simple code that adds a popup in my Google Apps Script Ui that comes up when I hit a submit button. The popup box would display a message and have a button to close the popup.

I've looked all over the place - everything seems so complicated and does way more than I need it to do.

This is the current code I have for the submit button.

     function doGet() {
       var app = UiApp.createApplication();
       app.setTitle("My Logbook");

       var hPanel_01 = app.createHorizontalPanel();
       var vPanel_01 = app.createVerticalPanel();
       var vPanel_02 = app.createVerticalPanel();
       var vPanel_03 = app.createVerticalPanel();

       var submitButton = app.createButton("Submit");

       //Create click handler
       var clickHandler = app.createServerHandler("submitData");
       submitButton.addClickHandler(clickHandler);
       clickHandler.addCallbackElement(hPanel_01);


       ////Test PopUp Panel
       var app = UiApp.getActiveApplication();
       var app = UiApp.createApplication;
       var dialog = app.createDialogBox();
       var closeHandler = app.createClientHandler().forTargets(dialog).setVisible(false);
       submitButton.addClickHandler(closeHandler);

       var button= app.createButton('Close').addClickHandler(closeHandler);

       dialog.add(button);
       app.add(dialog);
       //////



       return app;
     }

Answer 1

You can use a dialogbox to popup. Add a button to the dialog-box. Add a client handler that sets the dialog box invisible,once you click the button.

var app = UiApp.createApplication;
var dialog = app.createDialogBox();
var closeHandler = app.createClientHandler().forTargets(dialog).setVisible(false);

var button= app.createButton('Close').addClickHandler(closeHandler);

dialog.add(button);
app.add(dialog);

This should help.

EDIT

Added "()" after .createClientHandler. That should remove issues related to TypeError: Cannot find function createDialogBox in object function createApplication() {/* */}

Answer 2

Have you tried using zIndex? It places the panel above all of your other panels...

var popupPanel = app.createVerticalPanel().setId('popupPanel')
    .setVisible(false)      
    .setStyleAttribute('left', x)  
    .setStyleAttribute('top', y)        
    .setStyleAttribute('zIndex', '1')
    .setStyleAttribute('position', 'fixed');

x = panel position from the left portion of your app y = panel position from the top portion of your app zIndex = the 'layer' your panel will appear on. You can stack panels using '1', '2', '3' etc. position = your panel will be in a fixed position denoted by (x,y)

Visibility is set to false until you click submit, then have a client handler for your submit button make the popupPanel visible. When you click the button on your popupPanel, have the client handler set visibility to false once again and it will disappear.

One more thing, I noticed you get the active app and then create a new app. You do not need to create a new app...just new panels inside your app.

Hope this helps!

Answer 3

Popup - use something like this:

      var table = app.createFlexTable();
      table.setStyleAttribute("position", "absolute");
      table.setStyleAttribute("background", "white");      

add items to the table and hide and show as needed.

Answer 4

Since UiApp is depreciated, HTMLService should be used to create custom user interfaces.

To prompt simple popup to display a message, use alert method of Ui class

var ui = DocumentApp.getUi();
ui.alert('Hello world');

will prompt simple popup with hello world and an ok button.

To display customized html template in Dialog, use HTMLService to create template and then pass it to showModalDialog method of Ui Class

var html = HtmlService.createHtmlOutput("<div>Hello world</div>").setSandboxMode(HtmlService.SandboxMode.IFRAME);
DocumentApp.getUi().showModalDialog(html, "My Dialog");

HtmlService.createHtmlOutputFromFile allows you to display html that is in a separate file. see the documentation