Create a SAPUI5 Project in eclipse:

/wp-content/uploads/2016/02/1_891727.png

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:

/wp-content/uploads/2016/02/2_891761.jpg

Now go to View1 and add the indicated code:

/wp-content/uploads/2016/02/3_891762.png

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

/wp-content/uploads/2016/02/4_891763.png

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

/wp-content/uploads/2016/02/5_891764.png

/wp-content/uploads/2016/02/6_891765.png

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

/wp-content/uploads/2016/02/7_891766.png

In View2 controller add the method “ongoBack”:

/wp-content/uploads/2016/02/8_891767.png

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.

/wp-content/uploads/2016/02/9_891768.png

Separate JS file contains routing information:

Screenshot.jpg

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

/wp-content/uploads/2016/02/11_891770.png

/wp-content/uploads/2016/02/12_891771.png

Now save your application and test.

/wp-content/uploads/2016/02/13_891772.png

/wp-content/uploads/2016/02/14_891773.png

To report this post you need to login first.

Be the first to leave a comment

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

Leave a Reply