Variable scope / reference in custom widget

I have an accordion list containing buttons. The top component contains a button and a title, both defined by a variable containing an array. The array is manipulated by the action of buttons in the accordion list sub-components. Each sub-component button’s variable action is to change its own element of the array. If all the members of the array are OFF then the top button shows OFF etc.

I can also manipulate the sub items by the action of the top component. If I switch the top component button ON, the variable action changes all the elements of the array and the status of the buttons below all change to ON

So far so good

This works if the top button is an OH-button. Clicking the button changes the array and all the sub-component buttons change to suit. However, I want use my own custom widget instead of the OH-button and if I do that, clicking the button doesn’t seem to propagate the changes to the array. If I add a component to the custom widget so that I can see the array, it changes with the button press but if I look at the array in the top component of the repeater, there is no change. Is this something to do with scope or is it related to passing variables by value rather than by reference? Is a change to a varaiable inside the custom widget not propoagated to the parent widget?

I am further led to believe this is a scope / reference issue because I am using Justin’s clever wheeze using two repeaters to get data about the _source array. The custom widget doesn’t know about the loop.parent array. I have to pass it into the custom widget using a prop.

Any help very gratefully received.

That is correct. I honestly don’t know whether this is intentional or not, but it has been the case for quite some time. My feeling is that it is probably a not intentional. At the very least, filing an issue about it will start up a conversation about whether it should be fixed or not.

In the mean time, there really isn’t much you can do about it except just replicate the source custom widget code in the second widget instead.

1 Like

Thanks Justin

That will save me a lot of time scratching my head about it. It seems like an oversight. An oh- component can see and manipulate variables in its parent widget but a custom widget can’t. That doesn’t seem to make sense. Perhaps we need some concept of local and global variables in custom widgets - perhaps even pass by value and pass by reference.

I have done exactly as you suggest and replicated the custom widget code in the parent widget. It’s inelegant but it works. This goes back to a conversation we had a while ago and combines my accordion list of toggles with my three-way toggle widget, both of which you helped out with enormously.

I’ve managed to do this with variables rather than actual items which gives the user the opportunity to fiddle with the values without actually changing the live items before committing to sending the finished result and making the changes. For example, you can open the accordion list for the house and then select a whole floor but then open the accordion for that floor and unselect one room, then send that. Or, if you have second thoughts, you can cancel the operation without having undo any live changes to the actual items.

It’s close to final and I’ll share it with the class when its robust.

Thanks again