Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 

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

 
1 Comment