SAP UI5 reuse component

Question

I am writing a UI5 faceless component which should be used in multiple other applications. The target applications are located in a package of an SAPUI5 ABAP respository. The component that should be included in the targets is in a different package in the same SAPUI5 ABAP repository.

How do I include this component? From documentation I added changes to the target manifest.json in the following way:

"dependencies": {
"minUI5Version": "1.30.0",
"libs": { "sap.m": {}, "sap.ui.core": {}, "sap.ui.layout": {} },
"components": { "cls.dva": {} }
},

But how is the component actually found ? Here I used the SICF node path. Do I have to add ".Component" to the path? Is there another place where I have to reference the dependent component in the target app?

Another questions is how and where do I instantiate the component? Is the init() function of the target Component.js the right place? There are also some parameters I would have to pass to properly inialize it. In the end the component and its data should be available app wide.

Thank you,

Christian

cgraff cgraff · Accepted Answer · 2017-10-24T09:40:05

another Christian here... :-)

regarding to your question you need to keep two things in mind:

The id of your faceless component
The name of your faceless component in the SAP ABAP repository

The dependencies section of your app is the right place to put the component you want to load into.

Thereby it is not important in which package of the SAP ABAP repository your faceless component is laying. Important is the id.

Let's take a look into the manifest of your faceless component:

{
  "_version": "1.4.0",
  "sap.app": {
  "id": "cls.dva",
  "type": "component",
  "i18n": "i18n/i18n.properties",
  "applicationVersion": {
    "version": "1.0.0"
  },
  "resources": "resources.json",
  ...
  },
  "sap.ui": {
    ...
  }
  ...
}

As you can see the Id of this component is equal to the Id you type into the dependencies section of the app that shall use your component. That's all you need to take care of.

Now, if you want to load and access your dependent component in the init function of your Component.js (which is a good place if it should be available in the whole app), you can do the following (here you need the name of the reuse component that you gave it during the first deployment, e.g. z_cls_dva):

init: function() {
  sap.ui.component({
    manifestUrl: "/sap/bc/ui5_ui5/sap/z_cls_dva/manifest.json",
    async: true,
    manifestFirst: true,
    componentData: { componentSetting: true }
  }).then(function(oComponent) {
    this._clsDvaReuse = oComponent
  }.bind(this)).catch(function(sError) {
    jQuery.sap.log.error(sError, "-", this.getManifestEntry("sap.app").id)
  }.bind(this))
}

Via the componentData you are able to provide parameters to the reuse component. There you can call this.getComponentData() to access them. You could also use the settings property to provide your configuration to the component. Read the sap.ui.component documentation for more details.

Notice: As of SAPUI5 1.48 the recommendation for loading reuse components changed. See the corresponding article in the sdk documentation.

SAP UI5 reuse component

1 Answers