Technical Articles
How to modularize and re-use the various modules using Sub Routes (Navigation) in SAPUI5
Introduction
While developing and designing the vast scope and complex SAPUI5 apps, developers usually don’t think about architecture on UI side but with time when the number of modules increases or line of code (loc) increases then the situation is difficult to manage, understand and re-structure the code from scratch or develop the new code.
In this blog post, I have designed an architecture to have complete modularization along with re-using the components and implemented the routing of different modules using routes and sub-routes.
For most of the use cases, the existing documentation is sufficient, but the moment we have to design the architecture for SAPUI5 complex application, below mentioned steps will be a good solution to go with.
Architecture Design
Implementing architecture design in SAPUI5 Application
In the above design, there can be 1..n different modules which can be separated adhering to Separation of Concerns principle based on business use-case or based on role and responsibility.
For example: While designing the SAPUI5 application, according to business requirements (banking domain) modules can be identified as net banking management, credit card management, loan management etc.
Environment Setup
- SAPUI5 version: <Any Latest Version>
- IDE: Web IDE full-stack on SAP Cloud Platform
Application Structure
Application Structure
The above modules are developed adhering to the architecture defined in the above diagram.
Now in the below screenshot, you can see the implementation of Facade of Module 1 is there having Module 1 separate App to handle all views & controllers and their events/actions under Module 1 App.
Facade Setup
The re-usable code for the whole application can be controlled via Application Facade. Similarly, reusable code can be managed at the module level as well.
Routing & Sub Routing
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"async": true,
"controlAggregation": "pages",
"controlId": "APP",
"viewPath": "ui.view",
"clearControlAggregation": false
},
"routes": [
{
"name": "adminModule",
"target": [
"MODULE1_FACADE"
],
"subroutes": [
{
"pattern": "",
"name": "module1",
"target":[
"MODULE1_VIEW1"
]
},
{
"pattern": "module1/view2",
"name": "view2",
"target":[
"MODULE1_VIEW2"
]
},
{
"pattern": "module1/view3",
"name": "view3",
"target":[
"MODULE1_VIEW3"
]
},
{
"pattern": "module1/viewn",
"name": "viewn",
"target":[
"MODULE1_VIEWN"
]
}
]
}
],
"targets": {
"MODULE1_FACADE":{
"viewType": "XML",
"transition": "slide",
"clearControlAggregation": false,
"viewPath": "ui.view.module1",
"controlAggregation": "pages",
"controlId": "MODULE1_APP",
"viewId": "MODULE1_CONTAINER",
"viewName": "MODULE1_CONTAINER"
},
"MODULE1_VIEW1": {
"viewType": "XML",
"transition": "slide",
"clearControlAggregation": false,
"viewPath": "ui.view.module1",
"controlAggregation": "pages",
"controlId": "MODULE1_APP",
"viewId": "VIEW1",
"viewName": "VIEW1"
},
"MODULE1_VIEW2": {
"viewType": "XML",
"transition": "slide",
"viewPath": "ui.view.module1",
"clearControlAggregation": false,
"controlAggregation": "pages",
"controlId": "MODULE1_APP",
"viewId": "VIEW2",
"viewName": "VIEW2"
},
"MODULE1_VIEW3": {
"viewType": "XML",
"transition": "slide",
"viewPath": "ui.view.module1",
"clearControlAggregation": false,
"controlAggregation": "pages",
"controlId": "MODULE1_APP",
"viewId": "VIEW3",
"viewName": "VIEW3"
},
"MODULE1_VIEW4":{
"viewType": "XML",
"viewPath": "ui.view.module1",
"clearControlAggregation": false,
"controlAggregation": "pages",
"controlId": "MODULE1_APP",
"viewId": "VIEWN",
"viewName": "VIEWN"
}
}
}
Using the SAP Routing and Navigation in manifest.json, you can manage the routing throughout the Application using sub-routes.
Routing Pattern
https://<HOST>/#/parent/module1/view
https://<HOST>/#/parent/module2/view
Now, adhering and implementing the architecture in SAPUI application makes it easier for any application to develop, understand, maintain as well as upcoming product growth challenges.
I hope the above design will help to design the applications better!
Regards,
Love Arora
Thank you for sharing your thoughts. Just a small side note:
subroutes
is deprecated since 1.28. You’ll have to useparent
instead.