Accessing a Custom widget properties from a another Custom widget prop window

Hi.

I’m running OH 3.4.1 production and a test OH 4.0.0.M.
I couldn’t think of a simpler title for this so I hope I make it clear.

I have a custom widget (widgetA) that can open another custom widget (widgetB) in a popover.
I’d like to be able to set widgetB’s props from WidgetA’s props screen
This can be done in the built in oh-cell widgets but I cant work out how to replicate this with a custom widget.

I have no problem selecting the widget by using widget as the prop context as shown below.

uid: PopOverCell
tags: []
props:
  parameters:
    - context: widget
      description: widget to Popover
      label: Widget
      name: WidgetB
      required: false
      type: TEXT

This works as expected and returns widget:WidgetBname in the WidgetB prop.

What I would like to do is have a similar prop that will display the props of the selected widgetB and set them.
The closest I’ve been able to get is the below where I set the context to props which does open a model window but its blank.
I cant work out how to reference the selected widgetB’s props.

    - context: props
      description: widget props
      label: props
      name: WidgetBprops
      required: false
      type: TEXT

I assume I’m missing a lot as I think I would need some sort of prop array?
Does anyone have any ideas?

Just to be clear I know i can add the widgetB props to WidgetA in YAML like below, but I’d like to be able to do this without having to touch the YAML.

  actionModal: widget:AndriodRemote
  actionModalConfig:
    inputaction: SonyTV_IRCCCommand
    mute: LoungeSonos_Mute
    power: SonyTV_PowerStatus
    startapp: SonyTV_StartApp
    volume: LoungeSonos_Volume

You have to redefine the props of the “inner” widget as props of the “outer” widget. Then you can use expressions to define the props of the “inner” widget using the props of the “outer” widget - there’s no other way.
(tip: you can define a parameterGroup and assign them to that parameter group to segregate them in the config sheet)

i.e.

props:
  parameters:
    - name: inner_inputaction
      groupName: innerWidget
      ...
    - name: inner_mute
      groupName: innerWidget
      ...
  parameterGroups:
    - name: innerWidget
      description: Parameters for the 'AndriodRemote' widget
...

  actionModal: widget:AndriodRemote
  actionModalConfig:
    inputaction: =props.inner_inputaction
    mute: =props.inner_mute
    power: =props.inner_power
    startapp: =props.inner_startapp
    volume: =props.inner_volume

(you don’t technically need the inner_ prefixes, it’s just a convention for this example, in fact you can name them the same if you don’t have a name collision).

Are you expecting to do this dynamically? By which I mean, do you want the secondary props options to change based on what the “selected WidgetB” is?

If so, that capability does not, to my knowledge, exist. Yannick’s answer is really the only viable options pass-through at the moment.

Thanks Guys,

I get this but WidgetA would only be able to see WidgetB’s probs and I would have to change.
it for WidgetC. (i.e., I would have to have pairs of WidgetA’s matched to WidgetB’s.)
I’m kind of already doing this but directly in WidgetA.

    - component: oh-link
      config:
        action: popover
        actionModal: = props.Widget
        actionModalConfig:
          inputaction: SonyTV_IRCCCommand
          mute: LoungeSonos_Mute
          power: SonyTV_PowerStatus
          startapp: SonyTV_StartApp
          volume: LoungeSonos_Volume
        style:
          border-radius: inherit
          height: 100%
          width: 100%

Yes, I was hoping for the Props page to change with the Widget that was selected.
The idea behind this was to have a generic “launching” widget that was more capable than the standard oh-cell.
This way I could populate the Overview page with “generic” widgets that displayed a particular Item from an equipment and then open a more complex widget that could control the equipment in full.
For Example, Have the overview widget display what’s playing on the TV but then open a remote-control widget when clicked.
Or a have another instance of the same widget display current temperature then open an Aircon control Widget when clicked.
This is not the only reason; I’d also like to make the Overview widget “prettier” than what the standard oh-cell. (i.e., easily change fonts, colours, background etc without having to code them in YAML each time)

If dynamic is not currently possible, in your opinion is it possible to do in a future release? I’ll add to the 4.0.0. Wishlist if it is!

My bad, turns out you can do that you wanted!
Just configure the parameters like this:

uid: dynamic_widget
tags: []
props:
  parameters:
    - context: pagewidget
      description: The widget
      label: Widget
      name: widget
      required: false
      type: TEXT
      groupName: widget
    - context: props
      description: Props for the widget
      label: Widget Props
      name: widgetprops
      required: false
      type: TEXT
      groupName: widget
  parameterGroups:
    - name: widget
      description: Popover Widget
component: oh-button
config:
  text: Open Popover
  action: popover
  actionModal: =props.widget
  actionModalConfig: =props.widgetprops

It’s important to have pagewidget as a context for your widget selection parameter (so you’ll be able to select pages and widgets), not only widget, and also preferably group them within a parameter group, otherwise when configuring the props parameter you’ll get a “Cannot find related parameter to configure props” in the console.
This is because of this line:

