Skip to Content
Author's profile photo Former Member

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,'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){

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

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.…



Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Thomas Bonk
      Thomas Bonk

      You can even do Method Swizzling (i.e. extending existing methods), for example:


      sap.ui.core.Control.prototype.placeAt_old = sap.ui.core.Control.prototype.placeAt;

      sap.ui.core.Control.prototype.placeAt = function (oRef, oPosition) {

            console.log ('Im the new placeAt method');    

           return this.placeAt_old(oRef, oPosition);     

      } ...

      Author's profile photo Krishna Kishor Kammaje
      Krishna Kishor Kammaje

      Simple and useful. Thank you.

      Author's profile photo Former Member
      Former Member

      Hi Sakthivel,

      I have a usecase where two controllers have similar functions except few. So I would like to implement inheritance of controller. Is there any example for same?



      Author's profile photo Former Member
      Former Member
      Blog Post Author

      You can use typed controllers for that. check this , Typed Views and Controllers - SAPUI5 Developer Guide for SAP HANA - SAP Library