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

To report this post you need to login first.

1 Comment

You must be Logged on to comment or reply to a post.

  1. John Omesili

    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) {

             

             sap.ui.getCore().byId(“Shell”).destroyApp();

             

               this.app = new sap.m.SplitApp({ ….

              ……

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

    (0) 

Leave a Reply