cancel
Showing results for 
Search instead for 
Did you mean: 

Object Status - customizing color of the state

andres_levano
Explorer
0 Kudos

Hi guys,

I'm trying to customize the color of an object status, I'm using this code:

in order to set a different status depending on a value, and it's working fine. The thing is I need to add other colors. Is it possible to add more colors? I saw that is possible to handle it in a <script> </script> area, but then I don't know how to use it with this example.

Any hint or tip will be very usefull.

Thanks in advance!

Andrés

Accepted Solutions (0)

Answers (4)

Answers (4)

andres_levano
Explorer
0 Kudos

Hi gurus,

finally I handle the different colors in the icon of the Object Status:

1. I create the classes to handle the color in the css file

2. Then the importante part, I use "onAfterRendering" to set the logic in order to use different colors, then I get the icon instance "item.$().find('.sapUiIcon');" and there I use the new class with "addClass"

3. What I get is something like this:

I stay with the doubt of how change the color of the status.

Thank you very much for your time!

Andrés

former_member182372
Active Contributor
0 Kudos

do you use sap.m.Table?

here is an example

this.byId("DashboardColumnListItem").addDelegate( {

  onAfterRendering: function () {

  if ( this.getBindingContext().getObject().Expedite )

  {

  this.$().css("background-color", "#FFCAD5");

  }

  }

}, false, this.byId("DashboardColumnListItem"), true);

<Table ....

  <items>

  <ColumnListItem id="DashboardColumnListItem"...

karthikarjun
Active Contributor
0 Kudos

I agree with Maksim and Joshi. Refer this working example. http://plnkr.co/edit/8yWKJL9EbW7wuX5mjO1f?p=preview

Regards,

Karthik A

former_member9607
Active Participant
0 Kudos

Hi Andrés,

Try this.

  1. Create CSS classes for your different color options.
  2. Create a string variable sColor before oStatus to hold css class value.
  3. In your switch cases, give a css class value to sColor as per your case.
  4. At the end, apply that selected css class to your control.

          oStatus.addStyleClass(sColor);


I hope it will work for you. In case it doesn't apply the color, use !important in your css class and try again.


Read the documentation for styling objects.


addStyleClass, toggleStyleClass, removeStyleClass



Cheers,

KK


former_member182372
Active Contributor
0 Kudos

oStatus.addDelegate( {

  onAfterRendering: function () {

if( CONDITION )

     this.addStyleClass("customClassName"); 

  }

});

SAPUI5 SDK - Demo Kit