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.

To report this post you need to login first.

5 Comments

You must be Logged on to comment or reply to a post.

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

    (0) 
  2. 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.

     

    (0) 

Leave a Reply