Skip to Content
Author's profile photo Former Member

Demonstration code for Navigation and Routing in SAPUI5


     Navigation and routing turn out to be the important aspects in building a SAPUI5 application. It is a prescribe standards laid for code re-usability and better understanding of the code.

Below you could find out the simple SAPUI5 code,

fldr str.PNG                                                                                                                                                                                      

In index.html

  • Define the component Container
  • Specify the required libraries
  • Specify the required roots, this would be utilised through out the project, that is sap.ui.demo.


In Component.js

Component turn out to be the important aspect of the application, it behaves as a central hub for accessing the data’s in the json model and util data etc.,

Routing is defined with their specific views and their desired patterns within the metadata.

On running of this function, an init method is called, where in we instantiate the router and the app, in which the router calls its constructor and its matched handler present inside the MyRouter.

Component1.PNG                                                                        Component2.PNG                                                                         Component3.PNG                                                                                  

inside the MyRouter.js

Its an important part which is meant for routing the data in the url and to move on to the next view..

It contains the necessary logic  for showNavButton where in it is called back to its previous page along with the change in url.



  • This comes under i18n folder,
  • This properties contains the necessary titles required for the definition of any shell or master or detail.


In model.json file

  • It is the file which contains the data required to be displayed in the UI.
  • This file is present in the model folder.
  • This basically acts as the database.







and so on……………………………….

util contains the necessary details needs to access the data, it can be used for functionalities like date formatter etc.,

Inside view folder,

Here we define the necessary views and controllers which is to be displayed.

Inside view folder,

  • App view.js file contains the file which is called by the component.js
  • When ever we start running the application a view is called and its corresponding views whether its a master or a detail is displayed inside the app.
  • As we can see the “i18n>ShellTitle”, Its the alias name defined inside the component.js,  which in-turn calls the file and displays the necessary title defined inside the messageBundle.


Inside master.view.js       this contains the necessary information displayed in the master              



Inside Master.controller.js file,

  • When ever the master page is called in the app it calls router, loads the necessary details required, and it gets displayed in the view.
  • On click of some particular list, the router along with the details will be passed to the component through “this.router.navTo” method. (in line 37) along with the parameters which is to be displayed in the url.


The resultant execution would be as shown below,

Where in the necessary details is displayed in the master page which is getting loaded from the json. The detail page is called the Empty.view.js which doesn’t contains data hence its blank.


On click of any particular item in the masters page, moves on to the detail page.

Inside Detail.view.js

The detail view will display the necessary details which is clicked by the master view.


    detailview2.PNG        detailview3.PNG                                                                                           detailview4.PNG

Inside Detail.controller.js..

  • When we click the list in the master view it will be routed to


on click in the master page….


On Click of particular value inside the list in the master view, it will be routed to the Detail.view.js along with the change in the url pattern as shown above.

The pattern for the url is specified in the component.js file. we are specifically passing the contextid through navTo method from the master page.

Inside Empty.view.js

This page is displayed along with the master page.


Inside lineItem.view.js file..

On click of the particular Table in the detail page it is routed to this lineItem page.

lineitemview.PNG                                                                                                                   inside LineItem.controller.js


Further on click of the table present in the Detail.view.js it will be routed to the LineItem page along with the change in the url pattern as shown.



There is a nav back button written in this page where in on click of that particular button it will be routed to its previous page that is Detail page, with the change in the url. It is achieved through “oRouter.myNavBack” written inside the handleNavback event.(in Line 19 of LineItem.controller.js).

Hope this would be a useful blog who is new to sapui5.

Thanks and Regards,

