Skip to Content
0

Progress Indicator color changing with css

Dec 14, 2016 at 09:51 AM

459

avatar image
Former Member

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

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

8 Answers

Best Answer
Vidhya V Dec 15, 2016 at 09:44 AM
0

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

Show 1 Share
10 |10000 characters needed characters left characters exceeded
Former Member

Hi,

Thank you so much for your help.

Regards,

Elias.Y

0
Vidhya V Dec 14, 2016 at 10:26 AM
0

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

Show 1 Share
10 |10000 characters needed characters left 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)
0
Vidhya V Dec 14, 2016 at 11:59 AM
0

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


Show 1 Share
10 |10000 characters needed characters left 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

0
Vidhya V Dec 14, 2016 at 12:22 PM
0

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


properties1.png (14.9 kB)
properties2.png (9.0 kB)
Show 2 Share
10 |10000 characters needed characters left characters exceeded

SAP BusinessObjects Design Studio Release

1.6 SP2 Patch1 (Version: 16.2.2)

0
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

0
Vidhya V Dec 14, 2016 at 12:44 PM
0

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

Show 1 Share
10 |10000 characters needed characters left 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

0
Vidhya V Dec 15, 2016 at 06:05 AM
0

Hi,

Please find the attached.

Regards,

Vidhya.C


css.png (3.1 kB)
Show 1 Share
10 |10000 characters needed characters left 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

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

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 ?

Share
10 |10000 characters needed characters left characters exceeded
avatar image
Former Member May 09 at 01:40 AM
0

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


Share
10 |10000 characters needed characters left characters exceeded