Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
Showing results for 
Search instead for 
Did you mean: 
Active Participant
Hey Folks,

Quiet a common requirement to have an event that is not part of the standard UI5 Control and there are number of ways to achieve it.Below are the few approaches that give you a head start.

Assumption: Knows Column extension for Fiori Element List. And if no.. No worries .Refer below blog.

Fiori Element extension

  1. using addEventDelegate (Part of  sap.ui.core.Element)

  2. jQuery.bind()

  3. Control extension (But i would prefer using it only if there is a new UI element added not for just events)


Here i am going to use addEventDelegate which is most easy way of doing it. And reference for achieving this requirement is from below URL.


Above example is for a control that isn't part of an aggregation and in our case cell is part of an aggregation item.

So create a Formatter.js file were you can use addEventDelegate which adds a delegate that helps us to listen to events fired by Browser such as onmouseover,onmouseout , etc
sap.ui.define([], function() {
"use strict";

return {
//Formatter to add delegate
addDelegate: function(v) {
if (v !== null) {

return v;

},true); // True is mandatory use this in a Column extension exposes formatter for Global //access via absolute path

True above in formatter.js is mandatory because it helps to call the formatter method  in a Column extension exposes formatter for Global access via absolute path.


And below snippet will show you how the Column extension fragment look like.
<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns:table="sap.ui.table" xmlns="sap.m" xmlns:f="sap.f">
<table:Column minWidth='100' resizable='true' autoResizable='true' visible="true" showSortMenuEntry="true" showFilterMenuEntry="false"
filterProperty="Reason" sortOrder="Ascending" sortProperty="Reason">
<Label text="{i18n|sap.suite.ui.generic.template.ListReport|ZTEST_DDLS_C_MY_DATA>blockedReason}"/>
<core:CustomData key="p13nData" value='\{"columnKey": "CustomStatusId", "columnIndex" : "5"}'/>
<table:template >
<Text text="{path: 'Reason',formatter:'com.test_zapp.formatter.formatter.addDelegate'}" id="target" wrapping="false" >
<ResponsivePopover id="popover" showHeader="false">
<Text text="{path: 'Reason'}"/>



Add below snippet in your controller file.

		attachPopoverOnMouseover: function(targetControl, popover) {
onmouseover: this._showPopover.bind(this, targetControl, popover),
onmouseout: this._clearPopover.bind(this, popover)
}, this);
_showPopover: function(targetControl, popover) {

this._timeId = popover.openBy(targetControl);

_clearPopover: function(popover) {
clearTimeout(this._timeId) || popover.close();


Voila!!!!! Here is the result.


Happy Coding!!! 🙂


Vishnu P



Labels in this area