UI5 Component Reuse Comes of Age

[MikeDoyle]

One of my customers has just upgraded to SAPUI5 1.52, which is the new maintenance release.  These stable releases are focused on bug fixes rather than new functionality and get extended support.

As a result I've been working to bring their UI5 apps up to date and today I was looking into whether I could improve the way in which they were reusing components¹.  I was excited to learn that there are some new tricks I could use.

Firstly, I didn't know that I could put reuse components together into a library.  Each component still loads its own manifest file and contains its own views and bundles but a number of components can be built, deployed and transported together.

I learnt this from pars.man's superb blog, Implementing Re-use Components in SAPUI5 libraries and consuming them in SAPUI5 apps. If you haven't read Nabi's blog you really should.

Note that the manifest of the library lists the components which it embeds.  The manifest of each reuse component lists whom (which library) it is embeddedBy.

The second thing I learnt was that the using component (the consumer) can create componentUsages in its manifest.  These usages are a reference to a reuse component and they can include settings and configuration.  You may need to create two usages referencing the same reuse component, each with different settings or configuration. As the documentation ('Using and Nesting Components') explains, once you have declared the usage in the manifest it can be referenced in your views like this:

<ComponentContainer usage="myreuse">

Pretty easy, eh?  The only downside is that this is a very new feature and to take advantage you may need to join me on version 1.52.....

 


¹I'm a big fan of reusing components in UI5 (between apps).  I find that it speeds up app development and also helps to give a consistent UX. Of course you can reuse too much and experience tells us when some functionality (e.g. a search help) is likely to be needed again and when we should just keep things simple.  jakob.kjaer is also a fan and he wrote a great blog series recently which also covers how to share data between components