Navigation and Routing Simple Example SAPUI5

Create a SAPUI5 Project in eclipse:

Create views you want to navigate in “viewnavigation” folder. Here I have created View2 as the view that will be navigated from View1.

Now go to your index.html file and add the following code:

Now go to View1 and add the indicated code:

Go to controller of View1 and write the “onNext” method:

Now you can navigate to View2 by clicking “Next” Button:

Now we will navigate back to View1 from View2: Go to View2 and add the indicated code.

In View2 controller add the method “ongoBack”:

Now you can navigate from View1 to View2 and vice versa.

This type of navigation will not change the url in the browser. So we will go for routing to add extra information in the url.

Routing:

Add the following code in Index.html and we will create the router in separate JavaScript file.

Separate JS file contains routing information:

Now put down the routing code in “onNext” and “ongoBack” of View1 and View2 controller.

Now save your application and test.