Skip to Content
author's profile photo Former Member
Former Member

How to extend color in the sap.m.NumericContent

Hi ,

I have One generiTile as below.In the Numeric content section i have to display the icon along with the color based on the back-end value

<GenericTile class="sapUiTinyMargin tileLayout dashBoardTileIconSize" header="{oModelTopNode>Header}" subheader="{oModelTopNode>SubHeader}"



<TileContent class="dashBoardTileIconSize">


<!--<core:Icon src="{oModelTopNode>Icon}" color="{oModelTopNode>Color}" class="icon-tile"/>-->

<NumericContent value="{parts : ['oModelTopNode>Header', 'notificationModel>/myModelData'], formatter:'.formatter.getCount' }"

icon="{oModelTopNode>Icon}" color="{oModelTopNode>Color}" class="icon-tile dashboardTiles dashBoardTileIconSize">






I found their is no color properties in sap.m.NumericContent.In the backend they have send the Color filed with hexcode.I want to display the Icon with color ie coming from back-end.

Can any body tell me how to extend color properties for sap.m.NumericContent.



Add a comment
10|10000 characters needed characters exceeded

Assigned Tags

Related questions

2 Answers

  • Posted on Aug 26, 2016 at 02:11 PM


    can you try adding a css class to the element ?

    Add a comment
    10|10000 characters needed characters exceeded

  • author's profile photo Former Member
    Former Member
    Posted on Aug 26, 2016 at 06:00 PM

    Hi Segio,

    See css is not going to help.The questions is the icon value and color code is coming from backend.Now in the front end i have mapped the the icon value to numeric content but for the color code value as coming from backend where i need to mapped.Because the their is no properties color for the NumericContent as below.We need to extend that can you tell me how to extend the properties of a control




    Add a comment
    10|10000 characters needed characters exceeded

    • Former Member Former Member

      Hi Viplope,

      Thanks for your suggestion.I have change the some piece of code in the CustNumericContent.js

      Like Below Solution



      ], function (NumericContent) {

      "use strict";

      var CustNumericContent =NumericContent.extend("glb.gtpt.ewm.tool.controls.CustNumericContent", {

      metadata: {

      properties : {

      "color" : {type : "sap.ui.core.CSSColor",defaultValue : "blue"}


      events: {




      renderer: {}



      * Sets the Icon


      * @param {sap.ui.core.URI} uri which will be set as header image

      * @returns {sap.m.GenericTile} Reference to this in order to allow method chaining


      /*NumericContent.prototype.setIcon = function(uri) {

      var bValueChanged = !, uri);

      if (bValueChanged) {

      if (this._oIcon) {


      this._oIcon = undefined;


      if (uri) {

      this._oIcon = sap.ui.core.IconPool.createControlByURI({

      id : this.getId() + "-icon-image",

      src : uri

      }, sap.m.Image);



      return this.setProperty("icon", uri);


      CustNumericContent.prototype.setColor = function(color) {

      if (this._oIcon) {



      // return this.setProperty("icon", uri);


      // onfocusout: function(evt) {

      // this.fireLostFocus();

      // },

      return CustNumericContent;


      After that when i map to color property then it works.



Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.