How to set item[props.x].state from actionVariableValue?

Hello all,

In an Widget I have the following:

                - component: f7-segmented
                  config:
                    round: false
                    outline: false
                    class:
                      - padding-bottom-half
                    style:
                      margin-left: 10px
                      margin-right: 10px
                      --f7-button-font-size: 14px
                      --f7-button-text-color: "=themeOptions.dark === 'light' ? 'black' : 'white'"
                      --f7-button-text-transform: none
                      --f7-button-border-radius: 4px
                      --f7-button-outline-border-width: 1px
                      --f7-button-font-weight: 300
                      --f7-button-padding-vertical: 0px
                      --f7-button-padding-horizontal: 0px
                  slots:
                    default:
                      - component: oh-repeater
                        config:
                          sourceType: range
                          for: size
                          fragment: true
                        slots:
                          default:
                            - component: oh-repeater
                              config:
                                fragment: true
                                for: period
                                in: =[props.effectsrange.split(",")[loop.size].split(",")[0]]
                              slots:
                                default:
                                  - component: oh-button
                                    config:
                                      text: =loop.period
                                      fill: "=((loop.size == vars.selectedEffect?.index) || loop.size == (props.rangeDefault || 0) && !vars.selectedEffect) ? true : false"
                                      round: true
                                      outline: true
                                      style:
                                        --f7-button-border-color: var(--f7-card-outline-border-color)
                                      action: variable
                                      actionVariable: selectedEffect
                                      actionVariableValue: "= {'period': props.effectsrange.split(',')[loop.size].split(',')[0], 'count': props.effectsrange.split(',')[loop.size].split(',')[0], index: loop.size }"

I want to set the state of an item the same as variable value.

How can i do this?

There is no reason to do this if the variable and the item state are truly the same.

Both variables and items store information. The only point behind variables is that they store information in a more restricted scope (within just a widget or page) than items (within all of OH). But there is no place in a widget expression that you can use the value of a variable where you cannot just use the state of an item instead. So, if you are going to set an item state to a value then just use that item state everywhere you would otherwise use it as a variable.

In your case there is only one extra wrinkle. You appear to want this value to be an object which is easy when you’re using a variable, but there is no such thing as an object item. In the widgets, item state are always returned as strings anyway, even if there were. In this case you just have to parse the item string into a object when you need the value of one of it’s keys which is why the JSON object is available to you in the widget expressions:

JSON.parse(item[your_item_name].state).your_key

This seems like a little extra typing and complexity in the expression, but it’s better than the alternative in this case. You cannot have one oh component perform more than one action so to set both a variable and an item you would have to use this work around:

But that is far more complicated than an extra parse method in a few expressions.

Hello Justin,

Thank you for your reply.

In my case I am interested to get the button index made with repeater and set it to props.lightEffect state, that is linked wit an mqtt topic.
The only reason I am using variables is because I was not able to use props in the action like i use in simple buttons (e.g. actionItem: =props.lightEffect).
in the expresion JSON.parse(item[your_item_name].state).your_key, is your_key reffering to the repeater key?

If you just want the index, then that is stored in a variable that is the repeater’s loop variable with _idx at the end. In your case, loop.period_idx.

To set an item to that value you will use the command action and assuming that props.lightEffect is set to the name of the item you can just use that as the item to be commanded:

- component: oh-button
  config:
    action: command
    actionCommand: =loop.period_idx
    actionItem: =props.lightEffect

Thank you for your help Justin.

here is the working code

                      - component: oh-repeater
                        config:
                          sourceType: range
                          for: size
                          fragment: true
                        slots:
                          default:
                            - component: oh-repeater
                              config:
                                fragment: true
                                for: mode
                                in: =[props.effectsrange.split(",")[loop.size].split(",")[0]]
                              slots:
                                default:
                                  - component: oh-button
                                    config:
                                      actionItem: =props.lightEffect
                                      action: command
                                      actionCommand: =(loop.size || "0")
                                      text: =loop.mode
                                      fill: "=(loop.size == items[props.lightEffect].state) ? true : false"
                                      round: true
                                      outline: true
                                      style:
                                        --f7-button-border-color: var(--f7-card-outline-border-color)