cancel
Showing results for 
Search instead for 
Did you mean: 

How do I integrate an UI5 component into another within Fiori Launchpad in the Cloud Foundry?

CCSCS
Explorer
0 Kudos

Hi everybody,

I want to reuse SAPUI5 components of one app in another SAPUI5 app within a Fiori Launchpad in Cloud Foundry. I already implemented a working solution for NEO. I followed this blog post for CF, but it does not use a Launchpad and it does not work for me.

The biggest difference seems to be that in the xs-app.json of the importing app I use the html5-apps-repo-rt service

{
	"source": "^(.*)$",
	"target": "$1",
	"service": "html5-apps-repo-rt",
	"authenticationType": "xsuaa"
}

How do I configure the mta.yaml and the xs-app.json to reuse a component in a Fiori Launchpad?

Kind regards,

Christian.

Hi christian spah,

Did you get the solution to use one application fragment in another application in deployed cloud foundry fiori launchpad .
can you please provide me how you implemented this reusability of controls over multiple apps .

I have two ui5 applications which are deployed in cloud froundry now i want to reuse fragments of one application in another . what are the main changes and paths i should do in my both ui5 applications.

It would be great help if you provide me git links of demo with two applications .

Accepted Solutions (1)

Accepted Solutions (1)

Fabrice
Active Participant

Hi,

for a test on sap btp trial account I use the following:

in a view of the main app, I use a componentContainer:

<core:ComponentContainer width="100%" id="myComponentContainer"  usage="myUsage" height="100%"  manifest="true"/>

then in manifest.json I define the usage for the external component:

"sap.ui5": {
"componentUsages": {
"myUsage": {
"name": "my.component",
"settings": {}
}
},
"resourceRoots": {
"my.component": "<path to the component>"
},
...

I did not change mta.yaml or xs-app.json

NOTE: in my case the url for the app which contains the external component is:

https://xxxxxxxxtrial.launchpad.cfapps.us10.hana.ondemand.com/f1dd6008-c7a8-4ca3-b3d0-e3414e98544e.m...

myService is defined in the manifest.json in sap.cloud section with service

myApplication is defined in the manifet.json in sap.app section with id

both without dot

see https://help.sap.com/products/BTP/65de2977205c403bbc107264b8eccf4b/0f1f92e047924fdebe63d5249f532cdd....

so for me <path to the component> was "../f1dd6008-c7a8-4ca3-b3d0-e3414e98544e.myService.myApplication"

Note that I do not specify the version (here 0.0.1) in order to have the newest version.

I do not know if it is the best solution but I hope it will help you.

Regards

Fabrice

CCSCS
Explorer

Thank you very much. Your solution is working great.

At the end I changed your solution a little bit and programmatically register the module path in component.js like this:

jQuery.sap.registerModulePath(my.component, <path to the component>);

This way I can change the path to the component according to the environment (e.g. local).

Answers (1)

Answers (1)

wasimhunachagi1
Discoverer
0 Kudos

Hi Christian & Fabrice,

Thanks for provide some solutiuon but is it possible for anyone of you to share the manifest.json file of working application.

Thanks & Regards

Wasim