Widget: Item Dashboard

Custom Widget: Item Dashboard

Provides a list-like display of items and their states

Download:

ItemDashboard.widget.json (5.1 KB)

Demo

itemdashboard

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

6 Likes

Thanks for this again lucky im going to look at this tonight how easy would it be to add a last changed date for a couple of these items

I’ll add an option for adding it and where it’s placed

1 Like

I have tried this out now and I’m rather happy with it thanks for that again.

Couple of things
Did you manage too add the last changed to a coupe of the items as you said?

The dashboard doesn’t update when something changes like motion you have too close habpannel and completely reload for it too update is this changeable?

Thank you very much, but I have two Problems with it.

  1. if Item changed, the change would not be visible in your widget.
  2. After a browser reload of the habpanel no Item is visible anymore.

Any Ideas ?

Regards
Thorsten

was anybody able to fix this not updating when the item changed?
and not being visible after a reload.
I assume its got something to do with the way the string is created for the items.

If you change it to items in group it works, and updates. But i have no idea how to do this myself.

Hello,

if you change ist to “items in Group”, you do not have any influence to the sequence.

I do not understand why this should make a different. Other Widget with simple items also works…

Regards

Hello,

I found the problem…

<div class="col-xs-12" ng-init="actualItem=getItem(itemName)">

The ng-init only runs at the first page load, not at the refresh.
I changed it to
<div class="col-xs-12" ng-model="actualItem=getItem(itemName)">

and everything works fine (for me).

Reagrds

1 Like