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

[Elizabeth_Engler]

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?

I think this is referring to victordcq's js/html injection technique using the markdown component: 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.

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.

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