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

I'd like to be able to add an icon (with position: left, centre?, right) with colour / styling into the items of a dropdown menu list.

I have a dropdown list where an operator can select items to produce. If the item has already been produced, it will have a check next to it, but they will still be able to select it to make it again. (sounds a bit odd, but that's the requirement)

3 Likes

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


4 Likes

Coool :slight_smile: remind me how to assign a data-label to a dropdown item? Or is this literally the props.option?[0].label prop value?
Also (I know I'm being difficult haha) but is it possible to use a material.io icon from the material icon library? (or I could just import this into the Image browser I guess - I've already downloaded them all as SVGs)

yes this, tho idk what happens with translations

idk where that material lib is located, but you can put svgs in the content too

url('data:image/svg+xml;utf8,<svg ...> ... </svg>')
1 Like

Awesome, hopefully this will get me out of trouble for now! Thanks, as always :slight_smile:

PS. this is how icons are used:
image
I guess I can just plug that in... I'll give it a go

yeah i know, it doesnt seem like they directly use the svg file url for the component. But maybe its still accesible elsewhere.

i believe some ppl have added stuff to this library before, you might find it on the forum to get some clues

I've got my own SVG libraries, they're all added here:

c:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\icons

I guess I could always add them to the webserver folder as well :thinking: they're libraries of multiple SVG definitions though, so I wouldn't know how to pull one of them out

url('/data/perspective/icons/material.svg#insert_emoticon')

hehe you'll need to add some sizes to it
image

might be easier to use it as background img than instead (need a, nonemtpy content still tho)

styles=".iaDropdownCommon_options [data-label='YourLabel']:before {  padding:10px; content:' '; background-image: url('/data/perspective/icons/material.svg#insert_emoticon');	}"

image

2 Likes

Very cool :slight_smile:

image

1 Like

The data-label attribute is the text of the dropdown item as displayed to the user, so it will change along with translations.

2 Likes

this is awesome! thanks for sharing this.

I've been wanting the ability to do this for a long time :smiley:

1 Like

How do I do this? The "usual" part is not clear to me. I have a Perspective drop-down with value - label (1, "Station One"), (2, "Station Two"), and (3, "Station Three"). I want to show a check mark on various workstations.

1 Like

Js injection is done with a markdown component, and turn off the escape html . Put the code on a binding on the source.
Careful dont let user data entere these bindings, it could be harmful

2 Likes

Piggy-backing off victordcq and Felipe_CRM, I used this method to add unique background colors to each dropdown option:

1 Like