javascriptsapui5sap-fiorijs-amd

How to load a Child Component in UI5 parent app, without defining them in the manifest.json?


How to load a Child Component in UI5 parent app?. I am trying to implement a Fiori Launchpad which can load other apps as Child Components.

So far I have been referring to https://stackoverflow.com/a/46358895/5846045

But implementing this requires that the child components be explicity defined in the manifest. Thanks!


Solution

  • To embed one component inside an other component, you need to use the ComponentContainer - you can use it with URL and other properties, if your app doesn't know anything about the child "a priori". If, for example, your "parent" app gets the info about the child from a data service at runtime.

    https://sapui5.hana.ondemand.com/#/api/sap.ui.core.ComponentContainer

    You can use ComponentContainer in any way you can use other controls. you can use it inside XML views or instantiate it inside the controller and then add it to content of the page (just an example)

    PS: just make sure the URL of child component is from same host. Or, if it is from different host, that it allows being retrieved using ajax requests (cross-origin-policy and stuff)

    Update 2021-01-04: here is a quick-and-dirty example in JS Fiddle:

    https://jsfiddle.net/iPirat/t30sr8zw/

    I embedded the Button-Sample-Component from sapui5.hana.ondemand.com here. due to CORS policy, it will only run if you disable web security in your browser example how to do so in chrome

    This is how it looks like