Hello Everyone,
As we all know We can create Full Screen(Detail) And Split Screen(Master-Detail) application in SAPUI5. But there may be some scenarios where may require both App types in one single application.
For example we may require to show a full screen(Detail view) splash page before showing Split screen.
Before starting take a look at the followings:
- Shell (sap.m.Shell) : The Shell control can be used as root element of applications, it can contain an App or SplitApp control. The Shell provides some overarching functionality for the overall application and takes care of visual adaptation, like a frame around the App, on desktop browser platforms.To be more specific it maintains one NavContainer.
- App (sap.m.App) :App is the root element of a UI5 mobile application. It maintains only one screen at a time.
- SpliApp (sap.m.SplitApp) : SplitApp is another root element of a UI5 mobile application besides App control. It maintains two screens based upond the device(table or phone).To be more specific it maintains two NavContainers.
Now lets return to the example application :
1. Create Splash Screen View
2. Create Master View
3. Create Detail View
4. In Splash Screen View controller onInit() set a timer function for the splash screen.
oController = this; this.myVar = setInterval(function(){oController.myTimer();},5000);
5. Add myTimer() function in Splash Screen View:
myTimer : function(){ //Remove sap.m.App(Splash Screen) from Shell first sap.ui.getCore().byId("Shell").destroyApp(); //Stop Timer clearInterval(this.myVar); // Create Split App now this.app = new sap.m.SplitApp(); // load the master page var master = sap.ui.xmlview("firstView", "view.firstView"); this.app.addPage(master, true); // load the empty page var detail = sap.ui.xmlview("secondView", "view.secondView"); this.app.addPage(detail, false); //Add sap.m.SplitApp to Shell now sap.ui.getCore().byId("Shell").setApp(this.app); },
Its Done !
As 'myTimer' Function executes Splash Screen is Removed from Application and SplitApp is loaded on the screen
I hope this help
Regards,
Rauf