SAPUI5 Tutorial with WebIDE. Part V. Navigation in SAPUI5 without Routers


Hope you are practicing the exercises we have been demonstrating in our Tutorial Series on SAPUI5. In our previous posts, we showed how to navigate from one view to other using Routers. Today we would show how to navigate without using Routers.

The idea for this post clicked us when one developer asked a question (in a WhatsApp group) how to navigate to two different Views using just one Click. As per his requirement, he can reach View 3 from View 1 and he can also reach View 3 from View 2. He needs to add just one Back button in View 3 and wants to go back to the right view when it is clicked. With the same click, he should either navigate to View 1 or View 2 depending on which screen he came from.

If you want the solution, scroll down directly to the end of this post and the solution is provided. Since we anticipate some freshers to read this post, therefore we would build up a dummy UI application (with no OData) and show in details how such scenarios can be handled.

Create a project.Free SAPUI5 Tutorials

Give the Root view name as we showed in our previous SAPUI5 articles.

Free HANA Training

I gave the id of the Root View as V_Main (need this id in Manifest Configuration).

Free Fiori Tutorial

Let us create three more views which would help us demonstrate our experiment today.

SAPUI5 Views

Create Views V_Source, V_Target_1 and V_Target_2

Change the default title of the Views for identification purpose.

Free Web Dynpro Tutorials

Go to Manifest and put the Default Configuration as below:

sapui5 manisfest file config

Add the Targets and the Routes.

Please note the manifest auto code generator wizard has some bug. Go to manifest Code Editor and do some corrections manually.
1. Add the Router Class.

2. Correct the Router name generated.

3. Check the Target definitions.

4. Go to Component File and initialize the Routers.

hash based routing

Let us test our App.

It goes to the Source View as we have embedded Source View to the Root View in the manifest file using the default (blank) pattern and stating the level in Target as 1.

Now let us put two buttons in the Source View. Button 1 will take to Target 1 and Button 2 will take to Target 2.

Create a new function to capture the Button events.

Let us see our Source View. It has two buttons but the buttons do not take us to the Targets. For obvious reason, as we did not write code to the GoToTarget_1/2 Functions.

Wondering how I got the two buttons vertically aligned? I used VBox container.

Write the below two lines of codes in the two methods. Give the Route name correctly.

Button 1 takes to Target 1

Button 2 takes to Target 2

Now let us add one Button in Target 1 View and when that button is clicked it should take us to Target 2.

Needless to tell you, add a new Function to the Press event.

Add the below line of codes in the Controller of Target 1.

Let us test again. When we hit Button 1 it takes to Target One. When we hit the Button in Target One, it takes us to the Target Two.

Now let us put Back Navigation button in the Target Views.

Make the Nav Button Property True.

In the Events section, create a new function.

Let us test it. The Back Navigation button appears and it takes us to the Source Screen.

Now let us put a Back Navigation button on the Target Two screen.

Now add an Event for the button.

Now comes the actual part of our article. This is what we wanted to show in this post. A user can reach to Target Two screen from V_Source and V_Target_1 views. But he wants only one Button to go Back to the same screen from where the user reached Target Two.

V_Source ->V_Target_2->V_Source
V_Target_1-> V_Target_2 -> V_Target_1

There might be multiple ways to handle this scenario and we can really think and make it complex. But the easiest solution we found was to go one screen back. If the previous view is Source view than it would take there and if the previous view is Target 1 then it should take us there.

For this, we need to use another library class called “sap/ui/core/routing/History” and FunctionHistory”.

Get the instance of the history and check the previous hash. If a hash is found, go one screen back, else take to the default first screen.

Let us test it one final time.
Scenario 1

Scenario 2

Hope we were able to explain the usefulness of this History Class. One button takes us to different screens/views based on the history. If you reach to a screen from multiples places, this History Class and function comes handy to take you back to the source. We call it Navigation without the Router. 🙂

If you GENUINELY like our articles then it would be a HUGE help if you shared, subscribed and liked us on facebook. It might seem insignificant, but it helps more than you might think.

Thank you very much for stopping by!!

Step by Step Tutorials on SAPUI5

Also, Check Step by Step Tutorials on SAP Fiori

We have a very active Telegram SAP Technical Group. Please join it using below link.
Telegram SAP Technical Discuss Group.

WhatsApp had the limitation of 256 members per group and we were finding a hard time syncing and maintaining information in multiple WhatsApp group. Therefore we have moved to Telegram as it can accommodate more than 10,000 users. Please join.


  1. HI,

    I love all your posts , i have a question regarding binding filter to pass into the service url ? How can this be done?



    oTable1.bindRows(“/ZORDER_ITEMSet”,undefined, [{path:’Vbeln’ , operator: ‘EQ’ , value1: ‘{myModel>/Vbeln}’}]); // this doesn’t work

    I’m using ODATA model here.

    Please let me know,


Please enter your comment!
Please enter your name here