Pin customData aggregation to any control in SAP UI5

[Dhanasupriya]

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