Creating your own traffic light style custom fields

Getting started

I've been asked on a number of occasions if it's possible to create your own traffic light style custom fields. Some uses of these traffic lights are to graphically designate urgency, tag items for various reasons, etc. You can use this kind of traffic light field on practically any item type in PI. This is how you do it...

1. Create a new custom field and select Combobox as the input control
2. Make sure you explain what the values mean in the help text. This is especially needed if you are just putting the traffic light in the list values without text
3. Enter in the code for the traffic lights in the list values (there are examples later in this post)
4. Put an order value in so that the traffic lights show in the selector list in the order you want them. In this example, I want green to be first, yellow to be second, and red to be last
5. Check the "Show as Report Filter" and "Enable Group By" boxes to enhance your reporting
6. [Save]

Code Examples

----------IMAGE Hexadecimal Colors -----------
Green = 008000
Yellow = FFD200
Red = CC0000

----------CODE for IMAGE DIVs -----------
<div style="F; width: 16px;height: 16px;background:#008000;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;text-indent:18px;white-space:nowrap;"></div>

<div style="D; width: 16px;height: 16px;background:#ffd200;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;text-indent:18px;white-space:nowrap;"></div>

<div style="B; width: 16px;height: 16px;background:#CC0000;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;text-indent:18px;white-space:nowrap;"></div>

Key to the code