Fiori Element List with Mouse Over on Table Cell

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.

https://embed.plnkr.co/plunk/jAFIHK

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) {
				
				this.getParent().getParent().getParent().getParent().getParent().getController().attachPopoverOnMouseover(this,this.getAggregation('dependents')[0]);
			}
			return v;
		}
	};

},true); // True is mandatory use this in a Column extension fragment.it 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 fragment.it 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}"/>
		<table:customData>
			<core:CustomData key="p13nData" value='\{"columnKey": "CustomStatusId", "columnIndex" : "5"}'/>
		</table:customData>
		<table:template >			
			<Text text="{path: 'Reason',formatter:'com.test_zapp.formatter.formatter.addDelegate'}" id="target" wrapping="false" >
				<dependents>
					<ResponsivePopover id="popover" showHeader="false">
						<content>							
							<Text text="{path: 'Reason'}"/>
						</content>
					</ResponsivePopover>
				</dependents>
			</Text>
			
		</table:template>
	</table:Column>
</core:FragmentDefinition>

Add below snippet in your controller file.

		attachPopoverOnMouseover: function(targetControl, popover) {
			targetControl.addEventDelegate({
				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!!! 🙂

Regards,

Vishnu P