How to create a custom control using some external libraries?

[Former Member]

Hi All,

     I am trying to create a custom control which displays a Treegrid using the external libraries ,where i need to create the treegrid by specifying the div name in which the tree gets created.

for example :

In the above example we need to mention the "div id". So that the tree gets created in that div i.e "#treeGrid".

But when i try to create a custom control i can create a div only in the renderer() but not in onInit().

Therefore my question is how can we give a dynamic DIV ID to generate the tree in that respective div, moreover what is way to create this type of custom control.

The below link is the working example of the treegrid which need to be converted as custom control.

jQuery Tree Grid

Regards,

Saikiran Bommagowni

[pavlo_denysyuk · Accepted solution]

     No need to use third party library. SAPUI5 has own tree control. First impression is that UI5 tree table is not worse then  jQuery Tree Grid. If You are following SAP UI principles - use correct control in correct place ))

here is component - https://experience.sap.com/fiori-design/ui-components/tree-table/

hope usefull.

[Former Member · Accepted solution]

Hi Pavlo,

     It is my requirement, where i need to use it mandatorily and also it has many other features. So can you help me to find out the way to create a custom control for that.

[daniel_ruiz2]

Hi Saikiran,

Are you going to re-use this everywhere in your code? - Is it a matter you really need a Custom Control or just a matter to apply this into an UI5 Element?

Custom Controls are better for code re-use but in order to define then, you will end up with more code being executed and also transmitted - even thou they seem to be "good practice" inflating execution time and bytes transferred for no good reason hardly translates into good.

Case you decide the Custom Control path, you can find more information here: OpenUI5 SDK - Demo Kit

However, be careful how you deal with your properties, otherwise you will end up with DOM Nodes being "re-created" which will very likely kill the performance of your application.

Cheers,

Dan.

[Former Member]

Hi Dan,

     I reuse the that custom control for 3-4times in my application. And i want make  the external jqtree as a SAP UI5 element, so that i can directly place it in any of the UI5 layout or container. So can you say the procedure to create that custom control.

Regards,

Saikiran Bommagowni.

[daniel_ruiz2]

hi Saikiran,

Well, it does look like you could use a custom control.. go for it. On my previous reply I did hyperlink the section on the UI5 on how to create a custom control.. rather straight forward.

The "tricky" part not explained is, the "attributes" of your custom control are managed by default by UI5 and this means, UI5 will end up creating getters and setters for them.

The default mutators do not supress the invalidate on the control, which means, every time you change a property in your control it will destroy the DOM nodes (of your control and anything below it) and re-build it.

This is the worst possible behavior in terms of performance, so make sure to overwrite the mutators to supress the invalidate when needed so you don't have performance issues.

Cheers,

Dan.

PS: Case you have trouble to understand what to do I suggest you visit openui5/src/sap.ui.commons/src/sap/ui/commons at master · SAP/openui5 · GitHub because there are a lot of examples from the library itself.