[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

4 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

2 Likes
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
12

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
13

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
14

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

1 Like