Skip to Content

Loading an external Component via ComponentContainer in SAPUI5 SplitApp

Mar 30, 2017 at 02:43 PM


avatar image
Former Member

I have two applications which are standalone, SAPUI5 Components. One of the components is based an a SplitApp with a detail page, preview view that calls the other, external Component in the onAfterRendering method:

onAfterRendering: function () {    this.addCompContent();},
addCompContent: function() {
var container;
container = this.getView().byId("previewPage");
var componentNamespace = "<namespace>";
var componentURL = "<component url>";
var oComp = new ComponentContainer({ name: componentNamespace, url: componentURL});
xmlns:html="" controllerName="<namespace>.controller.tiles.preview">
<Page id="previewPage" title="previewPage">

The external App/Component that is to be called in the above view returns a set of elements based on the pattern (in this case an ID) passed to the views URL.

After calling onAfterRendering in the SplitApp DetailPage, I receive a view with a loaded component, but it navigates directly to a NotFound.view.xml of the external component, instead of the root view. But if I run this component/app standalone, in a separate browser tab it works well (doesn't navigate to the NotFound.view).

If I do exactly the same but in the MasterPage of a SplitApp (firing a click event on a button to navigate, therefore rendering the view and loading component) - both button and displayed view are placed in a MasterPage, it works fine (even providing an event bus to change a dashboardId and load another content works as it is suppose to do).

But if a button is on a MasterPage and the preview view on a DetailPage, it routes me directly to NotFound.view of the external component that I'm trying to load.

Why is it working on the MasterPages but not working on the DetailPages of the SplitApp?

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

1 Answer

Jun Wu Mar 30, 2017 at 03:48 PM

I think I met this issue before, you have url #change, the embedded component is also responding to that url change.

Show 2 Share
10 |10000 characters needed characters left characters exceeded
Former Member

So the solution would be to change both patterns to be the same?


somehow you have to figure out a way to differentiate it.