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