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

Ignition
,
6

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

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

image
image1034×326 45.7 KB

image
image1372×606 43.8 KB

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
4 Likes