Question Re: How to create a custom control using some external libraries? in Technology Q&A

How to create a custom control using some external libraries?

Former Member — Mon, 25 Apr 2016 13:44:22 GMT

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

Re: How to create a custom control using some external libraries?

pavlo_denysyuk — Mon, 25 Apr 2016 13:49:48 GMT

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.

Re: How to create a custom control using some external libraries?

Former Member — Mon, 25 Apr 2016 14:20:54 GMT

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.

Re: How to create a custom control using some external libraries?

daniel_ruiz2 — Mon, 25 Apr 2016 21:13:06 GMT

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.

Re: How to create a custom control using some external libraries?

Former Member — Tue, 26 Apr 2016 13:50:00 GMT

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.

Re: How to create a custom control using some external libraries?

daniel_ruiz2 — Tue, 26 Apr 2016 20:38:45 GMT

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.