SAPUI5 How To: Reuse parts of a SAPUI5 application in other/multiple SAPUI5 applications

Hi guys

This is something that I thought was going to be very complicated, turned out it was quite simple (if you know how).

Scenario:

So let’s say we have a bunch of code that we know we are going to use in multiple apps. In my case we have multiple apps that need supporting documents uploaded to DMS. So this piece of (not so small and very complicated) code appears in all the apps: Documents

Maintenance is a headache because you have to apply the same change to every app. So how can we include this Documents “fragment” in all of our other apps and only have to make changes to a single source that will reflect in all apps?

The answer: (choir of angels in the background) . . . . . Component Containers.

So what is a Component Container? According to saphelp:

“The ComponentContainer is a SAPUI5 control that contains a component and can be used at any place within the SAPUI5 control tree. The ComponentContainer separates the application and the embedded component. Technically, it uses a UIArea to avoid a nested control tree and to separate the eventing of the component’s user interface and the outer application. This separation ensures that the component is mostly self-contained and to avoid side effects from the outer application as well as the direct access via the control tree. In addition to this, a property on the ComponentContainer can be used to forward the model from the outer application into the embedded component.”

In english: It enables you to run one (or more) SAPUI5 application inside another SAPUI5 application, how cool is that?! I’m going to show you a simplified way of achieving this by using these Component Containers. You can read more here: Using UI Components in Applications

So lets start!

Create a new functioning app that only contains the part you need to reuse in your other apps. In my case, this is what my new app looks like:

And it’s fully functional:

So we have created our project as “EHSAttachments” and published the BSP to the ABAP server (Gateway).

Now I have created a 2^nd app for demonstration purposes. We will run “EHSAttachments” inside this app: “TestReuse”

And then here comes the magic. Simply put the following line of code in your 2^nd app’s (TestReuse) Component init function:

jQuery.sap.registerModulePath("ehsattachments", "../zehsattachments");

And in your second app’s view, simply do it by using the Component Container tag:

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" id="mainViewId" controllerName="testreuse.controller.Main" xmlns:html="http://www.w3.org/1999/xhtml">	
<Page title="{i18n>appTitle}">
		<content>
			<core:ComponentContainer
			    name="ehsattachments"			    
			    manifestFirst= "true"
			    component="zehsattachments">
			</core:ComponentContainer>
		</content>
	</Page>
</core:View>

And there you go!

Now the trick might come in when you have to start passing parameters between the 2 apps. This could be done by using “jQuery.sap.storage” to access variables stored in the default session storage. API: jQuery.sap.storage

For more info on reusing controls, check out Phillip’s blog: How to create a custom UI5 control

Antonette