Show TOC

NavigationLocate this document in the navigation structure

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 a target configured. The master target controls the masterPages aggregration of the sap.m.SplitApp control, all other targets control the detailPages aggregation. Note that two targets are always displayed by the router when the corresponding route pattern has been hit to update the master and the detail page at the same time. By pressing one of the items, the user can drill in to an object:

  • master

    The worklist route does not have a specific routing pattern and is triggered whenever the app is called initially without further navigation options in the hash.

  • object

    When pressing an item in the master list or when calling the app with a deep link containing this pattern, the Detail view is displayed or updated. The object route pattern is adjusted by the template automatically to match the entity of the service you chose. The pattern is composed by the entity that is displayed in the master list and a placeholder for the ID of the entity.

The not found pages are implemented using simple XML views containing a sap.m.MessagePage without any additional controllers. It displays a semantic error message according to the SAP Fiori UX specifications. There are different "not found" cases that each have a separate target and a not found view:

  • notFound (similar to a resource not found or HTTP 404 error)

    No route of the routing configuration has been hit, the router will display the target configured with the bypassed option automatically. The apps are configured to show the notFound view in that case.

  • detailObjectNotFound

    The object route was hit but the corresponding object could not be read by the backend service. The controller of the detail page will display this target if the service did not return a valid object. The detailObjectNotFound view will be displayed.

  • detailNoObjectsAvailable

    The service did not return any results when initially loading the app. In this case, an alternative message is displayed to the user by showing the detailNoObjectsAvailable view from the controller logic.

The routing configuration for this navigation flow is set up in the app descriptor, as shown here:

"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"
    }
  }
}

For more information, see Routing and Navigation, the sap.m.routing.Router section of the API Reference documentation in the Demo Kit, and the sap.ui.core.routing.Router sample in the Explored app within the Demo Kit.