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!