Skip to Content

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
this.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});
app.controller.addPage(page);
app.controller.to(pageId);

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


app.controller.back()

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


app.splitContainer.toDetail(pageId)

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.


app.splitContainer.backDetail();

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!

To report this post you need to login first.

3 Comments

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

  1. 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.

    Thanks,

    Srinivasan

    (0) 
    1. Rahul Choudhary 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.

      Regards

      Rahul

      (0) 

Leave a Reply