CODEWITHSUNDEEP
sapui5
Enum
Enum

Reputation: 184

Adding content to XMLView via "addContent" doesn't work

I have the following XMLView:

<mvc:View
  xmlns:core="sap.ui.core"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
  xmlns:data="sap.chart.data"
  xmlns:viz="sap.viz.ui5.controls"
  xmlns:con="sap.suite.ui.commons"
  controllerName="MY_NAMESPACE.controller.ChartView"
  xmlns:html="http://www.w3.org/1999/xhtml"
>
  <!-- Panel here -->
</mvc:View>

Now, in my controller, I want to dynamically add a sap.m.Panel to the view. In my onInit function, I pass the object of the current view to the method that creates the Panel and adds it to the view.

onInit: function() {
  var sUrl = "/sap/opu/odata/sap/MY_ODATA_SERVICE/",
    oModel = new ODataModel(sUrl), // v2
    oCurrentView = this.getView();
  this.getView().setModel(oModel);
  this._createPanel(oCurrentView);
  this._createChartContainer();
  this._initializeCharts();
  this._showCharts();
},

_createPanel: function(currentView) {
  var sId = this._globals.panelId;
  var oViewPanel = new Panel(sId, {
    width: "auto"
  }).addStyleClass("sapUiSmallMarginBeginEnd");
  this._globals.panelState = oViewPanel;
  currentView.addContent(oViewPanel);
  return currentView;
},

However, the Panel is never rendered:

enter image description here

But when I call the getContent function of the view, the panel is listed as an entry.

enter image description here

Clarification:

Creating a sap.m.Panel in the XMLView isn't a problem. Placing this bit of XML into the XMLView works.

<Panel id="chartPanel"
  class="sapUiSmallMarginBeginEnd"
  width="auto"
></Panel>

But, I need to create and append the sap.m.Panel object to the XMLView at runtime (in the controller), not in the XMLView.

Now, the problem:
With above posted controller code, the panel objects gets created. In fact, it even gets registered as a content aggregation of the XMLView, but it simply doesn't get rendered (see picture above).

view-aggregation

Any suggestion on why and how this behaviour occurs are greatly appreciated.

Upvotes: 2

Views: 2768

Answers (2)

Boghyon Hoffmann
Boghyon Hoffmann

Reputation: 18044

Issue

this.getView().addContent(/*...*/) doesn't work.

Why

Currently, XMLView won't allow manipulating its content via APIs as the documentation warns:

Be aware that modifications of the content aggregation of this control are not supported due to technical reasons. This includes calls to all content modifying methods like addContent etc., but also the implicit removal of controls contained by the content aggregation. For example the destruction of a Control via the destroy method. All functions can be called but may not work properly or lead to unexpected side effects.

This is, at the time of writing (v1.64), still the case.

PS: The above limit applies only to XMLView. Other view types, such as JSView*, are not affected.


* sap.ui.core.mvc.JSView and sap.ui.jsview are deprecated. Use Typed Views instead (Applicable since v1.90).

Upvotes: 3

Timur
Timur

Reputation: 179

try to put the Panel inside the XML view and give it a property visible="false".

<Panel id="panelId" visible="false">

</Panel>

In your function you could do something like this:

_createPanel: function(){
  var oPanel = this.getView().byId("panelId");
  oPanel.setVisible(true);
  // Other Methods for Panel
}

With the oPanel instance you can execute all methods listed in the API: https://sapui5.hana.ondemand.com/#/api/sap.m.Panel

Hope this helps :-)

Best regards

Upvotes: 0

Related Questions