User confirmation from a formatted screen

Question

I developed an app that runs from a Spreadsheet. It has a formatted screen, ie. doc.show(app ). There is a mass change function. I'd like to prompt the user for 'Are you sure ... OK to Continue'.

The ideal solution would be a pop-up form with an "OK to continue" response.

I can't find a way to prompt the user and accept a response that doesn't simultaneously take down the formatted screen.

I know there must be a easy way to do this. I searched this forum and others, but cannot find a solution that applies to Google Spreadsheets.

Answer 1

You can use Browser.MsgBox() and add buttons into it for users confirmation. Refrence URL https://developers.google.com/apps-script/class_browser

Answer 2

This is indeed not an easy thing to do. You'll have to use your own GUI (formatted screen) to show the message. This way you can restore the state of your GUI again. Here is an example:

function uiTest() {
  var app = UiApp.createApplication().setTitle("UI");
  app.add(app.createGrid(1,1).setId('main'));
  createGUI(app,{});
  SpreadsheetApp.getActive().show(app);
}

function createGUI(app,p) {
  var panel = app.createVerticalPanel();
  var handler = app.createServerHandler('handler').addCallbackElement(panel);
  panel.add(
    app.createTextBox().setName('text').setId('text').setText(p.text ? p.text : "")).add(
    app.createButton('Do it').addClickHandler(handler));
  app.getElementById('main').setWidget(0,0, panel);
}

function handler(e) {
  var app = UiApp.getActiveApplication();
  var hidden = app.createHidden('oldValues', JSON.stringify(e.parameter));
  app.getElementById('main').setWidget(0,0, app.createVerticalPanel().add(
    hidden).add(
    app.createLabel("Question message")).add(
    app.createButton('Ok').addClickHandler(app.createServerHandler('after').addCallbackElement(hidden))));
  return app;
}

function after(e) {
  var app = UiApp.getActiveApplication();
  createGUI(app,JSON.parse(e.parameter.oldValues));
  return app;
}

The difficulty will really depend on how much state you need to restore. If none, then it's a lot, lot easier. In this example I restore the value of the textbox. You can type in anything there to see that it will be there after the popup.

Answer 3

When using the GUI Builder I've found a very simple solution that is to create a panel or a label that is actually masking the whole UI (or part of it) and that is normally invisible. When I make it visible I can click on it, it turns invisible again and I'm back on the standard UI. It uses the ability in GUI builder to move elements backwards and forwards so masking is very easy (a sort of multi layer design). I guess the same behavior is achievable with script defined UI but I'm not sure how... regards, Serge

EDIT : For information : I just set up an interface using this technique and I noticed that panels that have been made invisible must be restored along with all their elements otherwise they reappear empty. Using Clienthandlers here is an example with two panels and two buttons that do the job :

  var panhandler0 = app.createClientHandler()
     .forTargets(panel1).setVisible(false);// hide panel1 when button 'ENTER'on panel1 is pressed
   enter.addClickHandler(panhandler0);
  var panhandler1 = app.createClientHandler()
     .forTargets(panel2,msg,grid2).setVisible(true);// show panel2 when button 'ENTER' on panel1 is pressed
   enter.addClickHandler(panhandler1);
  var panhandler2 = app.createClientHandler()
     .forTargets(panel2,msg,grid2).setVisible(true);// re-show panel2 when button 'retry'on panel2 is pressed
  retry.addClickHandler(panhandler2);
  var panhandler3 = app.createClientHandler()
     .forTargets(panel2).setVisible(false);// hide panel2  when button 'retry'on panel2 is pressed
  retry.addClickHandler(panhandler3);
  var panhandler4 = app.createClientHandler()
     .forTargets(panel1,txt,grid,hpanel).setVisible(true);// re-show panel1 when button 'retry'on panel2 is pressed

Works nicely !