Progress Indicator color changing with css

[former_member303762]

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

[Vidhya · Accepted solution]

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

[former_member303762 · Accepted solution]

Hi,

Thank you so much for your help.

Regards,

Elias.Y

[Former Member]

/*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;
}

[former_member313183]

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 ?

[Vidhya]

Hi,

Please find the attached.

Regards,

Vidhya.C

[former_member303762]

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

[Vidhya]

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

[former_member303762]

Hi,

I just have installed this SDK.

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

Regards,

Elias.Y

[Vidhya]

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

[Vidhya]

SAP BusinessObjects Design Studio Release

1.6 SP2 Patch1 (Version: 16.2.2)

[former_member303762]

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

[Vidhya]

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

[former_member303762]

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

[Vidhya]

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

[former_member303762]

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