Open new UI without closing the actual opened Ui - google-apps-script

Question

What I want is simply that when I press a button in the Actual Ui, opens a new Ui without closing the Actual Ui.
Here is a simple code that I did:
function shows(){
var app = UiApp.createApplication().setTitle("Actual Ui")
.setHeight(3000).setWidth(1350);;
var button = app.createButton('Button');
var pan = app.createHorizontalPanel();
pan.add(button)
var clickHandler = app.createServerClickHandler("ps");
button.addClickHandler(clickHandler);
clickHandler.addCallbackElement(pan);
app.add(pan);
var doc = SpreadsheetApp.getActive();
// show the app
doc.show(app)
}
function ps(e){
var apps = UiApp.createApplication().setHeight(50).setWidth(200);
apps.setTitle("New UI");
var docsss = SpreadsheetApp.getActive();
docsss.show(apps);
return apps
}
The code works perfectly but the fact that when I press the button it closes the Actual Ui and opens the new one.

Answer 1

You can't do it like that, here is how it works, use the same app instance and change its content.
function shows(){
var app = UiApp.createApplication().setTitle("common Ui")
.setHeight(400).setWidth(1350);;
var button = app.createButton('Button');
var pan = app.createHorizontalPanel().setId('panelUi1');
pan.add(app.createLabel(' first Ui'));
pan.add(button)
var clickHandler = app.createServerClickHandler("ps");
button.addClickHandler(clickHandler);
clickHandler.addCallbackElement(pan);
app.add(pan);
var doc = SpreadsheetApp.getActive();
// show the app
doc.show(app)
}
function ps(e){
var app = UiApp.getActiveApplication();
app.getElementById('panelUi1').setVisible(false);
app.add(app.createLabel('new Ui in the same app instance'));
return app;
}