Skip to Content
Author's profile photo Rauf Shaikh

SAPUI5 MasterDetail Screen App with Detail Screen as Splash Screen

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
           //Stop Timer
           // Create Split App now
  = new sap.m.SplitApp();
           // load the master page
           var master = sap.ui.xmlview("firstView", "view.firstView");
 , true);
           // load the empty page
           var detail = sap.ui.xmlview("secondView", "view.secondView");
 , false);
           //Add sap.m.SplitApp to Shell now

Its Done !

As ‘myTimer’ Function executes Splash Screen is Removed from Application and SplitApp is loaded on the screen

I hope this help 🙂



Assigned Tags

      1 Comment
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Wonderful, Wonderful, This explaination  clears my head of some heirarchical issues

      Thanks      Rauf Shaikh

      However, could you take a few munites to expantiate on this because I the code below and did not succeed.

      My secnario, Create Welcome page,

      Remove welcome page and change from App to SplitApp

      handleAddObject : function (evt) {




        = new sap.m.SplitApp({ ....


      I get TypeError: sap.ui.getCore(...).byId(...) is undefined from the console.