Routing and Navigation

Routing defines the mapping between URL patterns and views in the application and is configured in manifest.json.
Navigation is the process of programmatically moving between those routes using logic defined in the controller.

Different types of Routing

1. Static Routing

Static routing in UI5 is a routing mechanism where navigation happens without passing any parameters, and a fixed view is loaded based on a predefined URL pattern.
It is triggered automatically on app load.

The URL is fixed and looks something like below -

URL example -

#/home
#/about

How to Implement ..?

We will create a View (View1) that contains a button, and upon clicking that button, the application will navigate to another view called (View2).

Step 1 - Define View1

You can use your default or root view (in our case, its View1 which created by default while creating the applicaiton).

Create a button that navigates to View2 and attach an event handler to trigger the navigation.

View1.view.xml

<Panel>
    <VBox id="view1Vbox1">
        <Text id="view1Text1" text="{i18n>view1Text1}" />
    
        <Text id="view1Text2" text="This is view 1, click the below button to Navigate to View2." />

        <Button id="view1Btn1" text="Move to View2" press="moveToView2" />
    
    </VBox>
</Panel>

Step 2 - Define View2

Create another view (View2) on your view folder like below -

View1.view.xml

<view2:View
    controllerName="fiori.ui5app.controller.View2"
    xmlns:view2="sap.ui.core.mvc"
    xmlns="sap.m"
>
    <Page id="view2Page" title="{i18n>title}" >
        <Panel>
            <VBox>
                <Text id="view2Text1" text="This is View2" />

                <Button id="view2Btn1" text="Move to View1" press="moveToView1" />
            </VBox>
        </Panel>
    </Page>
</view2:View>

Step 3 - Define Routes and Target on manifest.json

Since routes are defined in the manifest.json file, we will add View2 to the routes array of manifest.json and assign a corresponding target to it.

You can also observe that the route for our root view (RouteView1) is already defined there.

In our case, we have created a second view named View2, and we will define its route with the name SecondView like below -

manifest.json

{
    "name" : "SecondView",
    "pattern" : "second",
    "target" : "SecondViewTarget"
}

And since we have given target name as SecondViewTarget, so we will define the same on targets object like below -

manifest.json

"SecondViewTarget" : {
    "id": "view2Page",
    "name": "View2",
    "transition" : "fade"
}

Here -

view2Page is the id of Page on view2.
View2 is the name of the file.
Transition defines how the view will change.

So the manifest.json routes and target will look like below -

manifest.json

"routes": [
    {
        "name": "RouteView1",
        "pattern": "",
        "target": [
        "TargetView1"
        ]
    },
    {
        "name" : "SecondView",
        "pattern" : "second",
        "target" : "SecondViewTarget"
    }
],
"targets": {
    "TargetView1": {
        "id": "View1",
        "name": "View1"
    },
    "SecondViewTarget" : {
        "id": "view2Page",
        "name": "View2",
        "transition" : "fade"
    }      
}

Step 4 - Define Navigation logic on Controller file

Now, we will define the button logic of Controller file of View1 for Navigation.

View1.controller.ts

public moveToView2(oEvent : any) : void {
    console.log('Navigate to View2 from View1');
    const router = UIComponent.getRouterFor(this);
    router.navTo("SecondView");         // as defined on manifest.json
}

Make sure to import the Module -

View1.controller.ts

import UIComponent from "sap/ui/core/UIComponent";

And we can define a similar logic on view2 controller for button defined on view2 -

View2.controller.ts

public moveToView1(): void {
    console.log('Navigate to View1 from View2');
    const router = UIComponent.getRouterFor(this);
    router.navTo('RouteView1');         // as defined on manifest.json
}

2. Parameterized Routing (Dynamic Routing)

In Parameterized Routing, we pass the parameters in the URL.

The URL is variable and looks something like below -

URL example -

/Employee/104
/Employee/103
/Employee/110

In this case, we configure the parameter on the pattern of the route on routes array on manifest.json like below -

manifest.json

"routes": [
    {
        "name": "RouteView1",
        "pattern": "",
        "target": [
        "TargetView1"
        ]
    },
    {
        "name" : "EmployeeView",
        "pattern": "Employee/{empId}",
        "target" : "EmployeeTarget"
    }
]

targets section will be similar to static route itself like -

manifest.json

"targets": {
    "TargetView1": {
        "id": "View1",
        "name": "View1"
    },
    "EmployeeTarget" : {
        "id" : "EmployeePage",
        "name" : "Employee",
        "transition" : "slide"
    }      
}

And we will pass the parameter (in our case empId) on the controller logic like -

View1.controller.ts

public moveToView2(oEvent : any) : void {
    console.log('Navigate to EmployeeView from View1');
    const router = UIComponent.getRouterFor(this);
    router.navTo("EmployeeView", {
        empId : 103
    });         // as defined on manifest.json
}

3. Query Parameter Routing (Dynamic Routing)

In Query Parameter Routing, parameters are passed as query strings in the URL.

The URL is variable and looks something like below -

URL example -

/Employee?id=103&name=User3
/Employee?id=105&name=User5

In this case, we configure the query parameter on the pattern of the route on routes array on manifest.json like below -

manifest.json

"routes": [
    {
        "name": "RouteView1",
        "pattern": "",
        "target": [
        "TargetView1"
        ]
    },
    {
        "name" : "EmployeeDetails",
        "pattern": "Employee:?query:",
        "target" : "EmployeeDetailsTarget"
    }
]

targets section will be similar to static route itself like -

manifest.json

"targets": {
    "TargetView1": {
        "id": "View1",
        "name": "View1"
    },
    "EmployeeDetailsTarget" : {
        "id" : "EmployeePage",
        "name" : "Employee",
        "transition" : "slide"
    }      
}

And we will pass the query parameter on the controller logic like -

View1.controller.ts

public moveToView2(oEvent : any) : void {
    console.log('Navigate to EmployeeView from View1');
    const router = UIComponent.getRouterFor(this);
    router.navTo("EmployeeDetails", {
        query: {
            id: 103,
            name: User3
        }
    });         // as defined on manifest.json
}

How to Navigate Back using back button ..?

We can enable the Back button on Page by defining showNavButton and navButtonPress properties like -

View2.view.xml

<Page id="view2Page" title="{i18n>title}" showNavButton="true" navButtonPress="onNavBack" >

And can define its logic on respective controller like -

View2.controller.ts

//  Navigation Back button logic 
public onNavBack(): void {
    var oHistory = History.getInstance();
    var sPreviousHash = oHistory.getPreviousHash();

    if (sPreviousHash !== undefined) {
        window.history.go(-1);
    } else {
        (this.getOwnerComponent() as UIComponent).getRouter()?.navTo("home", {}, true);
    }
}

And make sure to import History module.

View2.controller.ts

import History from "sap/ui/core/routing/History";

!!!! Done !!!!