Page Navigation in SAPUI5/SAP Fiori using Routing

27
7969

Hello everyone, in this SAPUI5 tutorial we will learn about page navigation in SAPUI5/SAP Fiori using Routing. Lets get started.

[adsenseyu2]

What is Routing in SAPUI5/SAP Fiori

Routing is a mechanism used to navigate between views in SAPUI5/SAP Fiori applications. There are two main routing classes used for this purpose, they are

  • sap.ui.core.routing.Targets
  • sap.ui.core.routing.Route

In this tutorial we will learn how to use sap.ui.core.routing.Targets.

SAPUI5 Version Needed

1.28

Step-by-Step Procedure

1. Create a new SAPUI5 Application Project in Eclipse IDE.

New Application Project for SAPUI5
New Application Project for SAPUI5

2. In the Create a New View window, provide the initial view name and choose the type of view as XML.

Create a New View
Create a New View

3. Now application structure will like below.

Application Structure
Application Structure

4. As we require two views to demonstrate view navigation, create two views in the same way.Create a new folder to move all views into this folder, as this a best practice to have all views in one place.

5. Now the application structure will look like below.

Project Structure

6. Go to the First view and add Text , a button to navigate to second view and Go to the second view, add Text.Below is the  code for both First and Second view.

First.view.xml

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m" controllerName="demorouting.views.First">
	<Page title="Page-1">
		<content>
			<Text xmlns="sap.m" text="I am in Page-1">
			</Text>
			<Button xmlns="sap.m" text="Go to Page-2" press="onPress">
			</Button>			
		</content>
	</Page>
</core:View>


Second.view.xml

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
	xmlns="sap.m" controllerName="demorouting.views.Second">
	<Page title="Page-2" showNavButton="true" navButtonType="Back" 
                             navButtonPress="onBack">
		<content>
			<Text xmlns="sap.m" text="I am in Page-2">

			</Text>
		</content>
	</Page>
</core:View>

7. The configuration of the routing in maintained in a separate file called Component.js.So create a new file with the name “Component.js” and copy the below code.

jQuery.sap.declare("demorouting.Component");
sap.ui.core.UIComponent.extend("demorouting.Component", {

	metadata : {
		rootView : "demorouting.views.MainView",
		routing : {
			config : {
				targetsClass : "sap.m.routing.Targets",
				viewPath : "demorouting.views",
				controlId : "rootControl",
				controlAggregation : "pages",
				viewType : "XML"
			},
			targets : {
				page1 : {
					viewName : "First",
					viewLevel : 0
				},

				page2 : {
					viewName : "Second",
					viewLevel : 1
				}
			}
		}
	},

	init : function() {
	    sap.ui.core.UIComponent.prototype.init.apply(this, arguments);
	    this.getTargets().display("page1");
	},

});


8. Component.js file contains routing information with possible target of navigation.

9. As we have defined the routing, next would be implementing the “onPress” event on the first view to navigate to second view and “onPress” event in the second view to come back to first view. Go the controller of the First view and copy the below code.

//	onInit: function() {
//
//	},
	
	onPress: function(){
		this.getOwnerComponent().getTargets().display("page2");
	},
//	onBeforeRendering: function() {
//
//	},
//	onAfterRendering: function() {
//
//	},
//	onExit: function() {
//
//	}

});
//	onInit: function() {
//
//	},
	
	onBack: function(){
		this.getOwnerComponent().getTargets().display("page1");
	},
//	onBeforeRendering: function() {
//
//	},
//	onAfterRendering: function() {
//
//	},
//	onExit: function() {
//
//	}

});

10. display( ) method in the routing class is used to call the next page.

11. Main View and its controllers is code is below. Main view just contains the App, its kind of holder for all the views.

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
		controllerName="demorouting.views.MainView">
	<App xmlns="sap.m"  id="rootControl"/>
</core:View>

12. Final SAPUI5 project structure will look like below.

Project Structure
Project Structure

12. Save the project and run the index.html file to see the output. You should see First View with a text and button like below.

 

Congrats you have successfully learned about Page Navigation in SAPUI5 using Routing.

Please stay tuned to us for more SAPUI5 tutorials.Please feel free to comment and let us know your feedback. You feedback will keep us alive.

