Skip to Content
Author's profile photo Former Member

SAPUI5: Extending Controls Behavior using addEventDelegate function

Sometimes you come across a use-cases that is not yet supported by the standard controls of SAPUI5. One option is to create a custom control that extends a standard control and add your custom logic to the inherited control. Creating a custom control is useful if your use-case needs additional UI elements in the DOM or the control will be reused across your app. However, sometimes you only need to add custom behavior based on generic events triggered on the control.

In this blog I will show you how to achieve this without creating a custom control. We will use addEventDelegate function instead to attach to framework events. The addEventDelegate function is part of sap.ui.core.Element which means it is available on all controls and elements. The function adds a delegate that listen to the events fired on the control.


The use-case

To explain the concept, I will use a trivial example :). Let’s assume we have a DatePicker control. The user can select the date by clicking on the control and choose the date from the calendar. I would like to make the user able to change the date by using the keyboard arrows. When the user click the up key  the date increases by one day and when the user click the down key  the date decreases by one day.


The Implementation

Simply all I need to do is to listen to two SAPUI5 meta events: onsapdown and onsapup. These events are fired when the user clicks on the up or down keys. The coding is as follows:


oPicker = this.byId("datePicker");

    onsapdown: function() {
        var oDateValue = oPicker.getDateValue();
        oDateValue.setDate(oDateValue.getDate() - 1);
    onsapup: function() {
        var oDateValue = oPicker.getDateValue();
        oDateValue.setDate(oDateValue.getDate() + 1);

Live demo is available here


Background Information

The delegate is executed in addition to any function that the control has registered on the event. Thus the delegate is a nice and easy way to add custom functionality to one instance of a control. Note however that interfering with the lifecycle or rendering of the control might lead to unwanted side-effects. And the control might receive additional behavior in a future update of SAPUI5 that breaks your custom logic. Use with care and make sure to test your delegate after version upgrades.


Other Use Cases

Delegates are not only handy for enriching a control instances behavior. You can also use this mechanism to get notified when certain events on the control instance take place and react accordingly in your app code. You can register a callback for all browser and virtual events fired on controls like “ontap”, “ondragstart”, “onafterrendering”, “onkeyup”, “onsapenter”, “onchange”, and so on.

It is also useful for debugging, e.g. to set a breakpoint when a specific event is happening and you would like to debug the control instance during this state. You can also use it to read properties on DOM level after the rendering is finished (for example the height) or even to modify the control’s appearance itself by manipulating the DOM. As said above, some use cases are potentially dangerous as the control behavior or its rendering might change from version to version. If you decide to do so, build in safety measures and implement tests to make sure that the functionality always works as designed.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Noor Fathima H
      Noor Fathima H

      Thank you for sharing your knowledge about addEventDelegate(). But how we get to know about callback methods used here such as onsapup() is responsible for upward arrow key, onsapdown() is responsible for downward arrow key. I want to know all types of triggering events.

      Author's profile photo Michael Graf
      Michael Graf

      Hello Noor,


      you can find a full list of all sap pseudo events that are provided on top of general browser events like press or onmouseover here:

      Kind Regards,


      Author's profile photo Former Member
      Former Member

      Seems not working in latest FF 🙁


      Author's profile photo Kosta Sattsaev
      Kosta Sattsaev

      Author's profile photo Ayham Tanbari
      Ayham Tanbari

      Hello Michael,

      Thanks a lot for sharing your knowledge. This seems very helpful to me

      Author's profile photo Mike Doyle
      Mike Doyle

      Nice blog, Fahad, thanks for sharing.  It's the small details in apps, such as your example here, that really make a difference to users.  I haven't used this technique yet but I will keep it in mind.


      Author's profile photo Former Member
      Former Member

      Nice article. thanks for sharing

      Author's profile photo Former Member
      Former Member

      Can you explain me how this piece of code is working oPicker.invalidate(); 

      Author's profile photo Irfan Gokak
      Irfan Gokak


      Nice Blog. Just need small info how can attach "onClick" event using  "addEventDelegate"?

      Author's profile photo Former Member
      Former Member

      I have my own custom control and I want do some stuff when user hits Page Up/Page Down buttons on keyboards. How to get my custom component get registered for 'sappageup' and 'sappagedown' events. I don't want to use 'addEventDelegate' because I want to handle this functionality within my custom component only.


      Can anybody have some pointers?