File Routing in UI5

by | Mar 29, 2021 | UI5 Programs

Preface – This post is part of the UI5 Programs series.

File Routing in UI5

SAP UI5 uses Routing concept to navigate among views (Pages). To enable routing, one needs to do specific changes in Manifest file and then perform navigation wherever required. In this article we will show both of these changes in detail.

How to perform File Routing in UI5

Changes in Manifest File

The very first change is required in Manifest file, here we will do two changes:

  1. Add Routes: It specifies the pattern, name of the route and the target. The pattern specifies what will be visible after the url. Like in below example, pattern will look something like this in URL: test.com/worklist
"routes": [{
    "pattern": "worklist",
    "name": "worklist",
    "target": [
        "worklist"
    ]
}]

Sometimes, it is required to pass some values too during navigation, from one page to other. In that case, the routes looks something like below. Here we are passing an ID during navigation. This ID looks something like this in URL: www.test.com/overview/{Id}

In case, passed ID is 10, then the URL will look like this: www.test.com/overview/10

"routes": [{
    "pattern": "overview/{Id}",
    "name": "overView",
    "target": [
        "overView"
    ]
}]
  1. Add Targets: Once we have added routes, each route point to a particular target. This target actually points out the right file for navigation. Here we will use the first route that we discussed above to reach our target view. The viewName mentioned below is actually pointing to the view that will open up, after navigation is performed. For both of the above routes, targets will look something like below, only the name, title and IDs will change.
"targets": {
    "worklist": {
        "viewName": "Worklist",
        "viewId": "worklist",
        "viewLevel": 1,
        "title": "{i18n>worklistViewTitle}"
    } }

Changes in Controller File

Once we have specified all our routes and target based on correct views, then we can perform navigation on click of a button or any elements. For that, on click a function is called from view. That function loads all the routing related configuration and then uses the name of the route to perform navigation.

For both of the above discussed routes, following are the codes;

  1. Simple Navigation

    // Get Router Info
    this.oRouter = this.getOwnerComponent().getRouter();
    this.oRouter.navTo("worklist ");
    
  2. Navigation with a value

    // Get Router Info
    this.oRouter = this.getOwnerComponent().getRouter();
    this.oRouter navTo("overview ", {
            Id: <to what ever value you might have fetched for navigation>
        });
    

Full Manifest Example

{
        "_version": "1.7.0",
        "sap.app": {
            "id": "${project.artifactId}",
            "type": "application",
            "resources": "resources.json",
            "i18n": "i18n/i18n.properties",
            "title": "{{appTitle}}",
            "description": "{{appDescription}}",
            "applicationVersion": {
                "version": "${project.version}"
            },
            "ach": "set-ach",
            "dataSources": {
                "mainService": {
                    "uri": <your_service>;v=0002/",
                    "type": "OData",
                    "settings": {
                        "odataVersion": "2.0",
                        "localUri": "localService/metadata.xml",
                        "annotations": [
                            "annotation0"
                        ]
                    }
                },
                "annotation0": {
                    "type": "ODataAnnotation",
                    "uri": "annotations/annotation0.xml",
                    "settings": {
                        "localUri": "annotations/annotation0.xml"
                    }
                }
            },
            "sourceTemplate": {
                "id": "sap.ui.ui5-template-plugin.1worklist",
                "version": "1.58.1"
            }
        },
        "sap.fiori": {
            "registrationIds": [],
            "archeType": "transactional"
        },
        "sap.ui": {
            "technology": "UI5",
            "icons": {
                "icon": "sap-icon://task",
                "favIcon": "",
                "phone": "",
                "phone@2": "",
                "tablet": "",
                "tablet@2": ""
            },
            "deviceTypes": {
                "desktop": true,
                "tablet": true,
                "phone": true
            }
        },
        "sap.ui5": {
            "resources": {
                "js": [],
                "css": [{
                    "uri": "css/style.css"
                }]
            },
            "rootView": {
                "viewName": "Test.TestApp.view.App",
                "type": "XML",
                "async": true,
                "id": "app"
            },
            "dependencies": {
                "minUI5Version": "${sap.ui5.dist.version}",
                "libs": {
                    "sap.ui.core": {},
                    "sap.m": {},
                    "sap.f": {},
                    "sap.ushell": {},
                    "sap.collaboration": {
                        "lazy": true
                    }
                }
            },
            "contentDensities": {
                "compact": true,
                "cozy": true
            },
            "models": {
                "i18n": {
                    "type": "sap.ui.model.resource.ResourceModel",
                    "settings": {
                        "bundleName": "Test.TestApp.i18n.i18n"
                    }
                },
                "": {
                    "dataSource": "mainService",
                    "settings": {
                        "defaultCountMode": "InlineRepeat"
                    },
                    "preload": false
                },
                "@i18n": {
                    "type": "sap.ui.model.resource.ResourceModel",
                    "uri": "i18n/i18n.properties"
                }
            },
            "services": {
                "ShellUIService": {
                    "factoryName": "sap.ushell.ui5service.ShellUIService",
                    "lazy": false,
                    "settings": {
                        "setTitle": "auto"
                    }
                }
            },
            "routing": {
                "config": {
                    "routerClass": "sap.m.routing.Router",
                    "viewType": "XML",
                    "viewPath": "Test.TestApp.view",
                    "controlId": "app",
                    "controlAggregation": "pages",
                    "bypassed": {
                        "target": [
                            "notFound"
                        ]
                    },
                    "async": true
                },
                "routes": [{
                    "pattern": "",
                    "name": "worklist",
                    "target": [
                        "worklist"
                    ]
                }, {
                    "pattern": "CustomerDataEntitySet/{objectId}",
                    "name": "object",
                    "target": [
                        "object"
                    ]
                }, {
                    "pattern": "CaseOverView/{ID1}/{ID2}",
                    "name": "overView",
                    "target": [
                        "overView"
                    ]
                }],
                "targets": {
                    "worklist": {
                        "viewName": "Worklist",
                        "viewId": "worklist",
                        "viewLevel": 1,
                        "title": "{i18n>worklistViewTitle}"
                    },
                    "object": {
                        "viewName": "Object",
                        "viewId": "object",
                        "viewLevel": 2,
                        "title": "{i18n>objectViewTitle}"
                    },
                    "overView": {
                        "viewName": "Overview",
                        "viewLevel": 3
                    },
                    "objectNotFound": {
                        "viewName": "ObjectNotFound",
                        "viewId": "objectNotFound"
                    },
                    "notFound": {
                        "viewName": "NotFound",
                        "viewId": "notFound"
                    },
                    "Overview": {
                        "viewType": "XML",
                        "viewName": "Overview"
                    }
                }
            }
        }
    }

 

Explanation

  • In case you plan to have the very first view like worklist above, then you don’t need to provide any pattern. It will open with initial URL of the website.
  • In case you want to fix what view will open initially, then you can define that as rootView above. In this particular case we initially launch the whole site via an App. Thus App is set as a root view. This App ultimately loads the views within itself.

Author

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.