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

Ignition
1

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
2

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
image884×128 8.6 KB

3 Likes
3

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)

4

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
5

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

6

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

7

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

8 
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

1 Like
9

Very cool :slight_smile:

image

1 Like
10

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
11

this is awesome! thanks for sharing this.

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

1 Like