Extending GroupHeaderList Item with an Icon Aggregation

[akshaya_p]

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");