Skip to Content
0
Jun 12, 2016 at 10:06 AM

Multiple icons in a single control

82 Views

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

  }

  }
}
});