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