OH3 UI I cant change icon color

[Smazich (Сергей Мазурок)]

my cell

code cell
component: oh-cell
config:
mediaList: false
simpleList: false
accordionList: true
title: Indicators Eijsink
footer: тут могла быть ваша реклама
outline: false
noShadow: false
icon: f7:power
iconSize: 28
iconColor: ‘=(items[props.item + “_EijsinkQuartzRelay”].state === “OFF”) ? “red”:“green”’
action: toggle
actionItem: EijsinkQuartzRelay
actionCommand: ON
actionCommandAlt: OFF
slots:
default:
- component: oh-label-item
config:
item: EijsinkQuartzRelayTelemetry
title: Time
icon: f7:clock
- component: oh-label-item
config:
item: NewItem
title: BSSId
icon: f7:wifi
- component: oh-label-item
config:
item: SonoffEijsinkroomQuartzRelay_Uptime
icon: f7:memories
title: UpTime

what’s wrong with the code

[DrRSatzteil (Thomas Lauterbach)]

What works for me is:

color: '=items[props.maintoggle].state == "ON" ? props.color : "gray"'

[Smazich (Сергей Мазурок)]

@Smazich

Color: ‘=(items[props.item + “_EijsinkQuartzRelay”].state === “OFF”) ? “red”:“green”’

It does not work for me

[DrRSatzteil (Thomas Lauterbach)]

Sorry my post was a bit misleading: Please use iconColor or whatever the property is called within the component you are using (in a standard f7 icon component the attribute is called color).

The use == instead of === and you should be good

[rlkoshak (Rich Koshak)]

The === is the problem. The state of a Switch Item is literally ON or OFF which is of type OnOffType. === is the identity comparison so it will only be true is the two sides are identical in type and content. O is not identical to “ON”.

[Smazich (Сергей Мазурок)]

OK thanks. Can you tell me how to remove these three points
near icons? They are inside the “oh-cell”

[Smazich (Сергей Мазурок)]

Thanks for the help, found my solution to the problem.


code:

uid: widget_0d6811bbd9
component: oh-label-cell
config:
mediaList: false
simpleList: false
accordionList: true
title: Eijsink Quartz Relay
color: purple
outline: false
noShadow: false
item: YOURITEM
action: toggle
actionItem: YOURITEM
actionCommand: ON
actionCommandAlt: OFF
slots:
default:
- component: oh-link
config:
text: “='Last-Update: ’ + items.YOURITEM.state”
iconF7: clock
iconSize: 45px
iconColor: blue
color: blue
style:
font-size: 35px
margin-top: 3px
- component: oh-link
config:
text: “='Uptime: ’ + items.YOURITEM.state”
iconF7: memories
iconSize: 45px
iconColor: blue
color: blue
style:
font-size: 35px
margin-top: 3px

[marc1310 (marc schlüter)]

@DrRSatzteil

color: '=items[props.maintoggle].state == "ON" ? props.color : "gray"'

can me someone explain why he dont changes the color of the icon of the cell?

component: oh-cell
config:
action: toggle
color: ‘=(items.dummyuitest.state == “ON”) ? “green” : “red”’
icon: f7:power
iconSize: 28
title: Post
subtitle: ‘=(items.dummyuitest.state == “ON”) ? “green” : “red”’
actionCommand: ON
actionCommandAlt: OFF
actionItem: dummyuitest
slots: null

[DrRSatzteil (Thomas Lauterbach)]

The property in the oh-cell is called iconColor but you used color. Apart from that it looks good.

[marc1310 (marc schlüter)]

i tried this hundred of times.
perhaps i try the worng thing, i want to color up the icon: f7:power.

it dont works, i try everything.

component: oh-cell
config:
action: toggle
iconcolor: ‘=(items.dummyuitest.state == “ON”) ? “green” : “red”’
icon: f7:power
actionItem: dummyuitest
actionCommand: ON
actionCommandAlt: OFF
header: TEST
slots: null

[DrRSatzteil (Thomas Lauterbach)]

iconColor not iconcolor

[marc1310 (marc schlüter)]

I teste it. And nothing. The color dont changes.

I dont know why IT doesnt works.
I use the Standard cell.

component: oh-cell
config:
action: toggle
iconColor: ‘=(items.dummyuitest.state == “ON”) ? “green” : “red”’
icon: f7:power
actionItem: dummyuitest
actionCommand: ON
actionCommandAlt: OFF
header: TEST
slots: null

[Oliver2 (Oliver)]

iconColor is not available for oh-cells