Change the background and icon color of the Dropdown Component's button:

I have figured out a better way of doing this. Instead of targeting the button, the new method changes the background of the text area and dropdown menu without effecting the button or the border. Therefore, the button color is still controlled by the traditional background property while the rest of the component is changed through scripting by replacing the dropdown's cell renderer with a custom renderer.

Here is the result:
image

image

Here is the script:

from com.inductiveautomation.plaf import ComboListCellRenderer
if event.propertyName == 'componentRunning':
	# Override the cell renderer for custom functionality
	class ColorCellRenderer(ComboListCellRenderer):
		def getListCellRendererComponent(self, list, value, index, isSelected, cellHasFocus):
			ComboListCellRenderer.getListCellRendererComponent(self, list, value, index, isSelected, cellHasFocus)
			if cellHasFocus or isSelected:
				self.background = event.source.selectionBackground
			else:	
				self.background = system.gui.color('black')
			return self
	renderer = ColorCellRenderer()
	event.source.setRenderer(renderer)

Edit: Updated this code, so it has proper interactions with the Ignition look and feel in versions 8.0.x and 8.1.x

1 Like