What is the best way to manage two UI's?

Question

I have created two user interfaces. How can I close the first one and activate the next? Is it possible to have two UI under Google apps script?

I have try something

Answer 1

I prefer to build multiple GUI. With this code you can jump between them.

function doGet() {

   var app = UiApp.createApplication();
   var base0 =app.createAbsolutePanel().setId('GUI_base0').setHeight('630px').setWidth('1125px');
   app.createAbsolutePanel().setId('GUI_base1');  // create all abs_panells but not use
   // you need to create all abspanels if you want to jump between them
   app.createAbsolutePanel().setId('GUI_base2');  // create here all the absolute panels (1 for every GUI)
   // app.createAbsolutePanel() ... GUI3, GUI4 ...

   var component0 = app.loadComponent("GUI_password");  // load first GUI (his name is "password"

         /// this is an example of code for the 1st GUI ////////////////////
         /// I can  check if the user can see the second GUI
         var label_ID = app.getElementById('LB_ID');
         var user = Session.getActiveUser().getEmail();
         if ( user == 'XXX@yyyy.com' ) { 
            label_ID.setText(user).setTag(user);  // only show if ....
         }
         ////////////////////////////////////////////////////////////////////

    base0.add(component0);   // GUI_password over absolute panel
    app.add(base0);

    // handler Button1  // we can show a button only if the password is correct or is a valid user or ...
    app.getElementById('BT_jump').addClickHandler(app.createServerHandler('NOW_gui1'));

    return app;  

};


function NOW_gui1(e) {

    var app = UiApp.getActiveApplication();

    var base0 = app.getElementById("GUI_base0").setVisible(false); // hide 1st abs_panel created with code
    var base2 = app.getElementById("GUI_base2").setVisible(false); // hide 3rd abs_panel created with code
    ///  hide all others abs_panel

    var base1 = app.createAbsolutePanel().setId('GUI_base1').setHeight('630px').setWidth('1125px');  // maybe get by ID ??, but this work
    var component1 = app.loadComponent("GUI_1");  // load the second GUI

    base1.add(component1);  // load GUI_1 over 2n absolute panel
    app.add(base1);

    // HERE THE CODE OF THE GUI_1


    // handler Button2  
    app.getElementById('BT_jump_1_to_2').addClickHandler(app.createServerHandler('NOW_gui2')); 


    return app;
};

Answer 2

Here's and example of three dialogs shown one after the other, maintaining state/data between them via the CacheService object.

(You could use UserProperties, ScriptProperties or even a Hidden Field as an alternative, each has their own scope though...)

Hopefully this makes sense without explaining what each dialog in the UI Builder contains.

function showDialog1(){
  var app = UiApp.createApplication();
  app.add( app.loadComponent("Dialog1") );
  SpreadsheetApp.getActiveSpreadsheet().show(app);
}

function onDialog1OKButton(e){
  CacheService.getPrivateCache().put("n1", e.parameter.n1);

  var app = UiApp.getActiveApplication();
  var d2 = app.loadComponent("Dialog2");
  app.add(d2);

  SpreadsheetApp.getActiveSpreadsheet().show(app);
}

function onDialog2OKButton(e){
  var c = CacheService.getPrivateCache();
  c.put("n2", e.parameter.n2);

  var app = UiApp.getActiveApplication();
  app.add(app.loadComponent("DialogResult")); 

  var n1 = c.get("n1");
  var n2 = c.get("n2");
  var l = app.getElementById("Label2");
  l.setText( "" + n1 + " + "  + n2 + " = " + (parseInt(n1) + parseInt(n2)) );

  SpreadsheetApp.getActiveSpreadsheet().show(app);
}

Answer 3

The easiest way is probably to design both panels in the same GUI builder, one over each other in 2 separate panels, the 'login panel' being above the other it will mask the other one when active. As you set it 'invisible', you'll see the one underneath. Depending on your use case the login panel might hide all or only a part of your main panel. The GUI builder has all the necessary tools to decide which is in front or backwards.