extend TreeNode in SAPUI5

[Former Member]

Hi together,

today I've tried to extend a TreeNode. I'v found in the SCN how to extend a TextField and that works fine.

sap.ui.commons.TextField.extend( "PcTreeNode", {
    metadata : {
        properties : {
            "imcpid" : "string"
        }
    },
    renderer : {
        renderInnerAttributes : function( oRm, oTreeNode )
        {
            oRm.writeAttributeEscaped( 'imc-pid', oTreeNode.getImcPid() );
        }
    }
} );

But if I try exactly the same with an TreeNode:

sap.ui.commons.TreeNode.extend( "PcTreeNode", {
    metadata : {
        properties : {
            "imcpid" : "string"
        }
    },
    renderer : {
        renderInnerAttributes : function( oRm, oTreeNode )
        {
            oRm.writeAttributeEscaped( 'imc-pid', oTreeNode.getImcPid() );
        }
    }
} );

I get the following error:

Error: failed to load 'sap.ui.commons.TreeNodeRenderer' from resources/sap/ui/commons/TreeNodeRenderer.js: 404 - Not Found

Any suggestions?

Thanks in advance.

[pmuessig]

Hi Chris,

UI5 differs between Controls and Elements. A Control is an UI object which renders itself where an Element is rendered by it's aggregating control. Therefore it is not possible to extend an Element and add a renderer to the Element. This will not work.

For now I would live with the following workaround, that after the rendering you use jQuery to find your TreeNodes and set the custom attributes. Therfore you have to overwrite the Tree and the TreeNode:

  sap.ui.commons.Tree.extend("my.Tree", {
   onAfterRendering: function(oEvent) {
    sap.ui.commons.Tree.prototype.onAfterRendering.apply(this, arguments);
    var fnUpdateNodes = function(aNodes) {
     jQuery.each(aNodes, function(iIndex, oNode) {
      if (oNode.getImcpid && oNode.getImcpid()) {
       jQuery.sap.byId(oNode.getId()).attr("imcpid", oNode.getImcpid());
      }
     });
    }
    fnUpdateNodes(this.getNodes());
   },
   renderer: {}
  });
  sap.ui.commons.TreeNode.extend("my.TreeNode", {
   metadata: {
    properties: {
     "imcpid": "string"
    }
   }
  });

BTW: the function renderInnerAttributes is a specific hook of the TextFieldRenderer which is used to add custom attributes in controls which extend the TextField, like the DropDown, ComboBox, ... The Tree has not such a hook yet.

Best regards and happy weekend,

Peter

[Former Member]

Hi Peter,

thanks for the reply. I also had the idea of using plain jQuery to solve the problem. But the problem is, that I use the Tree in an overlayContainer wich seems to be rendered twice. If I log my nodes, I can see, that they rendered first correct with my new attribute. But then they logged again without it.

That seems to be a problem of the overlayContainer wich renders the content twice, even if I created them in a view.

And for the second time there is no afterRendering event. I have implemented the addition of the attribute in the open (overlayContainer) eventHandler.