sapui5 - Component reuse in manifest.json file

Question

We are currently building a set of apps, where there is a lot of reuse.

Currently we got it working by using jQuery.sap.registerModulePath and jQuery.sap.require. But according to Using and Nesting Components you should be able to declare your reuse components in the manifest.json file.

I had a look in the SAPUI5 Developer Guide, but couldn't really make it work. As far as i can see I need to add the following:

"sap.App" :{
    "embeddedBy" : "../.."
},
"sap.ui5": {
    "componentUsages" :{
        "<string for my reuse component>" : {
            "name" : "<name of the component>"
        }
    "dependencies" :{
        "components" : {
            "<namespace of my component>"
         }}

Anyone got a working example?

Answer 1

Here is a working example with nested components: https://embed.plnkr.co/e7KS48/

The descriptor attribute componentUsages is available since 1.47.0. Once defined, UI5 takes care of resolving the Component and its module path before rendering the owning ComponentContainer.

ComponentContainer is needed because a Component cannot be placed into the UI without a container. In my example above, the Container is defined declaratively in Home.view.xml with the respective usage property.

<core:ComponentContainer id="containerForChildComponent"
  autoPrefixId="true"
  settings="{id: 'childComponent'}"
  usage="reuseAnotherComponent"
  manifest="true"
  height="100%"
  async="true"
/>

"sap.ui5": {
  "componentUsages": {
    "reuseAnotherComponent": {
      "name": "anotherComponent",
      "lazy": false
    }
  },
  "resourceRoots": {
    "anotherComponent": "./component_B"
  },
  // ...
}

As you can see, the resourceRoots can be also defined in the descriptor which could point to other component / app locations.

---

Example for UI5 apps w/ version below 1.47: https://embed.plnkr.co/ytXZJ9