Nagarjun NM

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Hi Nagarjun, thanks for the post.

      I am new to SAPUI5 i am trying to understand Routing and Navigation.

      You example looks great, there is any way you can provide the source code?

      Best Regards

      Silvio Canha

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hello Silvio,

      Have a look into the developer guide of SAPUI5 SDK - Demo Kit here you can find the complete details and its corresponding explainations in detail.

      Hope you enjoy coding in SAPUI5.

      Thanks & Regards,


      Author's profile photo Abhishek Sharma
      Abhishek Sharma

      Awesome Post Nagarjun... Thanks for sharing ..

      By any chance do you have a good reference link which I can get help with JS Views.. seems there are very less helps available fro JS Views.



      Author's profile photo Former Member
      Former Member

      Hi Nagarjun,

      Thank you so much for this tutorial. Could you share the codes via github or something. That will be a great help.

      Thanks and Regards,

      HMN Fiori

      Author's profile photo Agatha Yeung
      Agatha Yeung

      Is there alternative to navigation besides routing? What is the alternative to one-page webapp?

      Author's profile photo Trond Stroemme
      Trond Stroemme

      Hi Agatha,

      if all you want to do is string together a bunch of views, with easy navigation back/forth, you can do it this way:

      In your index.html file:


      sap.ui.localresources("view");     // Your view folder

      var app = new sap.m.App("myApp", {initialPage:"view0"});

      var view0 = sap.ui.view({id:"view0", viewName:"myApp.view.View0", type:sap.ui.core.mvc.Viewtyoe.XML});

      var view1 = sap.ui.view({id:"view1", viewName:"myApp.view.View1", type:sap.ui.core.mvc.Viewtype.XML});

      // and so on untill all views declared

      app.addPage(view0).addpage(view1).addPage(view2)... //etc... until all views added



      Then, in each of your view controllers, you implement code for the navigation buttons or other UI elements where the user triggers the navigation back/forth:

      //This is the code from View1, which is the second in my chain (after View0, before View2)

      onPressPrev: function(){

        var app = sap.ui.getCore().byId("myApp");



      onPressNext: function(){

        var app = sap.ui.getCore().byId("myApp");"view2");


      This should be an easy way to "string" views together and move forwards and backwards between them.

      Author's profile photo Former Member
      Former Member

      How can i solve this error"sap.demo.timeCart.Component");



          metadata: {

              routing: {

                  config: {

                      viewType: "XML",

                      viewPath: "timecart",

                      targetControl: "splitApp",

                      clearTarget: false,

                      transition: "slide"



                  routes: [


                          pattern: "",

                          name: "default",

                          view: "Category",

                          targetAggregation: "masterPages",

                          subroutes: [


                                 pattern: "",

                                 name: "welcome",

                                 view: "Welcome",

                                 targetAggregation : "detailPages"









          init: function() {






              //call createContent

              sap.ui.core.UIComponent.prototype.init.apply(this, arguments);


              this._router = this.getRouter();


              //initlialize the router

              this._routeHandler = new sap.m.routing.RouteMatchedHandler(this._router);






          createContent: function() {


              var oView = sap.ui.view({

                  id: "app",

                  viewName: "timecart.App",

                  type: "XML",

                  viewData: {component: this}



              var oModel = new sap.ui.model.json.JSONModel('mockdata/products.json');



              var data = {


                      items: []




              var oCartModel = new sap.ui.model.json.JSONModel(data);



              return oView;






      Author's profile photo Abhishek Sharma
      Abhishek Sharma

      Hi Gajendrasinh,

      You need to correct app_id splitApp which you are using in Config section of Routing is not available. There will be one file probabily with name (If you have created) App.view.xml which tells you what kind of App you want to have a simple app or a Split App you need to provide this id there please have a look to below Images.

      I am able to replicate this error as below:



      Hope this helps.



      Author's profile photo Mantri Shekar
      Mantri Shekar

      Hi Abhishek,

      Which item does not exists?

      Author's profile photo Abhishek Sharma
      Abhishek Sharma

      TargetControl name which you are giving as below splitApp

      config: {

                      viewType: "XML",

                      viewPath: "timecart",

                      targetControl: "splitApp",

                      clearTarget: false,

                      transition: "slide"


      and you are creating control as below with app

        var oView = sap.ui.view({

                  id: "app",

                  viewName: "timecart.App",

                  type: "XML",

                  viewData: {component: this}


      Check making them both same eighter app or splitApp.