Register Login

Page View Navigation in SAPUI5/Fiori using Routing Technique

Please follow the step by step procedure with proper diagrams in order to navigate from one page view to another page view in SAP UI5/FIORI using routing technique

Step 1) First create a new view and provide text/any screen element and adjust code as shown below:

Right click your view folder of your project
click on new SAP UI5 VIEW with type XML
provide view name for ex: third

<Page title="Title" navButtonPress="onNavBack" showNavButton="true">
<Text text="THIS IS THIRD VIEW" />


Step 2) Open manifest.json file and open with "App Descriptor Editor"
then open Routing Tab:
and click on ( + ) Routes
provide Name = third
provide pattern = UserSet/{objectId}
CLICK ON Target , and provide Target = third

Step 3) Now open Manage Targets: click on add (+)

Provide target name = third
provide view name = third
provide view id = third
provide view level = 3
provide view type = XML

Note : After saving the Routing code is updated under manifest.json file

Step 4) In secondview ( i,e object view.xml ) , create button and assign gotothirdEH eventhandler

<Button text ="goto third View" press="gotothirdEH" />

Step 5) Now open objectview related controller and add the code shown below:

gotothirdEH : function (oEvent)

_showObject : function (oItem)
/* this.getRouter().navTo("third", {
objectId: oItem.getBindingContext().getProperty("Userid")



Step 6) Open third.controller.js and adjust below code under top section just by adding History parameter

], function(Controller, History) {
"use strict";

Step 7) Open third.controller.js and implement back functionality

onNavBack : function()
var sPreviousHash = History.getInstance().getPreviousHash(),
oCrossAppNavigator = sap.ushell.Container.getService("CrossApplicationNavigation");
if (sPreviousHash !== undefined || !oCrossAppNavigator.isInitialNavigation())
} else {
this.getRouter().navTo("object", {}, true);


Note : important lines which we need to observe
this.getRouter().navTo("third", {}, true);