Hello,

     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.

index.PNG                                                                        

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.

MyRouter.PNG                                                                     

In messageBundle.properties,

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

messageBundle.PNG                                                                                                        

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.

demojson1.PNG

demojson2.PNG

demojson3.PNG

demojson4.PNG

demojson6.PNG

demojson7.PNG

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 messageBundle.properties file and displays the necessary title defined inside the messageBundle.

Appview.PNG                                                                                    

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

masterview.PNG                                           

masterview2.PNG                                                                                                         

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.

mastercontroller.PNG                                                                        

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.

masterdetail.PNG

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.

detailview.PNG

    detailview2.PNG        detailview3.PNG                                                                                           detailview4.PNG

Inside Detail.controller.js..

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

detailcont.PNG                                                                      

on click in the master page….

masterdetail1.PNG

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.

Emptyview.PNG                                                                                                          

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

lineitemctrl.PNG     

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.

masterdetailfinal.PNG

                                                                 

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

To report this post you need to login first.

10 Comments

You must be Logged on to comment or reply to a post.

  1. Silvio Canha

    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

    (0) 
  2. 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.

    Thanks-

    Abhishek

    (0) 
  3. HMN Fiori

    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

    (0) 
    1. 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:

      <script>

      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

      app.placeAt(“content”);

      </script>

      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”);

                app.to(“view0”);

      },

      onPressNext: function(){

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

      app.to(“view2”);

      },

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

      (0) 
  4. Gajendrasinh Zala

    How can i solve this error

    jQuery.sap.declare(“sap.demo.timeCart.Component”);

    sap.ui.core.UIComponent.extend(“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() {

           

            jQuery.sap.require(“sap.m.routing.RouteMatchedHandler”);

            jQuery.sap.require(“sap.ui.core.routing.HashChanger”);

           

           

            //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);

            this._router.initialize();

           

           

        },

       

        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’);

            oView.setModel(oModel,’products’);

           

            var data = {

                   

                    items: []

                   

            }

           

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

            oView.setModel(oCartModel,’cart’);

           

            return oView;

           

        }

       

    })

    Untitled.png

    (0) 
    1. 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:

      controlID.PNG

      appView.PNG

      Hope this helps.

      Thanks-

      Abhishek

      (0) 
    1. 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.

      Thanks-

      Abhishek

      (0) 

Leave a Reply