like-128

  • Wes

    Thank you ..its very useful !

    • AdminSAPLearners

      Hi Wes,

      Good to hear that. Thank you

      Thanks,
      Admin

      • Srinivasan Ramalingam

        Hi,

        I have implimented the above method at my project, initial page is comming but when i click for next page navigation, nothing happens not even error.

        Please help.

        Thanks & Regards,
        Srinivasan R.

  • Shekar Mantri

    Hi,
    Iam newbie for SAP UI5 as far as i know that with help of routing it should change the url along with the page.But in your example url is not changing .Can you please explain is my assumption wrong or the url wont change?
    Other thatn that am also curious to know the difference between Routing and Navigation

    • AdminSAPLearners

      Hi Shekar,

      if you want to change the URL when you navigate you have to use other router class – sap.ui.core.routing,route.

      Thanks,
      Prakash

  • sin

    Hello,
    thanks for this turorial, I have a question, we should not insert any thing in index.html?
    because when I run it, It is an empty page.

    • vardan

      Hi Sin,
      I am also facing the same issue. could you please help me what should be the content of index.html page?

      • sin

        Hi Vardan,

        I have added this to my index file and it works for me.

        sap.ui.getCore().attachInit(function() {

        new sap.ui.core.ComponentContainer({

        name : “routing” //the path of your Component.js file

        }).placeAt(“content”);

        });

  • Shekar Mantri

    Hello,
    I Followed your tutorial to implement routing am getting the below error this.getOwnerComponent is not a function
    am using js view

    • vardan

      Hi Shekar,

      I also got the same issue. Could you please help me how you resolved it.

      • Shekar Mantri

        Please share your code if possible so that i might help you.Because actually i got the same issue earlier and i faced many issues , so am unable to remind what actually i done.
        mantrishekar951@gmail.com.Please share your code to this mail

        • arun kaitha

          Hi Shekar,

          Can you please let me know the fix , even i am facing the same issue .

          Thanks,

          • Shekar Mantri

            which viw you are using/JS View or XML?

          • arun kaitha

            XML Views as described in tutorial

          • Shekar Mantri

            Could you please share the whole project ti my mail so that i can debug and let you.As i done it long back am unable to recollect the exact issue.

  • AdminSAPLearners

    Hello all.

    Do reach us through skype id – saplearnershub if you still have any doubts.

    Thanks,
    Prakash

  • Hakan Şahin

    Hello,
    I got error on this line >>
    this.getOwnerComponent().getTargets().display(“pageAracTalep”);

    Cannot read property ‘getTargets’ of undefined

    • TeamSAPLearners

      Hi Hakan,

      Could you please check your UI5 version because Targets are introduced in version 1.28

      Thanks,
      Prakash

      • Hakan Şahin

        Hi,

        My ui5 version is 1.34.2
        What can i use for routing? I couldn’t find.

        Thanks.

        • TeamSAPLearners

          Hi,

          Have you created “component.js” file in your project. Can you please share you project so that i can see what is the error.

          Thanks,
          Prakash

      • Parna das

        I am getting the following error:

        sap-ui-core.js:88 Uncaught Error: failed to load ‘sap/ui/PageRoutingDemo/wt/Component/Component.js’ from ./Component/Component.js: 404 – Not Found

        Not able to get wats wrong, please get back to me.

  • Rekha Malavathu

    Hi Prakash,

    Can you please share the code for the Main controller?

    Regards,
    Rekha

  • arun kaitha

    Hi TeamSAPLearners ,

    Can you please share the sample code which is working for you . When i try to run from eclipse , getting error that Component.js file not able to load .

    Thanks,
    Arun

  • Parna das

    Hi Experts,

    I am a beginner in SAP UI5, I am facing problem in the Index.html page to incorporate the direct view calls, please share the index.html.

  • Rekha Malavathu

    Hi Prakash,

    Can you please share the code for the MainView.controller.js?

  • Max

    Hi to all. I’m new in sap ui 5.
    This tutorial don’t work.
    There is my error:

    http://localhost:56799/resources/sap-ui-core.js Failed to load resource: the server responded with a status of 404 (Not found: http://localhost:8080/file/orionLocal-OrionContent/demoRouting/webapp/views/MainView.view.xml)

  • Avinash Dey

    Hi, i tried your steps but if i am writing the code in Mainview then only i am getting the text and button.but if i am writing the code in First,view for text and button then i am getting blank page, Please suggest