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
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,
In model.json file
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,
Inside master.view.js this contains the necessary information displayed in the master
Inside Master.controller.js file,
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..
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
8 | |
7 | |
5 | |
4 | |
4 | |
4 | |
4 | |
3 | |
3 | |
3 |