How to extend color in the sap.m.NumericContent

[Former Member]

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}"

  press="pressLearning">

  <tileContent>

  <TileContent class="dashBoardTileIconSize">

  <content>

  <!--<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">

  </NumericContent>

  </content>

  </TileContent>

  </tileContent>

  </GenericTile>

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.

Br

Dibya

[Former Member]

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

Properties

• animateTextChange : boolean (default: true)
• formatterValue : boolean (default: false)
• icon : sap.ui.core.URI
• iconDescription : string
• indicator : sap.m.DeviationIndicator (default: None)
• nullifyValue : boolean (default: true)
• scale : string
• size : sap.m.Size (default: Auto)
• truncateValueTo : int (default: 4)
• value : string
• valueColor : sap.m.ValueColor (default: Neutral)
• width : sap.ui.core.CSSSize
• withMargin : boolean (default: true)
• state : sap.m.LoadState (default: Loaded)

Br

Dibya

[SergioG_TX]

would any of these valueColors work ?

SAPUI5 SDK - Demo Kit

[Former Member]

No this is not going to help Can it  possible for  to extend the  properties of sap.m.numericContent where we have to add the value meta properties as Color.

[Former Member]

Hi Dibyakanta ,

you can add the new property by extending the control , below is the example to add hover event to the control button similarly you can add the color property to numeric control :

https://help.sap.com/saphelp_uiaddon20/helpdata/en/d5/b756bf4e9a4d67961fa21e1ba12c9e/content.htm 

if you dont want to extend the control there is a way in java script to do the above , you can change the css color:<frombackend> of each numerci control ...

thanks

Viplove

[Former Member]

Hi ,

Thanks .

This is my controls.

sap.ui.define([

    'sap/m/NumericContent'

], function (NumericContent) {

    "use strict";

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

     metadata: {

         properties : {

             "color" : {type : "string",defaultValue : ""}

         },

          events: {

              "lostFocus":{}

          }

      },

      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 = !jQuery.sap.equal(this.getIcon(), uri);

        if (bValueChanged) {

            if (this._oIcon) {

                this._oIcon.destroy();

                this._oIcon = undefined;

            }

            if (uri) {

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

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

                    src : uri,color:this.getColor()

                }, sap.m.Image);

            }

        }

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

    };

        // onfocusout: function(evt) {

     //     this.fireLostFocus();

     // },

return  CustNumericContent;

});

This below is my view

<mvc:View controllerName="com.demo.controller.View1" xmlns:f="sap.ui.layout.form"

xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:custom="com.demo.controls">

    <App>

        <pages>

            <Page title="{i18n>title}">

                <content>

                <GenericTile class=""

                                        press="pressLearning">

                                        <tileContent>

                                            <TileContent >

                                                <content>

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

                                                        <custom:CustNumericContent value="12"

                                                        icon="sap-icon://factory" color="blue" >

                                                        </custom:CustNumericContent>

                                                </content>

                                            </TileContent>

                                        </tileContent>

                                    </GenericTile>

                </content>

            </Page>

        </pages>

    </App>

</mvc:View>

Now the color blue whatever i hv given it should come in the cutom numeric content.Why it is not coming can you tell me.

Br

Dibya

[Former Member]

Hi,

I dont know how you are achieving this , but why can't you add the style to the renderer section of the extended control like this Extending TextField Rendering - User Interface Add-On for SAP NetWeaver - SAP Library   ... you can get the color by getColor and add the style to the control ..

thanks

Viplove

[Former Member]

Hi,

The color code is coming from backend.

I want to map this Color field to my CustNumericContent whatever i have added above.As in the Numricconent of Generic tile their is no color prperties thats why i have extended the same.But some what the extend properties of color taking only one value ie my problem becase i have 10 tiles and 10 different color from backend.

Br

Dibya

[Former Member]

In your code you are using only one generic tile so how you will get more than one tiles ... you need to use tile container and bind the service to it with template as generic tile. like below:

1. <TileContainer
2. id="container"
4. tiles="{/<yourSet>}">

          <GenericTile class=""

                                        press="pressLearning">

                                        <tileContent>

                                            <TileContent  >

                                                <content>

                                                        <custom:CustNumericContent value="12"

                                                        icon="{Icon}" color="{Color}" >

                                                        </custom:CustNumericContent>

                                                </content>

                                            </TileContent>

                                        </tileContent>

                                    </GenericTile>

1. </TileContainer>

reference : SAPUI5 Explored

thanks

Viplove

[Former Member]

Hi Viplope,

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

Like Below Solution

sap.ui.define([

    'sap/m/NumericContent'

], 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: {

              "lostFocus":{}

          }

      },

      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 = !jQuery.sap.equal(this.getIcon(), uri);

  if (bValueChanged) {

  if (this._oIcon) {

  this._oIcon.destroy();

  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) {

    this._oIcon.setColor(color);

   }

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

  };

    // onfocusout: function(evt) {

     //     this.fireLostFocus();

     // },

return  CustNumericContent;

});

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

Br

Dibya

[SergioG_TX]

Dibya,

can you try adding a css class to the element ?