Custom Widget: Multi-state Widget

Any chance you can send me the script/custom widget code.?Then I can paste it myself using the custom widget and can change the code myself.

If I am successful I can send it back to you and you can commit?

Just a thought…

But Yes we should make it more confirgurable

  • font size for rows
  • custom labels (like in the selection widget perhaps)
  • size of switch or arrow buttons to allow for good touch experience

The widget contains the complete code - just in one line. Make search replace for \n to \n and \t to \t and you can see all.
Looking forward to see your changes!!

Hi Michael, all

Need still to learn… :slight_smile: but looked into it.

I found out that you can actually, when in settings mode, view the code directly already with some sort of highlighting… So no need to wrap the /n /T …

There is a code sections, a settings and a preview section. To start simple I added a new parameter called “item_fontsize” at the end. At the moment I do use the widget “Showvalues_ON” section to display the status of my windows.

So I quickly changed your ON/OFF to my windows sitecode mapping table “OPEN/CLOSED”. THAT works already.

Then I changed your hardcoded font-size: 16px to --> (config.item_fontsize + “px” ). My assumption was that If now go to config the widget and change the value of the fontsize parameter that the font would change. But it doesn’t.

I saved, refreshed the browser, deleted and re-added the widget on the dashboard but could not get this to work.

So a couple of how-to questions on

  • how do I correctly debug new code
  • how do I correctly test new code once saved
  • how do I correctly publish the widget to the dashboard once code changes has happend.
    —> e.g. developer guide but for beginners of openhab/panel :slight_smile:

You are talking to a Windows/Batch/VB/ person and not a linux, pyton, java person… so bear with me pls. Once I do get over this hurdle I will make some more modifications, promise.



         <div ng-if="(config.item_type=='Showvalues_ON')">
              <div ng-style="{'height': (itemValue( + '_soll')!='N/A') ? '40px' : '4px' }">
                    <button style="width:100%; height: 1em; border: 0; color: white; background: transparent; font-size: (config.item_fontsize + "px" ) " ng-click="">
                      <div ng-style="{'background-color': (itemState('OPEN') ? '#26FF33' : 'transparent' }">
                        {{itemState(,6)}}{{config.item_unit.replace("_"," ")}}
                        <div ng-if="(config.item_extension!=NULL)">
                          <div ng-if="itemValue( + config.item_extension)!='N/A'">
                            <div style="color:#606060;"> 
                        		[ {{itemState(,4)}}{{config.item_unit.replace("_"," ")}} ]
            <div ng-if="(config.item_type=='Showvalues_OFF')">
              <div ng-style="{'height': (itemValue( + '_soll')!='N/A') ? '40px' : '4px' }">
                    <button style="width:100%; height: 1em; border: 0; color: white; background: transparent; font-size: 16px" ng-click="">
                      <div ng-style="{'background-color': (itemState('CLOSED') ? '#26FF33' : 'transparent' }">
                        {{itemState(,6)}}{{config.item_unit.replace("_"," ")}}
                        <div ng-if="(config.item_extension!=NULL)">
                          <div ng-if="itemValue( + config.item_extension)!='N/A'">
                            <div style="color:#606060;"> 
                        		[ {{itemState(,4)}}{{config.item_unit.replace("_"," ");}} ]

is there a way to use this for venetian blinds (raffstore) by controlling the blind (open/close) and blade position?


@shorty707 The Widget is creating a table in html - this is far off from the layout you are looking for.

@Mario: I did the debuging main on try on error - so very time consuming. Meanwhile the Development support is better with the editor that does syntax highlighting etc

Is there a way to tell the widget to have NO icon when doing Windows?

Hi Michael,
I tried out your Widget, looks great - thank you. It works well with switches. But there is one thing I cannot find: How did you manage to show numbers (in your example, temperatures)? When I create a new widget, the possible item type selections are only “switch, toggle, rollershutter, windows, showvalues_ON, showvalues_OFF”.
What I do wrong?

Is it possible to trim the background window size to better match the list of items shown - before 1st item & after last item? If in your code, I can change font size, spacing, etc. but the background window always stays the same size.

very nice and simple widget for a noob like me,is there a way to change switch color from green to orange so it can match with my orange tree skin?

this is great for keeping on eye on all my exterior lights, if any is left ON

