Navigate between two or multiple views in sap.ui.commons

[ipravir]

Hi,

I have created multiple views in my sap.ui.commons application.

and looking for solution, where I can switch from one view to another view.

just the same way, we do in sap.m.app with .TO / .BACK functionality.

Please guide me how to achieve it.

Note: Application is created with Java Script option.

Regards,

Praveer.

[Former Member · Accepted solution]

Hi Praveen,

This thread might help you:

1. I use a container, e.g. a ux3 shell, and I add the desired view to it, and change it when I want to see another view.

index.html

var oShell = new sap.ui.ux3.Shell({  
                             id: "shell",  
                             });  
var loginView = sap.ui.view({  
                             id: "loginView",  
                             viewName : "viewt.Login",  
                             type: sap.ui.core.mvc.ViewType.JS  
                         });  
var listView = sap.ui.view({  
                             id: "listView",  
                             viewName : "view.List",  
                             type: sap.ui.core.mvc.ViewType.JS  
                         });  
oShell.addContent(sap.ui.getCore().byId("loginView"));  

e.g. when login is successfull: view.Login.js

1. oShell.setContent(sap.ui.getCore().byId("listView"));  

Regards,

RW

[ipravir · Accepted solution]

Hi RW,

Thanks for reply, I already checked your solution, I am just trying to find, is it the only way to switch between view or something else.

Regards,

Praveer.

[Former Member · Accepted solution]

No there are more solutions. I prefer routing.

[Qualiture · Accepted solution]

I fully agree. Maybe if you have just two views, you could forgo of routing, but with 3 or more views, I would always recommend routing

[santhu_gowdaz]

hi Praveer,

in sap.ui.commons also u can do navigation lik sap.m.app.

but for sap.ui.commons here is the code.

1st view to 2nd view,

var  oShell= sap.ui.getCore().byId("idShell");

        oShell.removeAllContent();

        var secondview = sap.ui.view({id :"idinvdtl1", viewName :"com.arteriatech.ppd.invoicelst.InvDtl.invdtl", type:sap.ui.core.mvc.ViewType.JS});

        oShell.addContent(secondview);

back to 1st view,

var  oShell= sap.ui.getCore().byId("idShell");

var firstview= sap.ui.getCore().byId("firstViewId");

        oShell.removeAllContent(firstview);

firstview.destroy();

oShell.addContent(firstview);