Skip to Content
Technical Articles
Author's profile photo Love Arora

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%20architecture%20design%20in%20SAP%20UI5%20Application

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%20Structure

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%20Setup

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

 

Assigned Tags

      1 Comment
      You must be Logged on to comment or reply to a post.
      Author's profile photo Boghyon Hoffmann
      Boghyon Hoffmann

      Thank you for sharing your thoughts. Just a small side note: subroutes is deprecated since 1.28. You’ll have to use parent instead.