Demonstration code for Navigation and Routing in SAPUI5

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,

                                                                                                                                                                                      

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.

                                                                                                                                                                                                                                   

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.

                                                                     

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.

                                                                                                        

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 messageBundle.properties 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.

                                                                                                      

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.

                                                                                                                   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