Extending GroupHeaderList Item with an Icon Aggregation

As we all know the groupheader list iitem aggregation has only title property .

Here I’m extending it with an icon aggregation . Create a new folder control->IGroupHeaderListItem.js

/*eslint-disable */
sap.ui.define([ "sap/m/GroupHeaderListItem"
], function (List) { "use strict"; /** * Constructor for a new OTTOInput */ var IGroupHeaderListItem = List.extend("ZFOCS_ORDER.ext.control.IGroupHeaderListItem", { metadata: { aggregations: { rightIcon: { type: "sap.ui.core.Icon", multiple: false } } }, init: function () { }, renderer: function (oRm, oControl) { oRm.openStart("tr", oControl); oRm.addClass("sapMLIB sapMLIB-CTX sapMLIBShowSeparator sapMLIBTypeInactive sapMLIBFocusable sapMGHLI changePointer") oRm.writeClasses(); oRm.openEnd(); oRm.openStart("td", oControl); oRm.addClass("sapMGHLICell changePointer"); oRm.writeClasses(); oRm.openEnd(); oRm.openStart("div", oControl); oRm.addClass("sapMLIBContent"); oRm.writeClasses(); oRm.openEnd(); oRm.openStart('span', oControl); oRm.addClass("sapMGHLITitle"); oRm.writeClasses(); oRm.openEnd(); oRm.write(oControl.getTitle()); oRm.close('span'); oRm.openStart('span', oControl); oRm.addClass("sapUiTinyMarginBegin sapUiTinyMarginTop"); oRm.writeClasses(); oRm.openEnd(); oRm.renderControl(oControl.getRightIcon()); oRm.close('span'); oRm.close('div'); oRm.close('td'); oRm.close('tr'); }, onAfterRendering: function () { if (sap.ui.core.Control.prototype.onAfterRendering) { sap.ui.core.Control.prototype.onAfterRendering.apply(this, arguments); } } }); return IGroupHeaderListItem; });

Wile using it in controller use it like this

	grpHdrListItem = new IGroupHeaderListItem({ title: sometitle, rightIcon:{ src:"sap-icon://puzzle", } }).addStyleClass("somecolor");