[OH3] Cannot access Item State in custom widget using parameterGroups and actionPropsParameterGroup [Solved]

PeterK · March 15, 2021, 5:54pm

Hi,
I have configured a widget to switch light on and off but also to select light scenes.

Widget

uid: LightWithScenes
tags: []
props:
  parameters:
    - description: The name of the Room
      label: Description
      name: title
      required: true
      type: TEXT
    - description: Can be oh:icon or f7:icon
      label: Icon
      name: icon
      required: true
      type: TEXT
    - context: item
      description: The Switch Item
      label: The Switch Item
      name: item
      required: true
      type: TEXT
    - description: The Name of the Scene
      label: Name
      name: nameSceneOne
      required: false
      type: TEXT
      groupName: sceneOne
    - description: The color of the icon and text
      label: Color
      name: colorSceneOne
      required: false
      type: TEXT
      groupName: sceneOne
    - description: The f7-icon of the scene (set to something to make button visible)
      label: Icon
      name: iconSceneOne
      required: false
      type: TEXT
      groupName: sceneOne
    - description: The Name of the Scene
      label: Name
      name: nameSceneTwo
      required: false
      type: TEXT
      groupName: sceneTwo
    - description: The color of the icon and text
      label: Color
      name: colorSceneTwo
      required: false
      type: TEXT
      groupName: sceneTwo
    - description: The f7-icon of the scene (set to something to make button visible)
      label: Icon
      name: iconSceneTwo
      required: false
      type: TEXT
      groupName: sceneTwo
    - description: The Name of the Scene
      label: Name
      name: nameSceneThree
      required: false
      type: TEXT
      groupName: sceneThree
    - description: The color of the icon and text
      label: Color
      name: colorSceneThree
      required: false
      type: TEXT
      groupName: sceneThree
    - description: The f7-icon of the scene (set to something to make button visible)
      label: Icon
      name: iconSceneThree
      required: false
      type: TEXT
      groupName: sceneThree
    - description: The Name of the Scene
      label: Name
      name: nameSceneFour
      required: false
      type: TEXT
      groupName: sceneFour
    - description: The color of the icon and text
      label: Color
      name: colorSceneFour
      required: false
      type: TEXT
      groupName: sceneFour
    - description: The f7-icon of the scene (set to something to make button visible)
      label: Icon
      name: iconSceneFour
      required: false
      type: TEXT
      groupName: sceneFour
  parameterGroups:
    - name: sceneOne
      context: action
      label: Scene one
    - name: sceneTwo
      context: action
      label: Scene two
    - name: sceneThree
      context: action
      label: Scene three
    - name: sceneFour
      context: action
      label: Scene four
timestamp: Mar 15, 2021, 6:42:20 PM
component: f7-card
config:
  outline: false
  noBorder: false
  padding: true
  noShadow: false
  style:
    --f7-card-margin-horizontal: 5px
    --f7-card-content-padding-vertical: 0px
    --f7-card-content-padding-horizontal: 16px
    --f7-card-border-radius: 15px
    --f7-card-box-shadow: 0px 5px 10px rgba(0,0,0,0.15)
    --f7-card-header-font-size: 14px
    --f7-card-header-font-weight: 600
slots:
  content:
    - component: oh-label-card
      config:
        noShadow: true
        title: =(props.title)
        action: toggle
        actionItem: =(props.item)
        trendItem: =(props.item)
        actionCommand: ON
        actionCommandAlt: OFF
        item: =(props.item)
        background: '=(items[props.switchItem].state > 0) ? "#f5e628" : ""'
        footer: Oben an/aus - unten Szenen
        icon: =(props.icon)
        vertical: false
    - component: f7-row
      config:
        class:
          - padding-bottom
          - padding-right
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    actionPropsParameterGroup: sceneOne
                    title: =(props.nameSceneOne)
                    iconF7: =(props.iconSceneOne)
                    text: =(props.nameSceneOne)
                    iconColor: =(props.colorSceneOne)
                    textColor: =(props.colorSceneOne)
                    visible: "=props.iconSceneOne ? true : false"
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    actionPropsParameterGroup: sceneTwo
                    title: =(props.nameSceneTwo)
                    iconF7: =(props.iconSceneTwo)
                    text: =(props.nameSceneTwo)
                    iconColor: =(props.colorSceneTwo)
                    textColor: =(props.colorSceneTwo)
                    visible: "=props.iconSceneTwo ? true : false"
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    actionPropsParameterGroup: sceneThree
                    title: =(props.nameSceneThree)
                    iconF7: =(props.iconSceneThree)
                    text: =(props.nameSceneThree)
                    iconColor: =(props.colorSceneThree)
                    textColor: =(props.colorSceneThree)
                    visible: "=props.iconSceneThree ? true : false"
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    actionPropsParameterGroup: sceneFour
                    title: =(props.nameSceneFour)
                    iconF7: =(props.iconSceneFour)
                    text: =(props.nameSceneFour)
                    iconColor: =(props.colorSceneFour)
                    textColor: =(props.colorSceneFour)
                    visible: "=props.iconSceneFour ? true : false"

