Show TOC

The First SplitAppLocate this document in the navigation structure

To develop a SplitApp application, use the sap.m.SplitApp control instead of the sap.m.App control.

Note

Running Demo

This demo app shows how you can automatically adapt your user interface to the available space by using the SplitApp control.

On a mobile phone, pages are stacked on top of each other and linked via navigation. On a tablet with landscape orientation, the pages are shown next to each other in a split view layout whereas in portrait orientation the application can choose whether to always display the master view, to display it in a popover, or to display it when the user swipes from the left. In this Demo App, you can try all three modes. Just open the iPad or Android tablet version in a new window, size it to portrait mode and choose the display mode on the bottom left.

.

var oSplitApp = new sap.m.SplitApp("mySplitApp", {});

You can add pages to the SplitApp control, but you have to decide to which view you want to add them: 

oSplitApp.addDetail() or oSplitApp.addMaster();

Before you can do this, you need some basic pages, two for the Master and two for the Detail view: 

var oDetailPage1 = new sap.m.Page("detail1", {
   title : "Detail 1",
   content : [ new sap.m.Label({
                   text : "this is Detail 1"
               })
             ]
});

var oDetailPage2 = new sap.m.Page("detail2", {
   title : "Detail 2",
   content : [ new sap.m.Label({
                   text : "this is Detail 2"
               }) 
             ]
});

To implement a basic navigation for selection of the Detail view, the two Master view pages need a list. As we only need to navigate or drill down inside the Master view, a simple StandardListItem with type Navigation is sufficient.

If the user taps on a list item, we navigate to Master view page 2. To do this, call the toMaster() method with the page you want to navigate to. In the example this is master2. 

var oMasterPage1 = new sap.m.Page("master1",{
   title : "Master",
   content : [ new sap.m.List({
		        items : [ new sap.m.StandardListItem({
		            	title : "To Master 2",
		            	type : "Navigation",
            			press : function() {
                				oSplitApp.toMaster("master2");
            			}
	       	})]
	    }) ]
});

The second Master view page is the leaving point of the master navigation: Depending on the item the user selects, the Detail view is updated. An example for this is an e-mail application with a list e-mails in the Master view and the content of the e-mail in the Detail view.

As we do not want to further navigate within the Master view, the list mode is set to SingleSelectMaster.

To update the Detail view, we have to listen to the list's select events, so we can decide on which detail page to show. Depending on the selected list item, either the detail1 page or the detail2 page is displayed. The method is called toDetail.

var oMasterPage2 = new sap.m.Page("master2",{
   title : "Master2",
   navButtonPress : function() {
		           oSplitApp.backMaster();
	              },
   content : [ new sap.m.List({
		       mode:"SingleSelectMaster",
       		select: function(oEv) {
           			   if(oEv.getParameter("listItem").getId() == "listDetail2") {
           			      oSplitApp.toDetail("detail2");
          			}else {
          			      oSplitApp.toDetail("detail1");
          			}
      		},
      		items : [ new sap.m.StandardListItem("listDetail2",{
          			      title : "To Detail 2"
         			}), new sap.m.StandardListItem("listDetail",{
         			     title : "To Detail 1"
      		}) ]
   	}) ]
});

To enable the SplitApp to run on mobile devices, some additional information needs to be added to the pages. Also, the navigation back to the Master view page has to be available from both Detail view pages.

In the next step, the pages are put into the SplitApp control:

//add the master pages to the splitapp control
oSplitApp.addMasterPage(oMasterPage1).addMasterPage(oMasterPage2);

//add the detail pages to the splitapp control
oSplitApp.addDetailPage(oDetailPage1).addDetailPage(oDetailPage2);

Then set the initial Master view and Detail view page:

oSplitApp.setInitialDetail("detail1");
oSplitApp.setInitialMaster("master1");

Define the page transition type you want to use, see Handling Navigation and Lifecycle Events. 

oSplitApp.setDefaultTransitionNameDetail("fade");

Finally, place the SplitApp control in the HTML body tag: 

oSplitApp.placeAt("body");

To test the other two SplitApp modes, use the setMode method to set them: 

oSplitApp.setMode("PopoverMode");
//or
oSplitApp.setMode("StretchCompressMode");