Technical Articles
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
Thanks for the small but useful post Dhanasupriya!