Creating Functions Available to All UI5 controls in a single go !

Hey All,

In this blog, let me explain how to make a function available to all the UI5 controls. So, to do this we gotta add the function to the control sap.ui.core.Control which is the base class of all the UI5 Controls.

So the concept here is, all the UI5 controls inherited from sap.ui.core.Control & thus adding a function to the sap.ui.core.Control would make sure that function is inherited by all the controls.

To do this we gotta load sap.ui.core.Control by doing,

jQuery.sap.require('sap.ui.core.Control');

Now we gotta add our function to the prototype of sap.ui.core.Control. say let me name the function as “test”.

sap.ui.core.Control.prototype.test = function(){
          alert("My Custom Function!");
}

I’m just doing an alert if this function is called. Now let’s test it by creating a button instance and check whether the function test() is available there.

var oButton = new sap.m.Button({text:"Sample",
                                                 press :  function(oEvent){
                                                      oButton.test();          
                                                 }
                         });

Now every time the Button is press, the function test() will be triggered. Now the function test() can be invoked from all the UI5 controls.

chek out the example snippet http://jsbin.com/jonud/1/edit

To Make it pratical, in one of the blog Draggable Controls in UI5 ! it was about implementing Draggable feature to UI5 Controls by using jQuery UI.  So, there we had to do all those jQuery stuff of grabbing the element from the DOM & blah blah blah. Now, lets make it cooler by creating a function draggable() and add it to UI5 controls so that just calling the UI5control.draggable() would do all the stuff for us.

I have put up the code for the function here Draggable

So once you add this code, the draggable() function will be avail to all the controls. say you can do something like,

var oButton = new sap.m.Button({text:"Drag Me"});
oButton.draggable(); // will make the button draggable.

Here’s an example snippet,

JS Bin – Collaborative JavaScript Debugging</title> <link rel="icon" href="http://static.jsbin.…

Regards

Sakthivel