Show TOC

NavigationLocate this document in the navigation structure

The navigation flow of the Worklist app is very simple as it only contains two main views and the not found pages that are displayed as a message to the user in case of navigation errors.

Figure 1: Navigation Flow of the Worklist App

The two main views Worklist and Object each have a route and a target configured, and are displayed by the router when the corresponding pattern has been hit. By pressing one of the items, the user can drill in to an object or drill out using the back button:

  • worklist

    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 worklist or when calling the app with a deep link containing this pattern, the Object 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 worklist 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.

  • objectNotFound

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

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.worklist.view",
	"controlId": "app",
	"controlAggregation": "pages",
	"bypassed": {
	  "target": "notFound"
	}
  },
  "routes": [
	{
	  "pattern": "",
	  "name": "worklist",
	  "target": "worklist"
	},
	{
	  "pattern": "Products/{objectId}",
	  "name": "object",
	  "target": "object"
	}
  ],
  "targets": {
	  "worklist": {
		"viewName": "Worklist",
		"viewId": "worklist",
		"viewLevel": 1
	  },
	  "object": {
		"viewName": "Object",
		"viewId": "object",
		"viewLevel": 2
	  },
	  "objectNotFound": {
		"viewName": "ObjectNotFound",
		"viewId": "objectNotFound"
	  },
	  "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.