I configured four buttons which are only visible if an icon is configured. I would prefer to choose visibility based on “if a item is configured or not”

Does someone know how I can access the item configured as e.g.

actionPropsParameterGroup: sceneOne

Thank you
Best regards
PeterK

[Edit 16.03.2021]
Access to the state of the item is possible when context:item is used.

The example above uses context: action. This is great, as the custom widget is much more flexible and it is very easy to implement but there is not much documentation as e.g. how to get to the state of the item (see post #3 and #5).

rlkoshak · March 15, 2021, 7:01pm

By if an item is configure you mean the props? Have you tried =props.Item !== undefined or something like that? I don’t know if you don’t enter a prop whether it remains undefined or gets some default. If undefined doesn’t work I suspect the default will be either null or "".

PeterK · March 15, 2021, 7:50pm

The standard state of a not configured item is “-”.

If I configure an item directly as

    - context: item
      description: The Item
      name: myItem
      type: TEXT

i can access this item for visibility as e.g.

visible: '=(items[props.myItem].state ===  "-" ) ? false : true'

My problem is, that I configure the scene buttons over

parameterGroups:
    - name: sceneOne
      context: action
      label: Scene one

This results in a lot of possibilities regarding the choice how to react on a click:

I only have to use this for the buttons

          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    actionPropsParameterGroup: sceneOne
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    actionPropsParameterGroup: sceneTwo

This works perfectly for the click event. The problem is, that I don’t know how to access the item to get information as I only have the name of the group.

I tried items[props.sceneOne].state and several other combinations, but this did not do the trick.

rlkoshak · March 15, 2021, 8:01pm

Except in the oh-repeater widget, all you have access to is the Item’s state and displayState. You can’t get the Groups it’s a member of, the Items label, if it’s a Group you can’t get it’s members, the tags, metadata or anything else. Just state which is the raw state and optionally displayState which is the state formatted based on the “State Description” Item metadata. displayState doesn’t exist when the State Description metadata is not defined.

PeterK · March 15, 2021, 8:18pm

Thank yo for your fast reply and sorry for my English - perhaps I don’t describe it correctly.

I did not mean the Group as in

The Group is a special Item type that can be used to define a category or collection into which you can combine other Items or Groups

but the actionPropsParameterGroup as the configuration is done via context: action instead of context:item

There is not much documentation about this kind of configuration:
https://www.openhab.org/docs/ui/building-pages.html#types-of-actions

In your own personal widgets (see below), you can define a parameter group with an action context to automatically define implicit props that you can pass “en masse” to built-in components that accept actions with the actionPropsParameterGroup property:

I just tried it and I am excited about the possibilities… but I run into problems when I want to access the state of the item configured in the action (or anything else configured in the action)

rlkoshak · March 15, 2021, 8:26pm

OK, in that case I can’t be of much help. I’ve not used that feature yet.

PeterK · March 15, 2021, 9:37pm

Thank you for trying. Your work in this community already helped me a lot on different topics.

ysc · March 16, 2021, 12:18pm

You’re right, it’s not properly documented.
(Edit: PR @ UI: Detail how implicit prop are named for action groups by ghys · Pull Request #1514 · openhab/openhab-docs · GitHub)

Basically, the property names will be: {groupName}_{actionPropName}
The list of actionPropNames can be found here (they’re always the same):

The other thing is that occurrences of the word “action” will be removed from groupName in the prefix (and the underscore will also be removed if you name the group “action” so there is no prefix anymore)!
Confusing, I know, but this is to avoid weird prop names like tapAction_action or _actionCommand.

Tip: You can dump the props object as JSON to figure out the prop names: =JSON.stringify(props)

Or a more elaborate pretty-printed example:

uid: widget_8222562fe7
props:
  parameterGroups:
    - name: sceneOne
      context: action
      label: Scene One
    - name: sceneTwo
      context: action
      label: Scene Two
    - name: tapAction
      context: action
      label: Tap Action
    - name: action
      context: action
      label: Tap Action
  parameters:
    - name: prop1
      label: Prop 1
      type: TEXT
      description: A text prop
tags: []
component: f7-row
config:
  tag: pre
slots:
  default:
    - component: Label
      config:
        text: =JSON.stringify(props, null, 4)

PeterK · March 16, 2021, 7:29pm

This will be extremely helpful for me

Thank you a lot

PeterK · March 17, 2021, 11:22am

Hi,

now it works - thank you

uid: LightWithScenes
tags: []
props:
  parameters:
    - description: The name of the Room
      label: Description
      name: title
      required: true
      type: TEXT
    - description: Can be oh:icon or f7:icon
      label: Icon
      name: icon
      required: true
      type: TEXT
    - context: item
      description: The Switch Item
      label: The Switch Item
      name: item
      required: true
      type: TEXT
    - description: The Name of the Scene
      label: Name
      name: nameSceneOne
      required: false
      type: TEXT
      groupName: sceneOne
    - description: The color of the icon and text
      label: Color
      name: colorSceneOne
      required: false
      type: TEXT
      groupName: sceneOne
    - description: The f7-icon of the scene (set to something to make button visible)
      label: Icon
      name: iconSceneOne
      required: false
      type: TEXT
      groupName: sceneOne
    - description: The Name of the Scene
      label: Name
      name: nameSceneTwo
      required: false
      type: TEXT
      groupName: sceneTwo
    - description: The color of the icon and text
      label: Color
      name: colorSceneTwo
      required: false
      type: TEXT
      groupName: sceneTwo
    - description: The f7-icon of the scene (set to something to make button visible)
      label: Icon
      name: iconSceneTwo
      required: false
      type: TEXT
      groupName: sceneTwo
    - description: The Name of the Scene
      label: Name
      name: nameSceneThree
      required: false
      type: TEXT
      groupName: sceneThree
    - description: The color of the icon and text
      label: Color
      name: colorSceneThree
      required: false
      type: TEXT
      groupName: sceneThree
    - description: The f7-icon of the scene (set to something to make button visible)
      label: Icon
      name: iconSceneThree
      required: false
      type: TEXT
      groupName: sceneThree
    - description: The Name of the Scene
      label: Name
      name: nameSceneFour
      required: false
      type: TEXT
      groupName: sceneFour
    - description: The color of the icon and text
      label: Color
      name: colorSceneFour
      required: false
      type: TEXT
      groupName: sceneFour
    - description: The f7-icon of the scene (set to something to make button visible)
      label: Icon
      name: iconSceneFour
      required: false
      type: TEXT
      groupName: sceneFour
  parameterGroups:
    - name: sceneOne
      context: action
      label: Scene one
    - name: sceneTwo
      context: action
      label: Scene two
    - name: sceneThree
      context: action
      label: Scene three
    - name: sceneFour
      context: action
      label: Scene four
timestamp: Mar 16, 2021, 8:34:03 PM
component: f7-card
config:
  outline: false
  noBorder: false
  padding: true
  noShadow: false
  style:
    --f7-card-margin-horizontal: 5px
    --f7-card-content-padding-vertical: 0px
    --f7-card-content-padding-horizontal: 16px
    --f7-card-border-radius: 15px
    --f7-card-box-shadow: 0px 5px 10px rgba(0,0,0,0.15)
    --f7-card-header-font-size: 14px
    --f7-card-header-font-weight: 600
slots:
  content:
    - component: oh-label-card
      config:
        noShadow: true
        title: =(props.title)
        action: toggle
        actionItem: =(props.item)
        trendItem: =(props.item)
        actionCommand: ON
        actionCommandAlt: OFF
        item: =(props.item)
        background: '=(items[props.item].state > 0) ? "#f5e628" : ""'
        icon: =(props.icon)
        vertical: false
    - component: f7-row
      config:
        class:
          - padding-bottom
          - padding-right
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    actionPropsParameterGroup: sceneOne
                    title: =(props.nameSceneOne)
                    iconF7: =(props.iconSceneOne)
                    text: =(props.nameSceneOne)
                    iconColor: =(props.colorSceneOne)
                    textColor: =(props.colorSceneOne)
                    visible: "=props.sceneOne_actionItem ? true : false"
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    actionPropsParameterGroup: sceneTwo
                    title: =(props.nameSceneTwo)
                    iconF7: =(props.iconSceneTwo)
                    text: =(props.nameSceneTwo)
                    iconColor: =(props.colorSceneTwo)
                    textColor: =(props.colorSceneTwo)
                    visible: "=props.sceneTwo_actionItem ? true : false"
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    actionPropsParameterGroup: sceneThree
                    title: =(props.nameSceneThree)
                    iconF7: =(props.iconSceneThree)
                    text: =(props.nameSceneThree)
                    iconColor: =(props.colorSceneThree)
                    textColor: =(props.colorSceneThree)
                    visible: "=props.sceneThree_actionItem ? true : false"
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    actionPropsParameterGroup: sceneFour
                    title: =(props.nameSceneFour)
                    iconF7: =(props.iconSceneFour)
                    text: =(props.nameSceneFour)
                    iconColor: =(props.colorSceneFour)
                    textColor: =(props.colorSceneFour)
                    visible: "=props.sceneFour_actionItem ? true : false"

system · April 28, 2021, 3:22am

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.