[SOLVED] How would I color individual dropdown labels? Or how would I add an icon to each?

[bmeyers]

I have a Perspective drop-down component with multiple options (value / label pairs). Is there a way to change the background color of a particular option based off of the label? For example, if I have a label "Workstation1" and want to make that particular selection a red background how would I do that? Alternatively, I would accept adding an icon to various Workstations from the list. I am familiar with CSS injection, and the stylesheet.css, I am just unsure of how to implement the actual color change and/or icon addition.

There are some earlier threads on the forums but they seem to go right from drawing a circle to drawing the owl.

[Felipe_CRM]

The post by @victordcq goes into pretty good detail about what CSS to use and where, or are you trying to do something different to this?

Color change on a label

(might need to put in style for translations too, if you have any) [image] .psc-magicColors [data-label="red"]{ background-color:red; } .psc-magicColors [data-label="blue"]{ background-color:blue; } .psc-magicColors [data-label="green"]{ background-color:green; } .psc-magicColorsOptions[data-label="yellow"]{ background-color:yellow; } @mjohnson0238 put this in your stylescheet.css [image] (note the spaceing difference for the options magicColors [data-label and magicColors…

[bmeyers]

That worked for me. This link didn't come up in my original search.

Is it possible to inject this dynamically at load time however without stylesheet.css? The user that is requesting this is still running 8.1.21 which does not include stylesheet.css

[bmeyers]

This is where I get lost.

[FEATURE] Add ability to add Icon and styling to Perspective Dropdown items

put this in the markdown component binding like usual you'll ofc will have to add some python logic to append the style string based on the required labels in de dropdown (idk if everyone has these Builtin/icons or is it from my test project?) styles=".iaDropdownCommon_options [data-label='YourLabel']:before { content: url('/system/images/Builtin/icons/16/check2.png'); }" code = """<style> """+styles+""" \"></style>""".replace("\n", "").replace("\t", "") return code [image]

I think @victordcq means put the code on the dropdown component binding however it is never stated what binding to put it on.

[Felipe_CRM]

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:

Javascript inject in Perspective... have fun

Soo i'll just link this here... You can do whatever with it, but its not really gonna be clean or easy xD Have fun WARNING Dont let userinput enter in here [image]

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, "YourLabel".

Somewhere on the same view, you want a markdown component, it can probably be invisible but in this case I have it visible because I'm just using the existing example:

Make sure the markdown.escapeHtml prop is set to false and the binding you want to set is on the source prop:

The injection payload goes inside the script transform.

[bmeyers]

You figured it out 3 minutes before me. I had downloaded his project dndjsinject and figured it out finally.

Thank you for your help! I won't repeat your work here since you already added all the screenshots.

[Transistor]

Tip: we don't edit our question titles with [SOLVED]. We're much more discreet and just used the Solved checkbox (which you've correctly done) and it's automatically shown on the forum index.
Subtle is good!

[Elizabeth_Engler]

Piggy backing off Felipe_CRM - I used the method to change background color: Change color for each option based on some category for Perspective Dropdown Component - #6 by Elizabeth_Engler