Skip to Content
avatar image
Former Member

Progress Indicator color changing with css

I need to change the color of progress indicator bar in design studio with CSS instead of the default colors based on the state (Success,Error,Warning).

your help is much appreciated

Regards,

Youssef

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

8 Answers

  • Best Answer
    Dec 15, 2016 at 09:44 AM

    Hi,

    We don't have funnel chart or pyramid charts for free SDK.

    There are Download SAP Analytics partner extensions and please referrer the below links,

    https://blogs.sap.com/2015/03/08/design-studio-14-in-sap-learning-hub/

    http://www.visualbi.com/DSXTrial - Visual BI has developed funnel chart Extensions.

    Regards,

    Vidhya.C

    Add comment
    10|10000 characters needed characters exceeded

  • Dec 14, 2016 at 10:26 AM

    Hi,

    Yes, using CSS it is possible.

    Example:

    I have two progress indicator, One is green and another one is red.

    Using Progress Indicator Id, I'm writing CSS class name, Please find the below,

    #PROG_RED_control-bar { background: #E03E52 !important; }

    #PROG_GREEN_control-bar { background: #26A55D !important; }

    we can change the state color, using above CSS.

    Please let me know if you any further information.

    Regards,

    Vidhya.C

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member

      Thnx Vidhya for your response,

      but this css style affected the background of the progress bar not the bar itself (As shown in the screenshot below).

      Please let me if i can illustrate more.

      Regards,

      Elias.Y

      screenshot.png (3.0 kB)
  • Dec 14, 2016 at 11:59 AM

    Hi,

    Please let me know which version of Progress Indicator you are using?

    Please check the attached, I'm getting the result.

    progressindicator.png

    Regards,

    Vidhya.C

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member

      I'm using the progress indicator in the mMode in Release 1.6 SP3 Patch 1

      do you use the same component ?

      can you share with me the exact CSS code and which class you pass it to the progress indicator because I'm feeling that I'm doing it in a wrong way!!

      Regards,

      Elias.Y

  • Dec 14, 2016 at 12:22 PM

    Hi,

    I used same CSS code only.

    For more details, Please find the attached properties of my Progress Indicator,

    M Code is false.

    #PROG_RED_control-bar { background: #E03E52 !important; }

    Regards,

    Vidhya.C

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member Vidhya V

      Hi,

      we are not using the same component, my progress bar doesn't have any additional properties.

      Where i can find this component, is it sdk ?

      Regards,

      Elias.Y

  • Dec 14, 2016 at 12:44 PM

    Hi,

    Yes, org.scn.community.basics.ProgressIndicator component.

    It is available in SCN Design Studio Community. Please find the below link,

    http://org-scn-design-studio-community.github.io/sdkinstall/web/components/

    Regards,

    Vidhya.C

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member

      Hi,

      I just have installed this SDK.

      can you give me a screenshot of the CSS class you use !!?

      Regards,

      Elias.Y

  • Dec 15, 2016 at 06:05 AM

    Hi,

    Please find the attached.

    Regards,

    Vidhya.C

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member

      Hi,

      Thank you a lot Vidhya, it worked with the scn progress indicator but it does not work with progress indicator in mobile mode, i will try to work with scn sdk.

      please let me know if you know funnel chart (or pyramid chart) free sdk.

      thanks in advance.

      Regards,

      Elias.Y

  • avatar image
    Former Member
    Oct 03, 2017 at 12:52 PM

    Hi Youssef,

    I am facing the same issue. How did you solve it finally ? I did try to define in my CSS a new class inherited from the default one:

    .myProgressBad .sapUIProgIndBar { background-color: #CC3300 !important; }

    but it didnot work. Any idea of what I did wrong ?

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    May 09 at 01:40 AM

    /*Correspond to state:None*/
    .sapMPIBarNeutral {
           background:#A9A9A9 !important;
    }
    /*Correspond to state:Error*/
    .sapMPIBarNegative{
           background:#DC143C !important;
    }
    /*Correspond to state:Warning*/
    .sapMPIBarCritical {
           background:#FFA500 !important;
    }
    /*Correspond to state:Success*/
    .sapMPIBarPositive {
           background:#2E8B57 !important;
    }
    
    

    Add comment
    10|10000 characters needed characters exceeded