Navigation

The navigation flow of the Master-Detail app considers both the Master and Detail pages, and is therefore slightly more complex than a typical full-screen scenario.

Both views are loaded at the same time and methods in the controller logic make sure that the pages are in sync. Additional not found pages display a message to the user in case of any navigation errors that occur for the master and the detail page.

Figure 1: Navigation Flow of the Master-Detail App

The two main views Master and Object each have a route and two targets configured. When the route matches the URL, both targets are displayed and the corresponding views are created. The target master puts the created view in the masterPages aggregration of the sap.m.SplitApp control. All other targets put their created views in the detailPages aggregation. For more information, see Routing and Navigation.

Here is a sample implementation for navigating from the Master to the Object page. First you have to implement a press handler on the ListItem. Inside, you extract the current ID of the object pressed by the user by using its bindingContext. Since we want to navigate to the “object” route, you need to supply the mandatory objectId parameter and pass it to the navTo function, as described in the sap.ui.core.routing.Routing#navTo section of the API Reference in the Demo Kit and shown here:

/**
 * Event handler when a table item gets pressed
 * @param {sap.ui.base.Event} oEvent the table selectionChange event
 * @public
 */
onPress : function (oEvent) {
   // The source is the list item that got pressed
   this.getRouter().navTo("object", {
      objectId: oEvent.getSource().getBindingContext().getProperty("ObjectID")
   });
},
// more controller code

After calling navTo, the hash of the browser is updated and you get an event on the DetailController when the route “object” matches the current hash. In the event handler, you extract the objectId using the Event.getParameter function. You then bind the data to the view:

// init function of the object controller
onInit : function () {
   var oView = this.getView();
   var oModel = oView.getModel();
   this.getRouter().getRoute("object").attachPatternMatched(function (oEvent) {
      var sObjectId =  oEvent.getParameter("arguments").objectId;
      oModel.metadataLoaded().then(function() {
         var sObjectPath = oModel.createKey("Objects", {
            ObjectID :  sObjectId
         });
         oView.bindElement({
			path: ("/" + sObjectPath)
		});
      });
   });
	…
   // more init code
}, 
…
// more controller code

"routing": {
	"config": {
		…
		"bypassed": {
     		 "target": ["master", "notFound"]
		}
	}
	…
  "targets": {
	…
	"notFound": {
		"viewName": "NotFound",
		"viewId": "notFound"
	}

}

// inside of a controller
this.getView().bindElement({
	path: “/Objects/1337”,
   change: function () {
       // there is no data
       if (!this.getView().getElementBinding().getBoundContext()) {
		this.getRouter().getTargets().display("detailObjectNotFound
");
					return;
				}
	   // code handling the case if there is data in the backend
      …
   };
});

"routing": {
  "config": {
    "routerClass": "sap.m.routing.Router",
    "viewType": "XML",
    "viewPath": "sap.ui.demo.masterdetail.view",
    "controlId": "idAppControl",
    "controlAggregation": "detailPages",
    "bypassed": {
      "target": ["master", "notFound"]
    }
  },
  "routes": [
    {
      "pattern": "",
      "name": "master",
      "target": ["object", "master"]
    },
    {
      "pattern": "Objects/{objectId}",
      "name": "object",
      "target": ["master", "object"]
    }
  ],
  "targets": {
    "master": {
      "viewName": "Master",
      "viewLevel": 1,
      "viewId": "master",
      "controlAggregation": "masterPages"
    },
    "object": {
      "viewName": "Detail",
      "viewId": "detail",
      "viewLevel": 2
    },
    "detailObjectNotFound": {
      "viewName": "DetailObjectNotFound",
      "viewId": "detailObjectNotFound"
    },
    "detailNoObjectsAvailable": {
      "viewName": "DetailNoObjectsAvailable",
      "viewId": "detailNoObjectsAvailable"
    },
    "notFound": {
      "viewName": "NotFound",
      "viewId": "notFound"
    }
  }
}