Skip to Content

Navigate between single full view and split view


After you’ve generated your custom fiori application by using the SAPWebIDE you’ll have a split view which contains a master and detail view. If you haven’t generated your application, follow previous tutorial:

Generate your custom Fiori application with SAPWebIDE On-Premise using Gateway On-Premise

The SAPWebIDE will have generated something like this. A container “App.js” which will contain your master en detail views and master view and detail view:

sapui splitapp.png

Great that you can generate a splitview! But what if you want another view before the split view? What if you want a login view? Or a tile container?

In this tutorial I’ll explain you how to achieve this. First start by creating a new view which we’ll use as a tile container. So you’ll have something like this:

sapui splitapp en full.png

We have a single full view and a split view with the master and detail view. Now we’ll need something to connect the single fulle view and the splitview. Therefore we add a new view which will act as a container for single views. We’ll place it on top of the single full view and the splitview. It will contain the “sap.m.App” component. This will enable us to connect the single full view with the splitview.

sapui splitapp final.png

We’ll use the “masterApp” to embed the single full view and the splitview. The splitview will embed the master and detail view. For the real connection we’ll need to configure the router component in the “component.js”.

To see how, just follow this tutorial:

In the next tutorial we’ll see how to organize your project before it is getting too big!

Organize your UI5 project

Kind regards,


