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");

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

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.