Custom Widget: Multi-state Widget

The HABpanel excited me from the first moment on! Great job and congratulations to all supporters!!

For all my items I could not find one widget, that displays the items plus values of one group. I also wanted to offer to change all of them at once and I wanted to have more transparancy in my heating and rollershutters etc etc.
The side condition was: No global css - everything should run out of the box.
So I started to work on this widget.

Please find attached the possibilities how to use this widget in the picture, plus the widget itself.

… it is still under construction, but I wanted to share this status.

Enjoy !!


MultiState.widget.json (11.6 KB)


Here the config for a simple switching of items:

1 Like

Great stuff @martmiwp!

I have changed the title and retagged your topic so it appears in the widget gallery :slight_smile:


I have a question: in which order are the group items displayed? Can I change the sort order?

… the order seams to match the order in the items file. This is my experience.

Restarted my system and then indeed the sort order matches my items file.

I was wanting to edit the MultiState widget to customise it a bit… But I can’t find where it lives on my system.

Currently using 2.3.0-snapshot and have installed it via the Custom Widgets feature on HABpanel… Where does the json code get stored on the filesystem to edit?


Oh… And what did you use to edit this? A single 10kB line to edit is a bit much for me… I need my code to be formatted for readability… I’m too old to try & code on a single line.

Copy into an editor and replace \n <file://n> in to \n and \t <file://t> and \t … this makes it editable …


Not that I can’t do that, but I was hoping there was something magic that I was missing, because otherwise any updates fed back to git are going to be quite a large diff (i.e. change 1 char, get a 10kB unreadable diff all on one line)


*.widget.json files are only for exporting/importing purposes, it’s not recommended to edit them.
After importing it use the code editor embedded in HABPanel.

Then how are you supposed to create new custom ones?

With the “New widget” button?

Please refer to

Right… I didn’t know about the built-in editor… Thanks for that. Sometimes it take a small blunt instrument.

But my original point was all the code on one line. Meaning a small change is a large diff. Easy to read in the built-in editor. But not easy to read out of it. (Not a complaint, just an observation)

Sure, no worries.
No multi-line strings in JSON is a problem in this case indeed; there are a number of hackish workaounds like but none are ideal unfortunately. :roll_eyes:

The second value for references how can i use it?


"If a second value shall be displayed as a reference, the name variable must be identical plus the value. E.g. Temp1 and Temp1_soll by naming “_soll” "

The trick is in the variable name itself.
Your need the
Number Temp1
Number Temp1_soll

By adding the “_soll” into the field, the Temp1_soll is automatically found and displayed in parallel to the Temp1.


Thanks Michael

Hi There,

I like this widget and its working in principle for me. However one question . On your initial pictures in this post you do have illustrated nice little “green” boxed with white text as information for “ON” .

I Do use “Open” and “Closed” as mappings in my sitemap. How can I configure that I do get this color separation too? At the moment its just showing the “Text”

Many thanks for an answer

This is hard coded to match ON/OFF …
Maybe I can look into this - but not sure how and when