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

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