Custom Widget - show the item part only if configured

[Dan10 (Daniel)]

Hi @ all

I try to create a custom widget which shows different states. In the proberties there can 5 items be configured. But the icon, text und the state should just be shown if the item is configured in the proberties.
In the Widget Creator it is working correctly:

But at the page it shows the 4th and the 5th item also, even i didn’t configured them:

The code is:

                - component: f7-col
                  config:
                    style:
                      font-size: 1.1rem
                      font-weight: 600
                      width: 25px
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: "=(items[props.item_1].state === 'OFF') ? props.icon_high :
                            (items[props.item_1].state === 'high') ?
                            props.icon_high :
                            (Number.parseFloat(items[props.item_1].state) >=
                            props.green) ? props.icon_high :
                            (items[props.item_1].state === 'middle') ?
                            props.icon_medium :
                            (Number.parseFloat(items[props.item_1].state) <
                            props.green) ? props.icon_medium :
                            (items[props.item_1].state === 'ON') ?
                            props.icon_low : (items[props.item_1].state ===
                            'low') ? props.icon_low :
                            (Number.parseFloat(items[props.item_1].state) <=
                            props.orange) ? props.icon_low : '?'"
                          color: "=(items[props.item_1].state === 'OFF') ? 'green' :
                            (items[props.item_1].state === 'high') ? 'green' :
                            (Number.parseFloat(items[props.item_1].state) >=
                            props.green) ? 'green' : (items[props.item_1].state
                            === 'middle') ? 'orange' :
                            (Number.parseFloat(items[props.item_1].state) <
                            props.green) ? 'orange' : (items[props.item_1].state
                            === 'ON') ? 'red' : (items[props.item_1].state ===
                            'low') ? 'red' :
                            (Number.parseFloat(items[props.item_1].state) <=
                            props.orange) ? 'red' : 'red'"
                          size: 18
                          visible: "=props.item_1 ? true : false"
                - component: f7-col
                  config:
                    style:
                      font-size: 1.1rem
                      width: calc(100% - 105px)
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            color: black
                          text: "=props.geraetbez1 ? props.geraetbez1 : ' '"
                          visible: "=props.geraetbez1 ? true : false"
                - component: f7-col
                  config:
                    style:
                      width: 80px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            color: black
                          text: "=items[props.item_1].displayState ? items[props.item_1].displayState :
                            items[props.item_1].state"
                          visible: "=props.item_1 ? true : false"

Anybody know what is wrong?

[JustinG]

If you are just looking at the design wizard for the page, then the visible property is always ignored so that while designing you can see you widgets. If you want to see it in action with the visible property being taken into account, use the “Run mode” toggle in the lower right corner.

@Dan10

visible: "=props.item_1 ? true : false"

This is a redundant expression. The true and false section of the ternary expression are what should be returned if the result of the test expression is true or false. So, it is redundant to say “if the test expression returns true, then return true”.

So. you could just replace with this the test expression itself:

visible: =props.item_1

But ,in this case, the most robust way to do this, in my opinion, would be:

visible: =props.item_1 !== undefined

[Dan10 (Daniel)]

Thank you for the answer JustinG
I didn’t checked it in the run mode Problem solved
Thank you