Custom Widget: Item Dashboard
Provides a list-like display of items and their states
Download:
ItemDashboard.widget.json (5.1 KB)
Demo
Configuration
Configuration is self-explanatory except for the mapping.
State Map
The icon and color change based on the state of the item. The Icon and color are mapped according to the configuration you provided. If you do NOT provide a map, the icon and color will not be displayed, but the item label will remain.
Default Map
{
"OPEN": {
color: "red",
icon: "glyphicon-remove-sign"
},
"CLOSED": {
color: "green",
icon: "glyphicon-ok-sign"
},
"OFF": {
color: "green",
icon: "glyphicon-ok-sign"
},
"ON": {
color: "red",
icon: "glyphicon-remove-sign"
}
}
State Map is a JSON-formatted string that has this structure:
{
"STATE1": {
color: "css-valid color",
icon: "bootstrap glyphicon to use"
},
"STATE2": {
color: "css-valid color",
icon: "bootstrap glyphicon to use"
},
...
}
Thid means you can customize your own mapping. For example, you can map based on a Number or a String Item:
{
"Hello": {
color: "css-valid color",
icon: "bootstrap glyphicon to use"
},
"1": {
color: "css-valid color",
icon: "bootstrap glyphicon to use"
},
...
}
Icons
The widget uses Bootstrap Glyphicons that can be found here
Multiple Widgets in a Page
The widget uses a unique id when creating styles, so you can have as many Item Dashboard Widgets and they will all have their own unique styles that you can set per widget.
Widget Header Text
The widget header text is retrieved from the “Name” when you configure the widget
Widget is also resizable