This could be fixed easily though.

2 Likes

Also note that you can make even the action dynamic by using a parameter group with an action context and the special parameter actionPropsParameterGroup instead of action. This is documented in the “tip” at https://www.openhab.org/docs/ui/building-pages.html#types-of-actions

Thanyou ysc. that worked great.

I’m able to select a widget and have the props display in another window just like I want.
I will mark this solved.

One thing though, I tried adding the Action PropertyGroup. I need to read up more about this so don’t worry too much about it but it’s strange.
It looks to display correctly and I can select an Action but once I select an action it displays additional props like below but they don’t work ( I can select a widget but the Component Config window remains blank)

The selected action doesn’t actually work either (Nothing happens when i click)

With the Action set as Pop over

My code is below just in case you can see a problem but thankyou again. I have got further than I have on my own.

uid: LaunchCell
tags: []
props:
  parameters:
    - description: Title
      label: Title
      name: Title
      required: false
      type: TEXT
    - description: Title Color
      label: Color
      name: tcol
      required: false
      type: TEXT
    - description: background Image
      label: Image
      name: Image
      required: false
      type: TEXT
    - context: pagewidget
      description: The widget
      label: Widget
      name: widget
      required: false
      type: TEXT
      groupName: widget
    - context: props
      description: Props for the widget
      label: Widget Props
      name: widgetprops
      required: false
      type: TEXT
      groupName: widget
  parameterGroups:
    - name: myction
      context: action
      label: Action
    - name: widget
      description: Popover Widget
timestamp: Mar 16, 2023, 9:46:09 PM
component: f7-card
config:
  style:
    background-image: = props.Image
    background-position: center
    background-size: cover
    border: 2px
    border-radius: 15px
    border-style: outset
    height: 120px
slots:
  default:
    - component: oh-link
      config:
        actionPropsParameterGroup: myaction
        actionModal: = props.widget
        actionModalConfig: =props.widgetprops
        style:
          border-radius: inherit
          height: 100%
          width: 100%
      slots:

Just to put this thread to bed,

I was unable to find everything I needed about the Action property Group.
Specifically accessing the widget props via the Actions Model Component Configuration. It was always blank.
I did find other community posts that had the same problem but there was no solution that i could find.

Considering the Solution above provided by Yannick and the fact that I only really need a pop over or page Action I have decided to just make a simple actions prop with just the options I needed.

This works well enough for me. Thank you again to Yannick for the Solution.

The code:

uid: LaunchCell
tags: []
props:
  parameters:
    - description: Title
      label: Title
      name: Title
      required: false
      type: TEXT
    - description: Title Color
      label: Color
      name: tcol
      required: false
      type: TEXT
    - description: background Image
      label: Image
      name: Image
      required: false
      type: TEXT
    - description: Type of action to perform
      label: Action
      name: ClickAction
      required: false
      type: TEXT
      groupName: widget
      limitToOptions: true
      options:
        - label: Navigate to page
          value: navigate
        - label: Open Pop up
          value: popup
        - label: Open Pop Over
          value: popover     
        - label: Open Sheet
          value: sheet
    - context: pagewidget
      description: Widget or Page to open
      label: Widget or Page
      name: PageWidget
      required: false
      type: TEXT
      groupName: widget
    - context: props
      description: Props for the widget
      label: Widget Props
      name: Widget_props
      required: false
      type: TEXT
      groupName: widget
  parameterGroups:
    - name: widget
      description: Action to perform when clicked
timestamp: Mar 17, 2023, 9:06:36 PM
component: f7-card
config:
  style:
    background-image: ="url("+props.Image+")"
    background-position: center
    background-size: cover
    border: 2px
    border-radius: 15px
    border-style: outset
    height: 120px
slots:
  default:
    - component: oh-link
      config:
        action: = props.ClickAction
        actionPage: = props.PageWidget
        actionModal: = props.PageWidget
        actionModalConfig: =props.Widget_props
        style:
          border-radius: inherit
          height: 100%
          width: 100%
      slots:

HI
Anyone know how to get the same result when the child widget is called via f7-popover?

    - context: pagewidget
      label: fireplace widget
      name: widget_name
      required: false
      type: TEXT
      groupName: widget
    - context: props
      description: Props for the widget
      label: Widget Props
      name: widgetprops
      required: false
      type: TEXT
      groupName: widget
  parameterGroups:
    - name: widget
      description: Popover Widget
- component: oh-link
  config:
    action: popover
    popoverOpen: .fireplace
    style:
      height: 22px
      left: 15px
      position: absolute
      top: 90px
      width: 22px
      z-index: 2
    tooltip: fireplace
    visible: true
  slots:
    default:
      - component: f7-popover
        config:
          class: fireplace
          style:
            --f7-popover-border-radius: 8px
            --f7-popover-width: 495px
        slots:
          default:
            - component: =props.widget_name
              config:
                ???????????????????????????