Skip to Content
Technical Articles

Routing with Parameters in SAPUI5 application

This blog post is on regarding routing with parameters in SAPUI5 Application.

Introduction

SAP UI5 Framework offers a special and efficient concept for Navigation between its Views.

Routing is hash based navigation where we can bookmark the current page and also when we want to bind the specific context to specific sapui5 control it can be either view or Control it can be done by parameter routing.

SAPUI5 offers hash-based navigation, which allows you to build single-page apps where the navigation is done by changing the hash. In this way 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.

Advantages of Routing

 

  •  Even after refreshing the page we can stay in the current view.
  •  It is Hash based navigation which is used at the runtime to change the URL of the particular   screen.

 

Routing configurations

 

We define routing configurations in manifest.json file which is also called descriptor file. Routing is defined using routing namespace within sap.ui5 namespace. It has the following properties.

In routing there are 3 subsections that define routing and navigation structure of the app.

manifest.json file:
"sap.ui5":{
   "routing": {
      "config": {
        "routerClass": "sap.m.routing.Router",
        "viewType": "XML",
        "async": true,
        "viewPath": "vizframeghrap.view",
        "controlAggregation": "pages",
        "controlId": "app"
      },
      "routes": [
        {
          "name": "RouteView1",
          "pattern": "RouteView1",
          "target": ["TargetView1"]
        },
        {
          "name": "RouteView2",
          "pattern": "RouteView2/{obj}",
          "target":["TargetView2"]
        }
      ],
      "targets": {
        "TargetView1": {
          "viewType": "XML",
          "viewName": "View1"
        },
        "TargetView2":{
          "viewName": "View2",
          "viewType": "XML",
         }
      }
    }
}

 

  1. config: This section contains global router configaration and default values that apply for all the routes and targets.
"config" : {       
                   "routerClass" : "sap.m.routing.Router",
                   "viewType" : "XML/JS"
                   "viewPath" : "sap.webapp.path.viewfolder",
                   "controlId" : "app",
                   "controlAggregation":"pages",
                   "async":true,
                   "transition": "slide"
           }
  • routerClass: we set the routerClass to sap.m.routing.Router, because we implement an app based on sap.m.it defines the kind of router to be used in the app.
  • viewType: defines the types of view used in the app. Normally it will be either XML or JS.
  • viewPath: defines the path where the views are stored. This path enables the app to download and load the views whenever any target/router is hit. This value is applicable across the application.
  • controlId: defines the Id of the control in which the views are to be loaded.
  • controlAggregation: defines the aggregation of the above control where the views are filled in.
  • async: To load and display views automatically.
  • transition: The transition allows us to set a default value for how the transition should happen; you can choose between slide (default), flip, fade, and show.

 

 

 2.routes :This section defines the routes with hashtags. “Routes” is basically an array of                       objects.These objects contain pattern, name, and target as its name-value pairs.

     "routes : [{
                   "pattern":"pattern1",
                   "name":"routername",
                   "target":"target1"
                  }]
  • pattern: defines the hashtag that needs to be added at the end of the URL when it is hit. pattern is basically URL part that Matches the route.
  • name: defines a unique name for the particular route.
  • target: defines the target which is defined in targets section.

 

3.target :This section defines the names of the views to be loaded when the route associated with it is hit.

     "targets" : {
                "target1":{
                     "viewName":"veiw1"
                     "viewId": "view1",
                     "viewLevel" : 1
                     }
                 }
      

A target defines the view that is displayed. It is associated with one or more routes or it can be displayed manually from within the app. Whenever a target is displayed, the corresponding view is loaded and added to the aggregation configured with the controlAggregation option of the control.

There are 5 types of Parameter routing 

1.String (Hardcoded) parameter

2.Mandatory parameter

3.Optional parameter

4.Query parameter

5.Rest as String parameter

 

String (Hardcoded) parameter

 

The pattern matches the hash exactly. For example, when a pattern is defined as product/settings, this pattern matches only if the hash is product/settings and no data is passed on to the events of the route.

 

Mandatory parameter

 

You can define mandatory parameters for the pattern by placing the parameter in curly brackets ({id}).

example, if you define the pattern product/{id}, the hashes product/5 and product/3 (where 3 and 5 are product IDs) match the pattern. The matched event handler gets 5 or 3 passed on with the key id in its arguments. But hash product/ does not match the pattern because the mandatory parameter is missing.

 

       {
          "name": "RouteView2",
          "pattern": "RouteView2/{parameterID}",
          "target":["TargetView2"]
        }

 

when we click on particular element in graph it is navigate to view 2  and passing data from one view to another view using mandatory parameter.

 

 

you can see the below image we got mandatory parameter data in URL and displaying that data in view.

 

 

Optional parameter

 

You can define optional parameters for the pattern by placing the parameter between colons (: parameter ID:).

For example pattern product/{id}/detail/:detailId: the detailId parameter is optional, whereas id is mandatory.

In optional parameter if you don’t pass data also it is navigate to next view because
data is optional.

Both hashes product/5/detail and product/3/detail/2 match the pattern.

 

      {
          "name": "RouteView2",
          "pattern": "RouteView2/:parameterID:",
          "target":["TargetView2"]
      }

Query parameter

 

The query parameter allows you to pass on queries with any parameter. A query parameter starts with ?, and you can either define it as mandatory (product{? query}) or optional (product:?query:).

The matched value will be converted into an object saved with the parameter name as the key when passed to the event handler.

Example:

The resume view contains four tabs However, when the user navigates to the resume page, only the first tab is displayed initially.

you could only navigate to an employee’s resume with the deep link webapp/index.html#/employees/3/resume. This will always select the first tab as implemented by the IconTabBar control. In order to open the page directly with a specific tab selected and to make the tabs bookmarkable, we add the ?query parameter to the URL pattern.

"routes":[
      {
       "pattern": "employees/{employeeId}/resume:?query:",
	   "name": "employeeResume",
	   "target": "employeeResume"
      }
    ]

This allows URLs like webapp/index.html#/employees/3/resume?tab=Projects where the query parameter defines which tab shall be displayed.

The :?query: parameter starts and ends with “:”, which means that it is optional. If you want to make it mandatory, you can use the {?query} syntax (everything in between {} is considered as being mandatory).

 

Query Parameter with mandatory

"routes":[
      {
       "pattern": "employees/{employeeId}/resume{?query}",
	   "name": "employeeResume",
	   "target": "employeeResume"
      }
    ]

 

Rest as String parameter

 

A parameter that ends with an asterisk (*) is called a “rest as string” parameter. Such a parameter matches as much as possible. It can be combined with the syntax of mandatory or optional parameters.

For example, a pattern product/{id}/:detail*: defines a mandatory parameter with the name id and an optional “rest as string” parameter with the name detail. It matches product/5/3 and product/5/detail/3/foo. The event handler gets 3 or detail/3/foo passed on with the key detail in its arguments.

Conclusion

We have seen complete process of  Routing with Parameters in SAPUI5 Application, by using routing with parameters we can pass data from one view to another view, it is Hash based navigation which is used at the runtime to change the URL of the particular screen.

Kindly leave any doubts or questions in the comments below.

Thanks and Regards

Anjum S Nadaf

Be the first to leave a comment
You must be Logged on to comment or reply to a post.