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
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
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,
Nagarjun
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
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
Is there alternative to navigation besides routing? What is the alternative to one-page webapp?
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.
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;
}
})
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.
Thanks-
Abhishek
Hi Abhishek,
Which item does not exists?
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