Implementing Router Configuration

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.

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.

Hash-based navigation enables you to use the current hash as a bookmarkable URL.

The manifest.json file of the SAPUI5 project contains the configuration for the routing.

The pattern of a route is basically the hash part of the URL that matches the route.

As of SAPUI5 version 1.30, SAP recommends that you define the routing in the manifest.json descriptor file using routes and targets. In older versions of SAPUI5, the routing configuration had to be done directly in the metadata section of the Component, and with different syntax.

There are three properties used to control the application flow when the user triggers a navigation action or opens a link to the application directly.

Let's explore these three properties.

To enable the routing, the router of the application has to be initialized.

You do not need to instantiate the Router manually, it is automatically instantiated based on the configuration in manifest.json and assigned to the Component. However, the router needs to be initialized by the Component. This is done in the init-function of the component implementation by calling the initialize function on the router object. After initialization, the router configuration of manifest.json is automatically enabled in the app. SAPUI5 will also evaluate the current URL and load the corresponding view(s) automatically.

However, when you use the SAPUI5 template of the SAP Business Application Studio, the code to invoke the initialize function is generated.

We also need to make sure that a Not Found page is displayed in case the app was called with an invalid hash. Now, we proceed further and track invalid hashes to be able to detect and correct any invalid links or add new URL patterns that are often requested but not found.

Watch this video to learn how to perform this action.

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.

You can use the following kinds of patterns:

• Hardcoded parts
• Mandatory parameters
• Optional parameters
• Mandatory query parameters
• Optional query parameters

The following interaction shows the details of each pattern.