OH4.2.0 oh-button actionVariable on multiple variables at once

Setup, Configuration and Use Beginners
, ,
1

Hi All

I am currently running on the latest OH4.2.0 SNAPSHOT

Is there anyway to easily apply the actionVariableValue to multiple variables at the same time?

I would like to do something like:

- component: oh-button
  config:
	action: variable
	actionVariable:
	  - testVariable
	  - DetailShow
	actionVariableValue: false
	clearVariable:
	  - ZZZ
	  - ZZZ
	large: true
	style:
	  background: rgb(220,220,220)
	  color: white
	  display: flex
	  height: 30px
	  left: 5px
	  position: absolute
	  top: 5px
	  width: 30px

I have also tried:

actionVariable: =['testVariable', 'DetailShow']

Both of these seem to ignore BOTH variables.

The following fo ra single variable does work:

actionVariable: testVariable

Hoping for a simple option that will not require a complete redo of the widget.

The array option does work for clearVariable however O need to set a default value and not clear the variable.

I will have to look and see what I can achieve with oh-context otherwise?

Thanks as always
Mark

2

You have two options (that I can think of off the top of my head, there may be others). See this topic:

The main idea of that topic would certainly cover this use case; so, that’s one option. However, down at the end of the post, there’s a concluding paragraph on possible combinations of actions and it mentions that if you want multiple variables, you can just use a single object with multiple keys as the variable.

3

Hi Justin

Thanks as usual, I do remember seeing that post, but didn’t thin of it.

Could you expand on that? I like that idea but have no idea how to do that? And how you would send the vale to all of the objects with keys?

I will play around with the first option in the meantime.

4

The following is an example, how to set two keys with one button press:

- component: oh-button
  config:
    action: variable
    actionVariable: objVar
    actionVariableValue:
    floor: =loop.floorArraySrc.name
    selectSection: SECTION2

And this one changes display style according to the keys:

    display: '=vars.objVar ? (vars.objVar.selectSection=="SECTION2" &&
       vars.objVar.floor ) ? "" : "none !important" : "none

We make use of this heavily in the semanticHomeMenu widget series…

5

Thank you @hmerk

Please could you explain how it works? I am still not clear how this would work if I need to set for example two variables Variable1 and Variable2 to false?

6 
- component: oh-button
  config:
    action: variable
    actionVariable: objVar
    actionVariableValue:
    Variable1: false
    Variable2: false


display: '=vars.objVar ? (vars.objVar.Variable1=="false" &&
       vars.objVar.Variable2) ? "" : "none !important" : "none

Should be what you are looking for…

7

Thank you.

When I save the widget, I end up with:

  - component: oh-button
    config:
      action: variable
      actionVariable: objVar
      actionVariableValue: null
      testVariable: false
      DetailShow: false

And the two variables are not set to false.

Does objVar need to be defined somewhere?

EDIT: Also tried:

                - component: oh-button
                  config:
                    action: variable
                    actionVariable: objVar
                    actionVariableValue:
                      testVariable: false
                      DetailShow: false

with no sucess.

8

I have got the following:

                - component: oh-button
                  config:
                    action: variable
                    actionVariable: testVariable
                    actionVariableValue: false
                    style:
                      pointer-events: none
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: variable
                          actionVariable: DetailShow
                          actionVariableValue: false
                          large: true
                          style:
                            background: rgb(220,220,220)
                            color: white
                            display: flex
                            height: 30px
                            left: 5px
                            position: absolute
                            top: 5px
                            width: 30px
                            pointer-events: auto
                          popupClose: .modal-in
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                color: white
                                f7: clear_fill
                                style:
                                  color: black
                                  font-size: 20px
                                  margin: auto

Which works to set the DetailShow variable, but seems to take no action on the testVariable.

Not sure what I have wrong?

The full widget is as follows:

ANT.txt (6.1 KB)

9

Here is a working example :

uid: widget_a21e11171f
tags: []
props:
  parameters:
    - description: A text prop
      label: Prop 1
      name: prop1
      required: false
      type: TEXT
    - context: item
      description: An item to control
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jul 18, 2024, 1:33:46 PM
component: f7-card
config:
  title: '=(props.item) ? "State of " + props.item : "Set props to test!"'
  footer: '=vars.objVar ? vars.objVar.Variable1==="false" ? "Variable 1 = false" :
    "Variable1 not set" : "objVar not set"'
  content: =items[props.item].displayState || items[props.item].state
slots:
  default:
    - component: oh-button
      config:
        action: variable
        actionVariable: objVar
        actionVariableValue:
          Variable1: "false"
1 Like
10

Thank you so much. I finally get it. Sorry about the lack of experience etc.

I will need to access my variables as vars.objVar.Variable1 and vars.objVar.Variable2.

This is definitely a good solution. Thanks for clarifying.

1 Like
11

The issues you are having with both versions is because of the false value that you are trying to set. It is a quirk of the way the yaml system works, that false values are equivalent to no value when converted to json for processing. The example that @hmerk showed works because that false value is not a boolean false, but a string 'false'. (The same problem actually arises with 0 sometimes in widgets because that is also a falsy value.)

In practice, setting a variable to false is no different than clearing the variable. So, it turns out, if the only time you are setting multiple variables is to set them all to false, then you don’t need any special widget constructions, just use the clear variable function which can, as you have noted, take a list of variable names.

The most reliable way to get around this issue if there’s some reason in your widget why an actual false value must be different than undefined is to work with strings such as 'true' and 'false' or something even more descriptive such as 'active' and 'inactive'. This complicates widget expressions a little because you have to actually test the variable value instead of just using the variable as a boolean directly (e.g., (vars.dummy == 'active') instead of just vars.dummy). The good news is with the now oh-context you can create a test function that is even easier to read (e.g., fn.isActive(vars.dummy))

12

Thanks Justin.

I am actually not using the results in an expression at this stage. I am displaying/logging them out to see what happens as I am trying to find the easiest way to visibility of some components to only be true when the component is active (you helped me with part of this some time ago).

Because I am logging them out I am pretty confident they are not actually being set to false (or undef). I have tested again without using false just to be 100% sure:

- component: oh-button
  config:
    action: variable
    actionVariable: objVar
    actionVariableValue:
      testVariable: notActive
      DetailShow: notActive

That being said I have a working option using @hmerk option after I realised that I had to use
vars.objVar.Variable1 syntax.

Just trying to work out whether that solution or your initial solution with the nested oh-button is better? I have not been able to get the nested button to work as I mentioned in Point 7 above?

Always appreciet your input and guidance.

13

It seems that the problem is that you have both the components as oh-buttons. The second, nested, component must be an oh-link. The top one can be a button if you prefer.

I’m not 100% sure why it makes a difference whether the nested component is a link or a button, I can only guess that there’s something to do with the way the underlying f7 library handles the two.

14

Thanks Justin. That works great. I had tried bth as oh-link with no luck. Great to have it working :slight_smile: