Skip to Content
Technical Articles

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

 

 

 

/
1 Comment
You must be Logged on to comment or reply to a post.
  • Sir  I have the same requirement could you please give the more details of it.. Like file wise for folder wise  where to write what .. Please find my table structure below  and let me know where I should put <dependents>..

     

    <Table id=”accessRequestedList” select=”handleSelect”
    growing=”false” enableBusyIndicator=”true” busyIndicatorDelay=”1000″
    growingScrollToLoad=”false” items=”{tableModel>/}” class=”sapFixHeaderList”
    noDataText=”{i18n>NO_ACCESS_REQUESTED_MSG}”>

    <columns>
    <Column hAlign=”Left” styleClass=”limit” width=”20%”>
    <header>
    <Label text=”{i18n>APPROVE_LBL}” class=”labelHeadingClass”></Label>
    </header>
    </Column>
    <Column hAlign=”Left” styleClass=”limit” width=”20%”>
    <header>
    <Label text=”{i18n>ProvisioningAction}” class=”labelHeadingClass”></Label>
    </header>
    </Column>
    <Column hAlign=”Left” styleClass=”limit” width=”40%”>
    <header>
    <Label text=”{i18n>ROLE_TECH_TEXT}” class=”labelHeadingClass”></Label>
    </header>
    </Column>

    <Column hAlign=”Left” styleClass=”limit” width=”20%”>
    <header>
    <Label text=”{i18n>ProvisioningEvn}” class=”labelHeadingClass”></Label>
    </header>
    </Column>

    <core:ExtensionPoint name=”extValidityField” />
    </columns>
    <items>
    <ColumnListItem id=”accessRequestedListItem”
    press=”handleItemPress” type=”Navigation”>
    <cells >
    <CheckBox
    selected=”{path:’tableModel>ApprovalStatus’, formatter:’.isCheckBoxSelected’}”
    visible=”true”
    enabled=”{path:’tableModel>CanApprove’, formatter:’.isEnabled’}”
    name=”{path:’tableModel>AccessName’, formatter:’.getCheckBoxName’}”
    select=”approveLineItemSelect”
    tooltip=”{path:’tableModel>CanApprove’, formatter:’.formatAuthorizedMessage’}”>
    <!– <core:TooltipBase text=”{path:’tableModel>CanApprove’, formatter:’.formatAuthorizedMessage’}”></core:TooltipBase> –>
    </CheckBox>
    <Text text=”{tableModel>Action}”></Text>
    <Text text=”{tableModel>AccessName}” ></Text>

    <Text text=”{tableModel>Environment}”></Text>

    <core:Icon src=”sap-icon://alert” color=”red”
    visible=”{path:’RisksCount’, formatter:’.formatRiskIconDisplay’}” />
    <core:ExtensionPoint name=”extension2″ />

    </cells>
    </ColumnListItem>
    </items>
    </Table>