# Change color for each option based on some category for Perspective Dropdown Component

**URL:** <https://forum.inductiveautomation.com/t/change-color-for-each-option-based-on-some-category-for-perspective-dropdown-component/37952>\
**Category:** Ignition\
**Tags:** ignition80, perspective\
**Created:** [August 20, 2020, 4:21pm UTC](https://forum.inductiveautomation.com/t/change-color-for-each-option-based-on-some-category-for-perspective-dropdown-component/37952 "2020-08-20T16:21:41Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![harigobu.gb](https://avatars.discourse-cdn.com/v4/letter/h/b77776/32.png) [@harigobu.gb](https://forum.inductiveautomation.com/u/harigobu.gb)\
**Post date:** [August 20, 2020, 4:21pm UTC](https://forum.inductiveautomation.com/t/change-color-for-each-option-based-on-some-category-for-perspective-dropdown-component/37952/1 "2020-08-20T16:21:41Z")

</div>

Hi,

How to change the color for each option dynamically when the page is loaded based on the categories. Options will be binded from database using named query.

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![Elizabeth\_Engler](https://avatars.discourse-cdn.com/v4/letter/e/e9bcb4/32.png) [@Elizabeth\_Engler](https://forum.inductiveautomation.com/u/Elizabeth_Engler)\
**Post date:** [February 12, 2024, 4:48pm UTC](https://forum.inductiveautomation.com/t/change-color-for-each-option-based-on-some-category-for-perspective-dropdown-component/37952/2 "2024-02-12T16:48:06Z")

</div>

I second this. I would like to do this as well, but have not been able to find a way.

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [February 12, 2024, 5:29pm UTC](https://forum.inductiveautomation.com/t/change-color-for-each-option-based-on-some-category-for-perspective-dropdown-component/37952/3 "2024-02-12T17:29:40Z")

</div>

It's important to clarify which version you are on. The Dropdown currently (8.1.38) only allows for setting the style of ALL items to be the same.

If you know CSS and are using 8.1.22 or newer, you could conceivably alter individual options to display based on their label by maiking use of the stylesheet.css resource.

```css
.iaDropdownCommon_options[data-label="KnownText"] {
    color: #FF0000
}

```

You would need to add a rule like this for every known text. Terrible if there is an unknown set of options. Not so bad if the set is known and finite.

---

<div class="post-metadata">

**Author:** ![Elizabeth\_Engler](https://avatars.discourse-cdn.com/v4/letter/e/e9bcb4/32.png) [@Elizabeth\_Engler](https://forum.inductiveautomation.com/u/Elizabeth_Engler)\
**Post date:** [February 12, 2024, 7:19pm UTC](https://forum.inductiveautomation.com/t/change-color-for-each-option-based-on-some-category-for-perspective-dropdown-component/37952/4 "2024-02-12T19:19:37Z")

</div>

My particular set of dropdown options is always changing. The number of options and the labels will vary. I want to set their color based on some other stored information I have for each option. Trying to think of a way to do this using stylesheets...

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [February 12, 2024, 7:28pm UTC](https://forum.inductiveautomation.com/t/change-color-for-each-option-based-on-some-category-for-perspective-dropdown-component/37952/5 "2024-02-12T19:28:03Z")

</div>

I suggest that you use a table instead and "roll your own". You can make it perform like a dropdown, depending on your view type.

- If the view is coordinate then toggle the visibility of the table and position it relative to the "dropdown" (which could be made of a text field and button with a down arrow icon).
- If the view is flex then put the table below the "dropdown" and have it shove everything else on the page down when open.
- Another option is to have the "dropdown" open a popup with the table on it. Use a message handler to send the selection back to the main view.

---

<div class="post-metadata">

**Author:** ![Elizabeth\_Engler](https://avatars.discourse-cdn.com/v4/letter/e/e9bcb4/32.png) [@Elizabeth\_Engler](https://forum.inductiveautomation.com/u/Elizabeth_Engler)\
**Post date:** [February 12, 2024, 8:30pm UTC](https://forum.inductiveautomation.com/t/change-color-for-each-option-based-on-some-category-for-perspective-dropdown-component/37952/6 "2024-02-12T20:30:41Z")

</div>

I finally figured out how to do it. I used the method shared here:

> [@\[SOLVED\] How would I color individual dropdown labels? Or how would I add an icon to each?](https://forum.inductiveautomation.com/t/solved-how-would-i-color-individual-dropdown-labels-or-how-would-i-add-an-icon-to-each/79364/5):
>
> I think this is referring to victordcq's js/html injection technique using the markdown component: [https://docs.inductiveautomation.com/display/DOC81/Perspective+-+Markdown](https://docs.inductiveautomation.com/display/DOC81/Perspective+-+Markdown) I've never tried it but there's some example projects that might shed some light on how it's done: If I figure out how exactly to use it, I'll reply with more details. Or maybe someone else will chime in. EDIT: I got it working like this. So the injection works on the dropdown option's label value, in this case, "YourL…

In their solution, they were able to set a specific style for each drop down option, adding a checkmark image to certain options. I just modified it to add on to the "styles" variable for each option, and set a background-color rather than adding content.

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/9/09ba8de523f3b951e836b109d82da5dc060f1f74.png)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/6/e6d33d8f4d9ab8a53a726ee0d24776f5727e7ac7.png)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/6/561968fff3246fa4e19bc168e12ef379e2ed3b13.png)

I'm using a list of options that I get from my database (it changes all the time). I loop through these options and check a time variable for them to determine if we are running late or on time. Based on the conditions, I set a background color for the option. Then append a styles script for each option to my "styles" variable. I did not have to bind the Markdown component to my dropdown. I'm assuming that the .iaDropdownCommon\_options applies the styles to any dropdown found in the same view? - I'd like clarification on that if anyone knows.. But I'm not sure... just happy that this is working for me!

Also, I set the Markdown component's "display" to false, to hide it from the user.

```auto
def transform(self, value, quality, timestamp):
	styles = ''
	trailersPy = system.dataset.toPyDataSet(self.view.custom.TrailersOnsite)
	for trailer in trailersPy:
			trailerNum = trailer[1]
			lastEdited = trailer[5]
			#Determine if trailer has been checked (green), missed (orange), or late for a check (yellow), or just awaiting a check (white).
			#Trailer Back Color
			trailerBackColor = 'transparent'
			if system.date.minutesBetween(lastEdited, system.date.now()) > 150:
				# Over 2.5 hours since last check. Check was missed.
				# ORANGE
				trailerBackColor = '#F7901D'
			elif system.date.minutesBetween(lastEdited, system.date.now()) > 120 + 15:
				# Over 2 hours and 15 minutes since last check. Check is running late.
				# YELLOW
				trailerBackColor = '#FFF800'
			elif system.date.minutesBetween(lastEdited, system.date.now()) >= 120 - 15:
				# Last check was 1 hour and 45 minutes ago. Needs new check soon. (30 minute window)
				trailerBackColor = 'transparent'
			elif system.date.minutesBetween(lastEdited, system.date.now()) < 120 - 15:
				# Check happened within past 1 hour and 45 minutes. On Time.
				trailerBackColor = '#AAFFA1'
			
# styles = ".iaDropdownCommon_options [data-label='"+ trailerNum +"']:before { content: url('/system/images/Builtin/icons/16/check2.png');	}"
			styles = styles + ".iaDropdownCommon_options [data-label='"+ trailerNum +"'] { background-color: " + trailerBackColor + ";	}"
	
	code = """<style>
		"""+styles+"""
	\"></style>""".replace("\n", "").replace("\t", "")

# Copied and tested from Felipe_CRM's answer:
#	styles=".iaDropdownCommon_options [data-label='YourLabel']:before { content: url('/system/images/Builtin/icons/16/check2.png');	}"
#	styles2=".iaDropdownCommon_options [data-label='Another Label']{ background-color:#AAFFA1}"
#	code = """<style>
# """+styles+styles2+"""
#	\"></style>""".replace("\n", "").replace("\t", "")
	
	return code

```

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [February 13, 2024, 7:42am UTC](https://forum.inductiveautomation.com/t/change-color-for-each-option-based-on-some-category-for-perspective-dropdown-component/37952/7 "2024-02-13T07:42:02Z")

</div>

> [@Elizabeth\_Engler](#):
>
> .iaDropdownCommon\_options applies the styles to any dropdown found in the same view?

it works on any dropdown on the screen, if this view is loaded in.

If want to specify only a certain dropdown, you best use a meta property domId  
and add `#yourdomid` infront  
`#MyUniqueDropDownId .iaDropdownCommon_options ...`

---

<div class="post-metadata">

**Author:** ![Elizabeth\_Engler](https://avatars.discourse-cdn.com/v4/letter/e/e9bcb4/32.png) [@Elizabeth\_Engler](https://forum.inductiveautomation.com/u/Elizabeth_Engler)\
**Post date:** [February 13, 2024, 2:08pm UTC](https://forum.inductiveautomation.com/t/change-color-for-each-option-based-on-some-category-for-perspective-dropdown-component/37952/8 "2024-02-13T14:08:00Z")

</div>

> [@Elizabeth\_Engler](#):
>
> `styles = styles + "#TrailerDropdown .iaDropdownCommon_options [data-label='"+ trailerNum +"'] { background-color: " + trailerBackColor + ";	}"`

I tried adding a domID to the dropdown's Meta props and in front of the styles script, but doing so broke it. The dropdown doesn't display any colors then. I recognize the #id syntax for CSS stylesheets and I think it is correct, so I'm not sure why it doesn't work in this case.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [February 13, 2024, 3:41pm UTC](https://forum.inductiveautomation.com/t/change-color-for-each-option-based-on-some-category-for-perspective-dropdown-component/37952/9 "2024-02-13T15:41:17Z")

</div>

Ahh no i remember, it wont work like that  
the dropdown is a "popup" that is not nested isntde the component. so yeah that wont work

you could add a classes in though i think  
dropdownOptionStyle.class

---

<div class="post-metadata">

**Author:** ![Elizabeth\_Engler](https://avatars.discourse-cdn.com/v4/letter/e/e9bcb4/32.png) [@Elizabeth\_Engler](https://forum.inductiveautomation.com/u/Elizabeth_Engler)\
**Post date:** [February 13, 2024, 4:20pm UTC](https://forum.inductiveautomation.com/t/change-color-for-each-option-based-on-some-category-for-perspective-dropdown-component/37952/10 "2024-02-13T16:20:25Z")

</div>

Tried this:

```auto
styles = styles + "dropdownOptionStyle.trailer [data-label='"+ trailerNum +"'] { background-color: " + trailerBackColor + ";	}"

```

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/2/e20862611506749350b1b267a10c31a482aea930.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/6/265a66b9941340f88edf2cf090bc7f1c982c76fb.png)

Also tried this:

```auto
styles = styles + ".trailer [data-label='"+ trailerNum +"'] { background-color: " + trailerBackColor + ";	}"

```

Neither of those worked. Did I understand the usage correctly?

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [February 14, 2024, 7:54am UTC](https://forum.inductiveautomation.com/t/change-color-for-each-option-based-on-some-category-for-perspective-dropdown-component/37952/11 "2024-02-14T07:54:17Z")

</div>

> [@Elizabeth\_Engler](#):
>
> `.trailer [data`

close 😛  
Ignition adds "psc-" infront of every custom class

Add you have to remove the space for this case. a space indicated its a nested element. For this case both class and label are on the same element so not nested. This is something you can only know using the inspector and see where the class gets applied.

`.psc-trailer[data-label=`...

---

<div class="post-metadata">

**Author:** ![bmeyers](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmeyers/32/37453_2.png) [@bmeyers](https://forum.inductiveautomation.com/u/bmeyers)\
**Post date:** [June 18, 2024, 1:07pm UTC](https://forum.inductiveautomation.com/t/change-color-for-each-option-based-on-some-category-for-perspective-dropdown-component/37952/12 "2024-06-18T13:07:38Z")

</div>

I have several dropdown components with the same data presented in different groups. Some dropdown components might have the same data in them. On one particular dropdown I want to add icons to specific users in that dropdown.

I have applied a unique style to this one dropdown component called Add\_Test\_Project\_Engineer\_Custom.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/4/94d67503026e9fe5feae027dd47cdf0a387961cd.png)

The following transform does add icons to specific users but it does it to all dropdown components on the view.

```python
def transform(self, value, quality, timestamp):
	
	tests = value
		
	# Get all tests that don't have a valid workstation
	testNames = [test['USR'] for test in tests if not test['ValidUser']]
	
	# Generate a css selector for each test
	testCssSelector = lambda testName: ".iaDropdownCommon_options [data-label='{}']:after".format(testName.replace("'", "\\'"))
	
	# Concatenate together those css selectors
	concatenatedTestCssSelectors = ', '.join(testCssSelector(testName) for testName in testNames)
	
	# Apply the following styles to all matching tests
	return '''<style>
		{cssSelectors} {{
			content: url('/system/images/Builtin/icons/16/warning.png');
			float: right;
		}}
	</style>
		'''.format(cssSelectors = concatenatedTestCssSelectors)
```

If I change the following line

```python
return ".iaDropdownCommon_options [data-label='{}']::after".format(testName.replace("'", "\\'"))
```

to this new line

```python
return ".psc-Add_Test_Project_Engineer_Custom .iaDropdownCommon_options [data-label='{}']::after".format(testName.replace("'", "\\'"))
```

Now none of the dropdown components show an icon.

I assume I am not targeting the dropdown component property.

Any ideas on what I am doing wrong?

---

<div class="post-metadata">

**Author:** ![bmeyers](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmeyers/32/37453_2.png) [@bmeyers](https://forum.inductiveautomation.com/u/bmeyers)\
**Post date:** [June 18, 2024, 1:18pm UTC](https://forum.inductiveautomation.com/t/change-color-for-each-option-based-on-some-category-for-perspective-dropdown-component/37952/13 "2024-06-18T13:18:56Z")

</div>

Nevermind. I was doing 2 things wrong.

1. I was applying the custom style to the style property instead of the drodownOptionStyle property.

2. I didn't need to include .iaDropdownCommon\_options anymore.

Updated code:

```python
testCssSelector = lambda testName: ".psc-Add_Test_Project_Engineer_Custom[data-label='{}']:after".format(testName.replace("'", "\\'"))
```

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [June 18, 2024, 1:28pm UTC](https://forum.inductiveautomation.com/t/change-color-for-each-option-based-on-some-category-for-perspective-dropdown-component/37952/14 "2024-06-18T13:28:58Z")

</div>

also be careful with spaces between css selectors, they matter ^^ the spacing between your samples are inconsistent