Skip to Content
Author's profile photo Dennis Seah

Extending sap.ui.core.Icon

/wp-content/uploads/2014/04/screenshot_426180.png

CSS and Javascript are in github. Once again, this illustrates the power of OpenUI5 where we are created control with a few lines of code.

Here is an example of how they are created.


jQuery(function() {
  jQuery.sap.registerModulePath('sap.dennisseah', 'https://rawgithub.com/dennisseah/openui5/master/controls/sap/dennisseah');
  jQuery.sap.require('sap.dennisseah.IconNumIndicator');
  var ctrl = new sap.m.HBox({
    width: '500px',
    items: [
      new sap.dennisseah.IconNumIndicator({
        src: 'sap-icon://email',
        value: 10
      }),
      new sap.dennisseah.IconNumIndicator({
        src: 'sap-icon://task'
      }),
      new sap.dennisseah.IconNumIndicator({
        src: 'sap-icon://inbox',
        value: 15
      }),
      new sap.dennisseah.IconNumIndicator({
        src: 'sap-icon://action',
        value: 2
      }),
      new sap.dennisseah.IconNumIndicator({
        src: 'sap-icon://marketing-campaign',
        value: 4
      })
    ]
  });
  ctrl.placeAt('content');
});

-D

Assigned tags

      7 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Michael Lichtinger
      Michael Lichtinger

      Thx for sharing.

      Author's profile photo Former Member
      Former Member

      Hi Dennis,

      This is nice blog but i am not able to add any content on this , can it be possible with sap.m.IconTabFilter ?

      Thanks,

      JP

      Author's profile photo Santhosh Gowda
      Santhosh Gowda

      Hi Dennis,

      Provided example is not working. will you take a look?.

      Thanks,

      Santhosh Gowda

      Author's profile photo Dennis Seah
      Dennis Seah
      Blog Post Author

      Sorry Santhosh

      the link to github was broken.

      Please use this one JS Bin - Collaborative JavaScript Debugging

      Thanks

      -D

      Author's profile photo Former Member
      Former Member

      Hi Dennis,

      I have implemented this but problem is ,this is not working like IconTabFilter.

      Thanks,

      JP

      Author's profile photo Former Member
      Former Member

      within icontabfilter you have a property count, assign it. Should work

      <IconTabFilter

                         count={your field name}

                          icon="sap-icon://to-be-reviewed"

                          >

      if you are using a XML View

      Author's profile photo Khabir Ahmad Raja
      Khabir Ahmad Raja

      Hi Dennis

      Thank you for you effort but your custom icons are not visible with in standard UI5 controls like sap.m.Page or sap.m.Bar. They work only with placeAt() function but I need to put these icons within other UI5 controls like sap.m.Page().addContent() How to fix it?

      Regards

      Khabir