Use Parametergroup context Action in Custom Widget

Hey Guys,
When I set a parameter in parametergroups to context action, I get the comfortable possibility to decide what kind of Action i want to perform.
But how can i map this to a for exampel label so when i click on the label, the defined rule or script or whatevere will be executed?

I want it as flexible as possible thats the reason why i want to use this.

BR Marcel

As I understand it, the Action applies to the whole widget. If you want one widget that supports multiple actions (e.g. clicking on the badge does one thing, the icon something else), you need to construct a new widget out of subwidgets and apply a separate Action to each subcomponent.

Give the parameter with the action context a distinct groupName and define that parameter group in the parameterGroups section.

Then, on the component that should trigger the action, you set the actionPropsParameterGroup to the name of the group you just defined.

See here for an example:

2 Likes

first thanks for your fast answears.
for better understanding i show you a screenshot of my actual settings.

there you can see that i added -parameterGroups and in it a function with context action.
That gives me the shown possibility in prop menu to decide what kind of action i want to do.
in the example i set it to Run scene, script or rule. I want to let the user decide what action he want to use. The action should be activated when the widget gets clicked. somwhere at the widget not at a special position.

uid: Simple_Item_Action_Button
tags: []
props:
  parameters:
    - label: Label
      name: label
      required: false
      type: TEXT
    - description: Size of the lable, please keep the px behind the Value e.g. 50px
      label: Label Size
      name: labelsize
      required: false
      type: TEXT
    - description: Icon
      label: Icon
      name: icon
      required: false
    - description: please keep the px behind the Value e.g. 50px
      label: Icon size
      name: iconsize
      required: false
    - context: item
      description: Item where the widget reacts to with its color.
      label: Item
      name: item
      required: false
      type: TEXT
    - description: Show Item State in footer
      label: Display Item State
      name: itemstate
      required: false
      type: BOOLEAN
    - description: keyword for State of the Item
      label: Status 1
      name: status1
      required: false
      type: TEXT
    - description: keyword for State of the Item
      label: Status 2
      name: status2
      required: false
      type: TEXT
    - description: keyword for State of the Item
      label: Status 3
      name: status3
      required: false
      type: TEXT
    - description: keyword for State of the Item
      label: Status 4
      name: status4
      required: false
      type: TEXT
    - description: Color for State of the Item
      label: Color 1
      name: color1
      required: false
      type: TEXT
    - description: Color for State of the Item
      label: Color 2
      name: color2
      required: false
      type: TEXT
    - description: Color for State of the Item
      label: Color 3
      name: color3
      required: false
      type: TEXT
    - description: Color for State of the Item
      label: Color 4
      name: color4
      required: false
      type: TEXT
  parameterGroups:
    - name: ausfuehren
      context: action
      label: Action
      description: Choose your recomended action
timestamp: Jun 4, 2024, 3:57:35 PM
component: f7-card
config:
  actionPropsParameterGroup: ausfuehren
  style:
    background: ""
    border-radius: 30px
    max-height: 400px
    min-height: 100px
    overflow: hidden
    position: relative
    width: auto%
slots:
  default:
    - component: f7-row
      config:
        style:
          width: auto%
      slots:
        default:
          - component: f7-col
            config:
              style:
                display: inline-block
            slots:
              default:
                - component: oh-icon
                  config:
                    height: =props.iconsize
                    icon: =props.icon
                    style:
                      --icon-size: =props.iconsize
                      padding-left: calc(50% - (var(--icon-size)/2))
                      padding-top: 20px
    - component: f7-row
      config:
        style:
          width: auto%
      slots:
        default:
          - component: f7-col
            config: {}
            slots:
              default:
                - component: Label
                  config:
                    style:
                      font-weight: bold
                      font-size: =props.labelsize
                      padding-top: 10px
                      padding-bottom: 10px
                      text-align: center
                      text-shadow: 2px 2px black
                      color: '=items[props.item].state == props.status1 ? props.color1 : items[props.item].state == props.status2 ? props.color2 : items[props.item].state == props.status3 ? props.color3 : items[props.item].state == props.status4 ? props.color4 : "white"'
                    text: =props.label
    - component: f7-card-footer
      config:
        visible: "=props.itemstate == true ? true : false"
      slots:
        default:
          - component: Label
            config:
              style:
                margin: auto
                text-align: center
                text-shadow: 2px 2px black
              text: =items[props.item].displayState

Im not a pro in coding, can read and understand C HTML PHP JS etc. but have big problems with this YAML Syntax things.

Actions are a specific feature of the OH widget system. So that means that you can’t just add an action to any component in a widget. No f7-... components will work with actions and many, but not all oh-... components do.

So to achieve your goal, you need to add to your widget one of the components that supports actions.

To see which oh components support actions you can look through the component specifications here:

Example for how to configure each action type are in the oh-button description (but if you are using the actionPropsParameterGroup you don’t really need this):

If you look through the widget code linked to the example I gave above you will see that the root level component is a div. This cannot have an action defined, it’s just there to define the shape and size of the widget (like your f7-card). However, the two child components of that div are both oh-button components and they can have actions. Because I want the whole widget to respond to the action, the oh-button that is visible has styles set that stretch it out to 100% of the parent size so it fills the whole div. That means that everywhere that widget is the button also is and will respond to the click to start the defined action.

1 Like

thank you very much! that works for me :slight_smile:

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