Move div content to shell

[former_member207744]

Hi,

In Index.html I have a div container which contains gauge chart. On selection of workset item in Shell, I want to move gauge chart in index.html to Shell container.

I tried with below steps, but no luck.

Any idea to do this. Thanks

Index.html

<div id="gaugeContainer">
     <span id="gauge1"></span>
     <span id="gauge2"></span>
</div>

Step 1: In controller file, I have below code

worksetItemSelected: function(oEvent){
    var sId = oEvent.getParameter("id");
    var oShell = oEvent.oSource;
    switch (sId) {
    case "WI_TAT_Dashboard":
    oShell.setContent(sap.ui.getCore().byId("gaugeContainer"));
    break;
    }

Result

No Error and Gauge chart also not displayed in Shell.

Step 2:

worksetItemSelected: function(oEvent){
    var sId = oEvent.getParameter("id");
    var oShell = oEvent.oSource;
    switch (sId) {
         case "WI_TAT_Dashboard":
         oShell.setContent(getContent("WI_TAT_Dashboard"));
         break;
     }
   }
function getContent(id) {
  if (id == "WI_TAT_Dashboard") {
  var oMatrix = new sap.ui.commons.layout.MatrixLayout({
  columns : 3,
  });
  var oCell = new sap.ui.commons.layout.MatrixLayoutCell();
  oCell.addContent($("#gaugeContainer").clone());
  oMatrix.createRow(oCell);
  return oMatrix;
  }
}

     Step 2 - Error

Uncaught Error: "[object Object]" is not valid for aggregation "content" of Element sap.ui.commons.layout.MatrixLayoutCell#__cell0

[former_member207744 · Accepted solution]

Resolved this issue by using sap.ui.core.HTML.

var htmlGaugeContainer = new sap.ui.core.HTML({
     content : $("#gaugeContainer").html(),
     preferDOM : true, // boolean
     sanitizeContent : false, // boolean
     afterRendering : [ function(oEvent) {} ]
  });