Skip to Content
Author's profile photo Rahul Choudhary

How to create a Full Screen followed by Master Detail views in a single app

Full Screen – Master Detail layout (F-MDD-F) layout

There are occasions when you would like to start with a Full Screen layout (may be with Tiles) and then lead to Master Detail (MD) screens. If you use a SplitApp you would notice that it doesn’t allow you to display an initial full screen. If you run into scenarios where you need a similar layout, you can create it yourself with the following approach.

Step 1: Start with a sap.m.App and create a view which will be displayed in Full Screen.

// create app = new sap.m.App({initialPage:"idIntroView"});

Step 2: When you need to present a Master / Detail layout, create a new view which uses sap.m.SplitContainer

var masterPage = sap.ui.view({id:"idWorkOrderList", viewName:"custom.WorkOrderListView", type:sap.ui.core.mvc.ViewType.JS});
var empty = sap.ui.xmlview("idEmpty", "custom.Empty");
app.splitContainer = new sap.m.SplitContainer({
     masterPages : masterPage,
     detailPages : empty,
     mode: sap.m.SplitAppMode.StretchCompressMode

Step 3: Navigate to split view

Now add this view to your app controller and navigate to it

var page = sap.ui.view({id:pageId, viewName:pageView, type:type});

Special Tasks

Displaying F-MD layout was easy part but in an app you also have to handle back and forth navigation

Back to Full Screen

Once you are in MD layout and would like to return to Full Screen layout, you can simply call


Forward navigation inside detail pane

Suppose you want to create MDD (where you have one master and more than one detail view). You can navigate between detail views using


Remember that app.splitContainer is not a default member, we created the SplitContainer and stored its reference in the app object. There are multiple ways to navigate if you would not like to retail SplitContainer reference, like you can bind and use custom events.

Back navigation in Split Container

If you want to navigate back inside the detail view, you would need to call backDetail on the split container object.


I will try to create a template project and post the code here for reference and usage but until then I hope this is useful.

Happy Coding!

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Srinivasan S
      Srinivasan S

      Hi Rahul,

      Any idea how to replicate the same in Web IDE ?

      Or if you have created a template project that would also help.



      Author's profile photo Rahul Choudhary
      Rahul Choudhary
      Blog Post Author

      Hi Srinivasan,

      Sorry this was an old implementation, I am sure there are better way to do this now. Haven't tried it in a while.



      Author's profile photo Srinivasan S
      Srinivasan S

      Hi Rahul,

      Thank you for the reply. Do post me if you come across something.