Change Background Colour for Different Values in a drop down control based on user selection

Hi Everyone,

I have a client requirement to change the background colour of values in a dropdown control based on user selection

For example, when user selects “Green” Option from the dropdown - the dropdown background colour should appear as “Green” similarly when user selects “Red” the background colour of dropdown should appear as “Red”.

Any inputs or suggestion to achieve the above requirement please?

@MMadeen

Users in the past have followed approaches through skin levels eg

  1. Change color in the drop down control through the skin by using inherited.

  2. Create a new format (My format) which changes only in the drop down background color, not in the Drop down selection background color.

Also bear in mind any browser specific issue.

The Pega documentation for your requirement may fall in one of these pages:

Control form - Completing the Control tab

Styling a control

Adding actions to a control

Specifying presentation options for a control

I will let other users comment who may have implemented the required logic required to change the colour immediately on value selection. There are some similar forum questions such as this one and this one .

Change Background Color for Different Values in a drop down control based on user selection forum post seems to be almost identical - did you try the suggestion already?

@MMadeen

For the dropdown control, put a class(like “DPControl”) in the properties control.

Then onclick/change of dropdown, you need to do RunScript and pass a parameter(say color). In the script, you would need to write a function where based on the parameter, you put the background color of the div with the classname “DPControl”.

function changeColor(color){

document.getElementByClassName(“DPControl”).style.backgroundColor = color;

}

@ChandraS2585

How to put a class(DPControl) in properties control.?

@MarijeSchillern

Thanks for reply,

But it can’t meet our requirement, it should always display a particular colour for that selected option, when we going to change the drop down value it should able to display the corresponding colour.

Madeen