Routing and Navigation
As discussed, the SAPUI5 allows you to build single-page apps where the navigation is done by changing the hash. In this lesson, we will learn how to configure and implement the navigation for a full-screen application.
As you have learned, a route is used to notify your application that the hash has changed to a certain value. The pattern of the route is matched against the hash. If the pattern matches, the route provides the data passed over the hash to a defined handler.
Root View Configuration
In the manifest.json file, in the "sap.ui5" section, there should be a "rootView" section defining the entry point of the application. In most cases, the App view.
The id of the app control is also provided.
URL Patterns for Routes
Remember, whenever a hash is added to a URL, the router checks whether there is a route with a matching pattern. The first matching route is taken and the corresponding target view is called. The data provided with the hash are passed on to the target.
The pattern parameter of a route defines the string that is matched against the hash.
Let's review in details the different kinds of patterns:
- Hardcoded parts
- Mandatory parameters
- Optional parameters
- Mandatory query parameters
- Optional query parameters
URL Patterns for Routes
| Pattern type | Example | |
|---|---|---|
| hardcoded parts | "carrier/settings" | This pattern will only match if the hash of the browser is carrier/settings. No arguments will be passed to the events of the Route. |
| mandatory parameters | "carrier/{carrierid}" | {carrierid} is a mandatory parameter. For example, the following hashes would match: carrier/AA. The matched event of the Route will get AA passed as carrierid in its arguments. The hash carrier/ will not match. |
| optional parameters | "carrier/{carrierid}/showtab/:tabid:" | :tabid: is an optional parameter For example, the following hashes would match: carrier/AA/bookings |
| mandatory query parameters | "carrier{?query}" | {?query} allows you to pass queries with any parameters For example, the following hashes would match: carrier?first=value1 carrier?first=value1&second=value2 |
| optional query parameters | "carrier/{carrierid}/flights:?query:" | :?query: is an optional query parameter. For example, the following hashes would match: carrier/AA/flights?from=New York carrier/AA/flights |
Routing applied to a Full-screen Application
In this video lets look at routing in a full screen application.