Hi Experts,
I need to show more than one icons and their colors be controlled by my own css classes for a control, for example, sap.m.IconTabFilter.
I am trying to extend the standard control as following. I added a new property aIcons which will have an array of icon uri and css class names.
for example I am using following code to instantiate the aIcon as a json model and the application xml view will finally use the model and new extended control of IconTabFilter.
Need help on how to achieve this.
var oModel = new sap.ui.model.json.JSONModel(); var aIcons = [["sap-icon://hint", "red", "myclass1"], ["sap-icon://plus", "blue", "myclass2"]]; oModel.setData(aIcons); sap.ui.getCore().setModel(oModel, "icons");
The extended control code :
jQuery.sap.declare("sap.m.sample.IconTabBarMulti.IconMult");
jQuery.sap.require("sap.ui.core.Icon");
jQuery.sap.require("sap.m.IconTabFilter");
sap.m.IconTabFilter.extend('sap.m.sample.IconTabarMulti.IconMult', { metadata: { properties: { aIcons: { type: "string[]" }, aggregations: { _icon1: { type: "sap.ui.core.icon", multiple: false, visibility: "hidden" }, _icon2: { type: "sap.ui.core.icon", multiple: false, visibility: "hidden" } } } }, init: function() { // execute standard control method sap.m.IconTabFilter.prototype.init.apply(this, arguments); }, renderer: function(oRM, oControl) { // oControl.setSize('25px'); sap.m.IconTabFilterRenderer.render.apply(this, arguments); var aIcons = self.getaIcons(); for (var i = 0; i < aIcons.length; i++) { var aIcon = aIcons[i]; oRM.writeIcon(aIcon[0],aIcon[2]); } }
}
});