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 2nd 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 2nd 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

To report this post you need to login first.

5 Comments

You must be Logged on to comment or reply to a post.

  1. wei wenzhi

    你好,

    我是一个新手,我们公司想要用你博客提到的方式开发,我有很多地方不清楚,请把源代码发我一份好吗,谢谢!

    我的邮箱wwzhi2010@163.com

     

    Hello,

    I am a novice, our company would like to use your blog mentioned in the way of development, I have a lot of places are not clear, please send me a source code, thank you!
    My mailbox wwzhi2010@163.com

    (0) 
  2. Daniel Ruiz

    hi Antonette,

    Good that you are creating small pieces of re-usable code.. there are at least a few approaches to uses, and while there is absolutely nothing wrong with the approach you followed, I’d like to point out that all your “applications” (Components) are loaded under the same “Core”, so you can easily use the Core’s EventBus to subscribe & unsubscribe to events.

    Make sure to use prefixes (perhaps your component namespace) so you don’t end up with clashes, pretty sure that will be more effective in terms of maintenance & in terms of performance over querying the storage with an interval function.

     

    Cheers,
    Dan.

    (0) 
  3. Punith 032

    Hi Antonette,

    Good to know this reusable stuff and great for you to blog it, however could you help to know how the same reusable stuff can be managed considering I have a router with a pattern for my first app and the same is required to be loaded(reused) in the 2nd app.

    Regards,

    Punith

    (0) 

Leave a Reply