Views navigation in SAP UI5 for Desktop applications

This blog explains how to implement navigations between UI5 (desktop) views. There are few other ways to implement the navigation but I feel this is much more simple and easy way. I am gonna focus on what need to be done exactly rather than explaining each and every step from the scratch. So let’s get it started!!

Prerequisites

1. Eclipse IDE
2. UI5 Tool Kit installed
3. Google Chrome

Steps

1. Create a new SAP UI5 project in Eclipse (Desktop type)
2. Create three Javascript views (MainView, FirstView, SecondView).

IMP NOTE : While creating unique ids for the UI elements use this.createId(“”) method since this will create unique ids dynamically and to access any ui element with its unique id in its controller, then make sure that you pass the controller reference while calling a function (Ex: { press : [oController.function,oController] } and you can access the ui element properties by this.byId("unique_id").getValue())

    Index.html

   MainView.view.js

    FirstView.view.js

SecondView.view.js

  Now create functions in the controllers as below

  MainView.controller.js

1. loadHomePage()    - which loads content of MainView (Panel content) by removing the existing content of MainPanel and the adding the MainView’s content (Panel)
2. loadFirstPage()       - which loads content of FirstView  (Panel1 content) by removing the existing content of MainPanel and then adding the FirstView’s content (Panel1)
3. loadSecondPage()– which loads content of SecondView (Panel2 content) by removing the existing content of MainPanel and then adding the SecondView’s content (Panel2)

Here the logic is simple, the above three functions in MainView controller will remove the current content of MainPanel  and will keep adding the next screens content dynamically. And these functions are called on every button press to navigate to the other view

   FirstView.controller.js

1. homePage()    - calls loadHomePage() function of MainView controller and this is called when Go to Home Page button is clicked
2. secondPage()– calls loadSecondPage() function of MainView controller and this is called when Go to Second Page button is clicked

    SecondView.controller.js

1. homePage()    - calls loadHomePage() function of MainView controller and this is called when Go to Home Page button is clicked
2. firstPage()     –  calls loadFirstPage() function of MainView controller and this is called when Go to First Page button is clicked

This is how it works

     That’s it!! If everything is in place then it’s time to run the application

     Happy Coding

     Cheers!

     Samba