Building Pages in the OH3 UI: documentation draft (2/3)

I have no clue how to change the colors for a slider.

The color from the dimmer slider changes with the posted code, but not the button background (like on normal switch icons) what I was looking for :rofl:
So maybe this is a bug in OH3.

Don‘t think its a bug, but wrong config param.

would be nice to not flood this with more off topic like @hilbrand already mentioned correctly…
This is about a documentation article and not about user support.

User support needed => Please open a dedicated topic in the correct area.

1 Like

What is your alternative for a drop down selection?

Command options
It will give a popup with the specified options which will be passed as a command to the item

1 Like

Questions from begginner:
How to ged rid of prefix in the group details and also NULL (I plan to use badge instead)

Should I configure it in model definition or in page definition?

Is it possible for label to combine item value + icon?
someting like this:

label: =items.Temperature.state + " °C" + oh:temperature

Change the State formatting metadata to just a space or blank.

I don’t think it’s possible to combine the icon and text in the same element on the page.

Should this also work with other operators?

I tried to edit it to a greater then condition, but failed:

color: '=(items.testItem.state > "50") ? "green" : "red"'

You are compairing against a String („50“)…

Thanks, i thought it would be a question of converting, but i am not sure how to do it exactly. I tried some trial and error, but without success.

In this example even better would be have tv power status

but I can’t assigne badge. Maybe Im doing this in wrong place

I don’t think it’s possible to change anything about the appearance in the Model view.


i want to give you some feedback on the tutorial, as i used it to build a control-list for my RGBW Stripes which i use for main lighting. I have very low experience in programming and I took my time to understand the concept of the YAML files. I tried different examples that have been posted in this thread and went further and further.
For a tutorial, in my opinion it would be the best, to go step by step.
In my case i started with an accordion list, extended it to a second level, put in all my items, and added the current state as a Badge and even display the current Watt-usage if the stripe is on.

What i totally went over has been the part of setting the props, as it would be more complicated for me to understand my code (i could have used comments, but in a working progress it was already to late).

@rlkoshak proposed a step by step tutorial. For the List-items a good step by step tutorial would be:

  1. Let’s start with a list
  2. Let’s make it collapsible
  3. Let’s add another depth
  4. Let’s add some dynamic (in the badges for example)
  5. Let’s make it configurable (The props part)

For me all the given examples led to this:

Thank you everybody for your work and sharing your experience, before OH3 i did all this stuff with sitemaps, now i took it to a whole new level and i am very happy with that. Next i will be searching for a solution to display the current color directly in this list.
Cheers and a happy new year.


He guys, first post here as I did run OH2.5 for some time and there were a lot of guides out there, whereas now running OH3 since MS builds and diving into pages where I need some help with expressions:

I am trying to translate my sitemap into a Layout page which works quite well (to test things out).
On my sitemap I got the following:

Switch item=timeofday label="[]" icon="time" mappings=[0="Morning",1="Noon",2="Afternoon",3="Evening",4="Night"]

On the layout page I was able to use the command option to send the correct value of the item (i.e. 1, 2, 3 etc.) and I was able to use an expression as label:

=(items.timeofday.state == 0) ? 'MORNING' : '0' + (items.timeofday.state == 1) ? 'NOON' : '1' + (items.timeofday.state == 2) ? 'AFTERNOON' : '2' + (items.timeofday.state == 3) ? 'EVENING' : '3' + (items.timeofday.state == 4) ? 'NIGHT' : '4'

I seem to run though into the issue that only the first 2 values are used (in this case MORNING or NOON, even though the item has the state 3).


component: oh-label-cell
trendItem: timeofday
action: options
- timeofday
item: timeofday
title: Time of Day
stateAsHeader: true
expandable: false
actionItem: timeofday
label: “=(items.timeofday.state == 0) ? ‘MORNING’ : ‘0’ + (items.timeofday.state
== 1) ? ‘NOON’ : ‘1’ + (items.timeofday.state == 2) ? ‘AFTERNOON’ : ‘2’ +
(items.timeofday.state == 3) ? ‘EVENING’ : ‘3’ + (items.timeofday.state ==
4) ? ‘NIGHT’ : ‘4’”
icon: oh:time

Can anyone advice on my syntax error?

My advice would be to add “state description” metadata to your item.
For the options parameter add:


Then you don’t have to use expressions or set actions or anything. The default widget will normally do what you want, and you can add it to a page with the “add to model” option and select your item.


@flattermann Can you please post the source code? Thanks a lot.

1 Like

Hey guys, does anybody know how to set a full custom color to an oh-cell? I already managed to be able to show a predefined color like green or blue. But it looks like i cannot set a rgb hex value as color.

is this also possible via items text file configuration somehow?

ok figured it out :wink: commandDescription="" [options="…"]

thanks, that works and is even easier!