Skip to Content

Object Status - customizing color of the state

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

Add a comment
10|10000 characters needed characters exceeded

Assigned Tags

Related questions

4 Answers

  • Posted on Jan 12, 2016 at 06:37 AM

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

    Regards,

    Karthik A

    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on Jan 11, 2016 at 09:06 PM

    oStatus.addDelegate( {

    onAfterRendering: function () {

    if( CONDITION )

    this.addStyleClass("customClassName");

    }

    });

    SAPUI5 SDK - Demo Kit

    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on Jan 12, 2016 at 06:03 AM

    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


    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on Jan 12, 2016 at 08:27 PM

    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


    Add a comment
    10|10000 characters needed characters exceeded

    • 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"...

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.