Initialize variable with item.state value

Setup, Configuration and Use Widgets
1

Hi,
I would like to build a stepper widget that set item.state only when a button is pressed.
My current code is :

uid: stepper_with_validate
tags: [ ]
props:
  parameters:
    - context: item
      description: An item to control
      label: Item
      name: item
      required: true
      type: TEXT
    - default: "0"
      label: Minimum
      name: min
      required: false
      type: INTEGER
    - default: "100"
      label: Maximum
      name: max
      required: false
      type: INTEGER
    - default: "1"
      label: Step
      name: step
      required: false
      type: INTEGER
  variables:
    localStepperValue: Number(items[props.item]?.state)
timestamp: Jul 27, 2025, 4:08:09 PM
component: f7-card
config: {}
slots:
  default:
    - component: f7-block
      config:
        style:
          display: flex
          flex-direction: column
          align-items: center
          gap: 10px
      slots:
        default:
          - component: oh-stepper
            config:
              min: =props.min
              max: =props.max
              step: =props.step
              variable: localStepperValue
              fill: true
              raised: true
              round: true
          - component: oh-button
            config:
              text: = (vars.localStepperValue != items[props.item]?.state)?`Update from ${items[props.item]?.state} to ${vars.localStepperValue}`:"Up to date"
              style:
                width: 100%
              action: command
              actionItem: =props.item
              actionCommand: =vars.localStepperValue

almost everything works fine but localStepperValue is undefined until a change stepper value.

How to solve that ?

Thanks

2

  1. The props object is not where you initialize variables. See the oh-context for that:
    oh-context - Widget Context | openHAB

  2. You would still need a widget expression in the variable definition, so

is missing the leading =

  1. The best way to set a default value for the oh-stepper is just to use it’s value property.

  2. Bonus: Assuming you are on any recent OH version, you can just use item[item_name].numericState instead of Number(item[item_name].state) to get a numeric value instead of the stringified state.

To get the function you are looking for from this widget then you need to move the variable definition to an oh-contex and make the remaining components children of that context component. Then set the stepper value property to the variable value: = vars.localStepperValue.

3

Can the shortcut #'itemName' work here too?

4

Yep, and I always forget about it…so it’s good to keep reminding me.