I have a problem using switch for a group of lamps in this template: clicking on the switch item only OFF commands are sent but the switch item changes the colour to green. Clicking again also OFF is sent to the item and the coulur changes back.
What is going wrong?


Could you modify the Widget so that it does not always show the first 4 chars of the values when Showvalues_(On/Off) is selected? Maybe make it configurable.

In addition a Showvalues without On or Off would be nice so it just displays the values.

The reason behind this is that I’m using the widget to monitor my washing mashine and my dryer. The states may be longer thatn 4 chars, e.g. “Finished” and it looks a little bit uggly to have one of 10 items with a green background just because “Remote Control Activation State” is “On”.

I’m using a custom widget that’s based on this one and since some time i have a problem with the order of my items…

i have three different groups with items like this:

Group WTx:
WTx1 Monday
WTx2 Tuesday
WTx3 Wednesday
WTx4 Thursday
Group WTy:
WTy1 Monday
WTy2 Tuesday
WTy3 Wednesday
WTy4 Thursday

items are listed exactly the same way in file.items
last year the items where listed correct in 3 different multi-state widgets, but now i have one widget with the correct order and two widget with “an alternative” (=wrong) order. already tried to restart openhab and to delete/re-add the widget, but it remains the same. Here’s what it looks like:

first part is correct (“Montag” is not visible / outside screen), second part with alternative order. below is a third widget - with a different order again.

has this happened to anyone? and: how can i fix this?


A nice widget.

I want to use it for a long List.
But the widget must have the size of the Number of the list.

How can i get a scroll down to have a small widget with the full list?
How can i get a scrollbar for long list in a small widget window? I dont understand how and where i have to change the code of the Widget for this case.

Hello. I would like to say that the plugin is excellent.
There is one small typo, you wrote “von” which I think is “of” in German, in this line:

{{config.item_header}} : {{(itemsInGroup(config.item_groupid) | filter:{state:'ON'}).length}} von {{(itemsInGroup(config.item_groupid)).length}}


just used your widget. Thnx for that.
Is there a way to sort the items when displayed? The listing seems random.


Good day,
Most of my lights are on dimmers, so would like to use this to display all of the Dimmer items, however, Dimmer is not a supported type. Also interested in showing groups of type Contact to cover doors and windows. Any plans to add? Thank you.

Update: I have been able to add Dimmer and Contact type support to the widget. For simplicity, I made Dimmer just like Switch - on/off only.

            <div ng-if="(config.item_type=='Dimmer')">
								<div style="height:30px;"><label class="myswitch">
                  <input type="checkbox" ng-checked="(itemValue('ON')||(itemValue(>0)" ng-click="sendCmd(, (itemValue('OFF') ? 'ON':'OFF')"/><div class="myslider round"></div></label>

Contact is similar to Window. Along the way I discovered the code can be confused if there are Things in the group that have never been used (status is NULL) so added handling on Contact for it but left other types alone.

            <div ng-if="(config.item_type=='Contact')">
				<div ng-if="(itemValue('OPEN')"> {{"open"}}  </div>
                <div ng-if="(itemState('CLOSED')"> {{"closed"}}</div>       
                <div ng-if="(itemState('NULL')"> {{"uninitialized"}}</div> 
              	<div ng-style="{'background-color': (itemState('OPEN') ? '#FF0000' : 'transparent' }">
                    <button style="width: 100%; height: 2em; border: 0; color: white; background: transparent; font-size: 16px" ng-click="">
                        <div ng-if="((config.item_icon_iconset)==NULL)"><widget-icon iconset="'freepik-household'" icon="'door'" /></div>
                        <div ng-if="((config.item_icon_iconset)!=NULL)"><widget-icon iconset='config.item_icon_iconset' icon='config.item_icon' /></div>

I would like to use the widget, but I have problems with the basics. Unfortunately, I do not know where to get the GroupID. and I do not know how I can create a group, or how I can get in there devices, can someone help me?

Hi Matt

I have a similiar issue, I see you used config.item_type==‘Dimmer’

How does this work? My config is

<div class="widget" ng-if="item.type=='Dimmer' && itemValue('OFF'" ng-click="sendCmd(, 'ON')">

but fails.

Did you some how define item type as dimmer somewhere or does it recognise it?


Is there a way to change text size and alignment?