How to reload a component in SAPUI5?

Question

I have a SAPUI5 application that uses sap.ui.core.ComponentContainer for loading other applications inside of itself. Something similar to fiori launchpad. But it is amazing that when I remove the component container from the page and try to reload it later it will be added to the HTML page but it will not shown.

var oPage = this.getView().byId("page");
    oPage.removeAllContent();
    if(!this._aComps[sObjectId]){
        this._aComps[sObjectId] = new sap.ui.core.ComponentContainer({ name: sObjectName});
    }
    oPage.addContent(this._aComps[sObjectId]);

Any idea that what is the reason that it's shown only in initialization time?

While this code always works:

var oPage = this.getView().byId("page");
    oPage.removeContent();
    oPage.addContent(new sap.ui.core.ComponentContainer({ name: sObjectName}));

Answer 1

After a huge investigation it seems I found a bug in SAPUI5.

What happened after removing a ComponentContainer and add it again is that SAPUI5 removes the style="height: 100%;" from the component container element.

It seems it doesn't return back the height to its default value after adding it again. Also I tested the setVisible function and the problem exist there as well.

So what we have to do is:

var oPage = this.getView().byId("page");
    oPage.removeAllContent();
    if(!this._aComps[sObjectId]){
        this._aComps[sObjectId] = new sap.ui.core.ComponentContainer({ name: sObjectName});
    }
    oPage.addContent(this._aComps[sObjectId]);
    this._aComps[sObjectId].setHeight("100%"); // Set the height to 100% again!

Note: It removes the height: 100%; not only for the component container itself but for some other parent elements as well. Please concentrate on the picture! While this solution works for me, maybe in other use cases it is needed to set the height of some other elements!