Preface – This post is part of the UI5 Programs series.
Table of Contents
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:
- 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"
]
}]
- 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;
- Simple Navigation
// Get Router Info this.oRouter = this.getOwnerComponent().getRouter(); this.oRouter.navTo("worklist "); - 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.
0 Comments