Show TOC

NavigationLocate this document in the navigation structure

SAPUI5 offers a hash-based navigation, which allows you to build one-page apps where the navigation is done by changing the hash, so the browser does not have to reload the page. Instead there is a callback to which the app and especially the affected view can react. A string, that is, the hash is used, parsed and matched against patterns which will then inform the handlers.

SAPUI5 uses Crossroads.js for parsing the hash and the Hasher framework for manipulating the hash. You can find more information about Crossroads.js and the Hasher framework on GitHub.

Navigation is used for the following use cases:
  • Browser History Handling

    On mobile devices you do not only have the browser back but also physical back buttons (android).

  • Bookmarks/Deep Links

    Bookmark/deep link a page inside an app; this means that you can start the app and resume the bookmarked state

Hash-based navigation enables you to pass data from the hash to any view, and to adjust the current hash so that you can use it as a bookmarkable URL. It also enables the user to use the browser history buttons for navigation and depending on the hash you can also generate views automatically.

The following general rules apply:

  • The user can always navigate back to the previous page.

  • Each full page change creates an entry in the back chain (browser history).

  • Most pages can be bookmarked.

  • Dialogs and popovers can not be bookmarked.

Pattern Matching

A route is used to notify your application that the hash has changed to a certain value. When a route matches the hash, it provides the data passed over the hash to a defined handler. The pattern of the route is matched against the hash. If the pattern matches your application will also get the parameters.

When defining routes, the order is important: Only the first route that matches is informed. You can activate greedy for a route, meaning that events will be fired even if another route has already matched. All routes defined after the first route that was hit are ignored. If you define a catchall route, always define it as the last route.