Skip to Content

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.

19 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) 
      1. Punith 032

        Hi Antonette,
        Firstly, thanks for the reply..,

        Here it goes.., Let’s say the calling component (EHSAttachments->in your case) has multiple view assigned with a pattern(route), if it needs to be reused in another app(TestReuse-> in your case) view, how to handle the scenario ?

        Regards,
        Punith

         

         

        (0) 
        1. Antonette Venter Post author

          Hi Punith

          That’s a good question. I’ve only used this concept with simple controls instead of complete applications using a router so I don’t know what the behaviour would be.

          Please let us know what you find

          Regards

          Antonette

          (0) 
  4. Mike Doyle

    Thanks for sharing, Antonette.  I think sharing via Component containers is very important yet it isn’t documented well or written about very often.  Not only does your approach here save coding it also makes things easier for your users because the UI is entirely consistent.

    If you use a slightly longer-form method (i.e. option 1 in the help you linked to) to instantiate the 1st component (e.g. the documents component) and then place it inside a container then of course you can call methods directly in that component.  You can pass data that way.

    If you do use the Core’s event bus as Daniel suggests be sure to unsubscribe your event handlers in the onExit method.  They might not be destroyed automatically as they would be if you were using an Event bus which is attached to a single component.

    I would also recommend, as Daniel does, that you are careful to avoid clashes between components.  Don’t name a view ‘Main’ or a model ‘i18n’.  Your references must be unique.

     

     

    (1) 
    1. Antonette Venter Post author

      Thanks Mike. I’m also new to the component container concept so these were my first steps. I can’t wait so see the amazing things coders will be able to achieve with this control. Thanks for sharing more insights. 🙂

      Antonette

      (0) 
  5. Tobias Schnur

    Hi,

    according to the screenshots you used you were working in eclipse. I did something very similar a while ago developing in SAP Web IDE. Has anybody been able to get such a scenario running in the SAP Web IDE Fiori Testsandbox? When starting the “outer” application in the test sandbox it needs to load the “inner/reused” component. I tried everything I can imagine but I was not able to get this running. I always have to deploy to the ABAP Backend first and run it there. That is quite tedious if you just want to test a small change.

    I actually found some links related to this like:

    https://help.hana.ondemand.com/webide/frameset.htm?1114b927f5bc417e9a5912be40ee9ab8.html

    and

    https://help.sap.com/saphelp_nw74/helpdata/en/59/ea851d55e04c69a5ae07b15a3eda1b/content.htm

     

    But couldn’t get it working.

    Regards

    Tobias

    (0) 
  6. Mihir Chittora

    Hello Antonette ,

    Thanks for the wonderful article. We are also trying to achieve similar thing. I have couple of doubts please help me out on them.

    1. Can we deploy it to SAP Cloud Platform instead of ABAP Platform?
    2. In jQuery.sap.registerModulePath(“ehsattachments”, “../zehsattachments”);

    I understood that the first parameter is applicationName. Can you tell me how can i get the relative path “../zehsattachments”?

    (0) 
    1. Antonette Venter Post author

      Hello Mihir

      Thank you. 🙂

      1 I haven’t tried it on cloud before, please share you experience with us when you try.

      2 the path is found here: “http://<gateway server>:<port>/sap/bc/ui5_ui5/sap/zehsattachments”, you can browse for your app in tcode SICF by following the path above.

      Hope this helps, good luck

      Antonette

      (1) 
      1. Damodaran Mahadevan

        Thanks Antonette for the quick reply. We are having an issue with the path registration for the component – jQuery.sap.registerModulePath(“ehsattachments”, “../zehsattachments”);Can you please help us on this part.

        We tried locating you in outlook but could not find you. Do you work for SAP? Please share your email address so that we can discuss more on it.

        (0) 
  7. Martin Koch

    Hi Antonette,

     

    thanks for the great blog. Works perfect. I’am currently trying out to get it running in SAP Cloud Platform.

     

    BR,
    Martin

    (0) 
  8. Souvik Hariniya

    Hi Antonette,

    Thanks for the great blog. I have a small doubt.

    jQuery.sap.registerModulePath(“ehsattachments”, “../zehsattachments”);

    What are ehsattachments and zehsattachments in your case ? Are they the namespaces for Application 1 and 2 respectively ?

    For Ex: The namespace for my first app is ABC and that of the second app is XYZ. So, shall I write like this:-

    jQuery.sap.registerModulePath(“ABC”, “../XYZ”);   ?

    Thanks,

    Souvik

    (0) 
  9. D B

    Hi Antonette,

    very nice blog. I would like to use your re-use aproach in my UI5 project as well. But I was wondering what is the best way to refresh the data of a table in the component app (EHSAttachements), when a navigation from and to the view in the parent app (TestReuse) takes place.

    Thanks for any hints.

    Best regards

    Dan

    (0) 

Leave a Reply