ROUTING AND NAVIGATION IN SAP UI5

[Rahul_Kanti]

INTRODUCTION 

Modern web applications must have routing and navigation capabilities. User navigation between various pages and views is made possible by them. SAP UI5 provides us with these features. 

The method of routing involves determining which views or pages should be displayed in response to a specific URL or hash fragment request. On the other hand, the process of moving from one perspective to another while following established paths is known as navigation.  

In SAPUI5, the Router class is used to control routing and navigation. The responsibility of the Router class is to parse the URL, match it to a route, load the corresponding view, and then show it. 

DEFINING ROUTES 

In the manifest.json file, we can define the routes by specifying the pattern, name, and target view for each route. Below is the example for the complete configuration of manifest.json file 


                                                                IMAGE 1

 

In the above image 1 

• “routes” is the array that contains the individual routes. 

• The "pattern" property defines the URL hash fragment pattern. In the first case, an empty string refers to the default route, which will match when the URL has no hash fragment, whereas in the second case route will match when the URL has a hash fragment of "#View1." 

• The "name" property is the name given to a route, in the first case, it's named "home", whereas in the second case it’s named “View1”. 

• The target represents the name of the target view that will be displayed when this route is matched. In the first case, it refers to the "home" view, whereas in the second case it refers to the “View1” view. 

 

DEFINING TARGETS 

Once we are done with configuring the “routes” array, then we need to specify the respective targets for each routes/view. Below is the example for the same.  

                                                                IMAGE 2

In the above image 2 

• “targets” is the array that contains the individual targets. 

• "home" and "View1" are the names of the targets, which are referenced by their respective routes 

• “viewType” specifies the type of view is “XML” 

• "transition" specifies the type of transitional effect that will be used during navigation in this case its slide. 

• The "clearControlAggregation" property determines whether the target's container control should be cleared before adding the new view. 

• “viewId” it indicates unique Id for respective views 

• “viewName” refers to the name of the view file. 

HANDLING NAVIGATION 

After doing all the routes and targets configurations in the manifest.json file we can utilize the navTo() method of the Router class. The navTo() method takes a route as its argument, 

Considering the home.view.xml file as follows: 

                                                                IMAGE 3

Having the controller file as: 

                                                                IMAGE 4

Here in the above image 4, home.view.xml file has a button which is attached to a method named “onButtonClick” once this method is triggered from the view, we call oRouter.navTo("View1") to navigate to the "View1" route, which is defined in the "routes" section of the routing configuration.

The "View1" route's pattern will be compared by the router when the navTo method is called, and if a match is found, the "View1" view linked to the "View1" target will be loaded and shown. The target configuration will be followed when applying the "slide" navigation transition effect.

PASSING DATA DURING NAVIGATION 

We can pass data between views during navigation using parameters. Considering the example below: 

                                                                IMAGE 5

In the above image 5 we are navigating to “EmployeeDetails” view and passing the id parameter with the value of the variable employeeID.

                                                              IMAGE 6

By handling the route matched event and using the passed parameter ‘employeeID’, we can fetch the relevant data and update the view dynamically. 

Here in the above image 6, we are using ‘employeeID’ retrieved from the URL parameter to fetch the employee details from the backend using oData model, after successful retrieval of the employee details a new JSON model is created ‘oEmployeeDetailsModel’ and is set with the retrieved data in the “EmployeeDetails” view. This allows us to bind controls in the view to display the Employee details. At last, the title of the view is updated with the employee name for better understanding. 

Thanks, and Regards 

Rahul Bhisham Kanti