You must be Logged on to comment or reply to a post.
  • Interesting tutorial! There's indeed a gap in UI5 when you want to have fullscreen and splitscreen pages within one application (well, no gap as in "can't do this" - your tutorial proves one can do - , but as in "not supported very easily"). And in fact this gap is supposedly being addressed soon. Not sure yet what the result will be, but think of something like a "SuperApp" that can have master pages, detail pages and fullscreen pages and you can navigate freely between them. Internally it might work just like you described it: an App as master and a SplitApp for the splitscreen pages. 🙂

      • Really great Video. Thanks. Nice to have in the SuperApp would be also an integrated expand/collapse button for the master view in landscape mode. Actually I'm resizing the width of the Master Sidebar on-demand 😉 .

  • Hi,

    thanks for the tutorial.

    I extended the example application from the Developer Guidelines with your code and I have one final question. When using the back button after switching to the split view, I'm not getting back to the overview.

    I wonder how your App.view.xml and controller look like. Is there a function to manage the navigation back to the overview?

    Or is it conflicting with MyRouter.js of that example?

    Kind regards,


    • Hi Michael,

      You could use the name of your route to navigate back:

      sap.ui.core.UIComponent.getRouterFor(this).navTo("route name",{});

      or just go back like this:


      --> this has the disadvantage that when the master/detail page is your first page. This command wil trigger a go back on browser level

      To overcome this disadvantage you could use the myNavBack in the MyRouter.js

      Tha app.view.xml is generated in the previous tutorial:

      Generate your custom Fiori application with SAPWebIDE On-Premise using Gateway On-Premise

      It's almost empty 🙂





        <SplitApp id="idAppControl" />


      Kind regards,


  • Hi Wouter,

    Thanks for sharing this interesting how-to blog and I want to share one thing with you that it caused me half day to find the solution.

    In your demo, "TileContainer" in overview.view.xml didn't specify height, I know its default value is 100% if you don't specify particular value. But, it caused problem in my local WebIDE environment, tile just not shown on the screen if I didn't give value to height property in TileContainer. I use Chrome (version 40.0.2214.111 m) as well, don't know why this problem happen in my laptop. Thanks.

  • This is an excellent blog.

    Does anyone know if the same thing can be accomplished using scaffolding?  I understand the master and detail being subroutes, but in scaffolding you define fullScreenPageRoutes, masterPageRoutes, and detailPageRoutes.  Navigation from fullscreen to master/detail doesn't seem to work...

        • Here is an example for routes:

          Index.html should launch App(which is a full screen) with id idMainAppControl, then the master and details is added through SplitContainer control with id idSplitContainerControl.

          routes: [{

                          pattern: "",

                          name: "_launch",

                          view: "Launch",

                          targetAggregation: "pages",

                          targetControl: "idMainAppControl",

                      }, {

                          pattern: "splitapp",

                          name: "_splitapp",

                          view: "SplitApp",

                          targetAggregation: "pages",

                          targetControl: "idMainAppControl",

                          subroutes: [{

                              pattern: "splitapp",

                              name: "_S1",

                              view: "Master",

                              targetAggregation: "masterPages",

                              targetControl: "idSplitContainerControl",

                              subroutes: [{

                                  pattern: "splitapp/{index}",

                                  name: "_S2",

                                  view: "Detail",

                                  targetAggregation: "detailPages",


                                  pattern: "splitapp/{index}/line/{lineIndex}",

                                  name: "_S3",

                                  view: "LineItem",

                                  targetAggregation: "detailPages",



                      }, {

                          pattern: "fullscreen",

                          name: "_S4",

                          view: "FullScreen",

                          targetAggregation: "pages",

                          targetControl: "idMainAppControl",

                      }, {

                          pattern: "newline/{index}",

                          name: "_S5",

                          view: "NewLineItem",

                          targetAggregation: "pages",

                          targetControl: "idMainAppControl",


  • Hi,

    Thank you for your valuable post. i have implemented the same it is working for me. But now there is a new concept called targets in routing. i want to implement the same application with the help of targets. can you please help me in this. i was able to create full screen to full screen and Master detail page with the help of targets. but when i come to integrate both as you did above with the help of targets, i could not. Still facing problem with that. I need help in that.



  • Hi,

        I am using the master list page as my main page. In the master list page , i put one button to switch to grid view(Full screen view). So what code i need to write in my App.view.js

    This is my code

    -------------code starts--------

    createContent: function (oController) {

      // to avoid scroll bars on desktop the root view must be set to block display


      // create app = new sap.m.SplitApp();

      // load the master page

      var master = sap.ui.xmlview("Master", "sap.ui.demo.myFiori.view.Master");

      master.getController().nav = this.getController();, true);

      // load the empty page

      var empty = sap.ui.xmlview("Empty", "sap.ui.demo.myFiori.view.Empty");, false);



    -------------code ends--------

    Thank you,


  • Hi Wouter,

    Can you please provide a source code for this example? Or can you explain me how to make application with structure like this: Login page -> Registration page (if user is not registered) -> Tiles menu page -> a number of pages for every tile (master detail or just one view pages). Is this possible and what is the root container that goes in index.html.

    Thank you in advance.

  • Hi wouter,

    Thanks for the tutorial. I tried the same in web ide, but I am not able to navigate to master detail view. Master view is getting loaded but Detail view is not appearing. Its blank. Could you please help me. My routing Code:


    "routing": {

      "config": {

      "routerClass": "sap.m.routing.Router",

      "viewType": "XML",

      "viewPath": "myCompany.myApp.view",

      "controlId": "app",

      "controlAggregation": "pages",

      "clearTarget": false,

      "transition": "flip"


      "routes": [{

      "pattern": "",

      "name": "worklist",

      "target": "worklist",

      "controlId": "app"

      }, {

      "pattern": "Products/{objectId}",

      "name": "object",

      "target": "object"

      }, {

      "pattern": "split",

      "name": "split",

      "view": "SplitContainer",

      "controlId": "app",

      "subroutes": [{

      "pattern": "split",

      "name": "master",

      "view": "Master",

      "controlId": "idSplitAppControl",

      "controlAggregation": "masterPages",

      "subroutes": [{

      "pattern": "Detail/{objectId}",

      "name": "detail",

      "view": "Detail",

      "controlAggregation": "detailPages"




      "targets": {

      "worklist": {

      "viewName": "Worklist",

      "viewId": "worklist",

      "viewLevel": 1


      "object": {

      "viewName": "Object",

      "viewId": "object",

      "viewLevel": 2




    Blank Detail view.JPG



  • Hi Betty,
    Hope you doing good.
    Did you find the solution for that.
    Im working on same scenrio like created fiori master detail template with WEBIDE and now have to navigate from full screen to master detail screen.

    Prasad Doddi