SAPUI5 Tutorial. Part V. Navigation in SAPUI5 without Routers

Share on Facebook11Share on LinkedIn8Tweet about this on TwitterShare on Google+1
Please Share!!

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!!

Also, check our popular step by step tutorials on some of the important topics of SAP ABAP.

1. ABAP for SAP HANA Tutorials
2. ABAP Web Dynpro Tutorials
3. GOS Tutorial
4. OOPs ABAP Tutorial
5. HANA Tutorial
6. SAP Netweaver and OData Tutorial
7. SAP Adobe Form Tutorial
8. SAP Fiori Tutorial
9. SAPUI5 Tutorial
10. SAP Screen Personas Tutorials

Share on Facebook11Share on LinkedIn8Tweet about this on TwitterShare on Google+1
Please Share!!

Be the first to comment on "SAPUI5 Tutorial. Part V. Navigation in SAPUI5 without Routers"

Comment, Criticism, Opinion, Feedback. Please do not hold back. Share your Thoughts!!