Pin customData aggregation to any control in SAP UI5

Hey all

This exposition presents a flash of how one can use an aggregation: customData to any control in SAP Ui5.

I made use of Standard List Item control for my blog display.

view.xml:

As we can see here, coded for customData inside StandardListItem.

<mvc:View controllerName="practise.StandardList_CustomData.controller.View1" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m"
	xmlns:core="sap.ui.core">
	<List id="ShortProductList" headerText="Suppliers" items="{ path: '/Suppliers', sorter: { path: 'SupplierID' } }">
		<items>
			<StandardListItem title="{CompanyName}" info="" infoState="Success" press="onListPress" type="Active" description="">
				<customData>
					<core:CustomData key="Name" value="{ContactName}"/>
					<core:CustomData key="City" value="{City}"/>
				</customData>
			</StandardListItem>
		</items>
	</List>
</mvc:View>

controller.js:

My intention of this blog is how one can make use of customData. So here comes the answer shown in onListPress function based on key.

sap.ui.define([
	"sap/ui/core/mvc/Controller"
], function (Controller) {
	"use strict";

	return Controller.extend("practise.StandardList_CustomData.controller.View1", {

		onListPress: function (oEvent) {
			var oName = oEvent.getSource().data("Name");
			var oCity = oEvent.getSource().data("City");
			oEvent.getSource().setDescription(oName);
			oEvent.getSource().setInfo(oCity);
		}
	});
});

Output:

on click of list item, we are able to look added information.

Thank you!! 🙂

Happy Learnings!!!

BR//Dhanasupriya Sidagam