Custom name, define variable?

[Jeroen_Timmers]

Hello

I tried to make my first openhab Widget, just to learn somethings

My yam is below, and for testing i have create default values.

My items are:

Number    shellyLoftMotionBattery    "Bewegingssensor zolder"    <material:battery_std>    (groupBattery)    {channel="shelly:shellymotion:loft:battery#batteryLevel"}
Number    shellyHallMotionBattery    "Bewegingssensor hal"       <material:battery_std>    (groupBattery)    {channel="shelly:shellymotion:hall:battery#batteryLevel"}

DateTime    shellyHallMotion          "[%1$td-%1$tm-%1$tY %1$tT]"    <material:sensors>    (groupMotionSensors)    {channel="shelly:shellymotion:hall:sensors#motionTimestamp"}
DateTime    shellyLoftMotion          "[%1$td-%1$tm-%1$tY %1$tT]"    <material:sensors>    (groupMotionSensors)    {channel="shelly:shellymotion:loft:sensors#motionTimestamp"}

uid: custom_group_motions
tags: []
props:
  parameters:
    - default: Bewegingssensoren
      description: Title of the card
      label: Title
      name: title
      required: true
      type: TEXT
    - context: item
      default: groupMotionSensors
      description: The groupname off the items to display
      label: Groupname
      name: groupname
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Aug 23, 2023, 10:01:50 PM
component: f7-card
config:
  title: =props.title
slots:
  default:
    - component: oh-list
      slots:
        default:
          - component: oh-repeater
            config:
              for: item
              sourceType: itemsInGroup
              groupItem: =props.groupname
              fragment: true
            slots:
              default:
                - component: f7-row
                  slots:
                    default:
                      - component: f7-card
                        slots:
                          default:
                            - component: f7-card-header
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      text: =loop.item.name #how to get Customname....
                                      style:
                                        fontSize: 14px
                                        fontWeight: 500
                            - component: f7-card-content
                              config:
                                style:
                                  width: 400px
                                  fontSize: 12px
                              slots:
                                default:
                                  - component: f7-row
                                    slots:
                                      default:
                                        - component: f7-col
                                          config:
                                            style:
                                              width: 35px
                                          slots:
                                            default:
                                              - component: oh-icon
                                                config:
                                                  icon: =loop.item.category
                                                  width: 25
                                        - component: f7-col
                                          config:
                                            width: 70
                                            style:
                                              padding-top: 4px
                                          slots:
                                            default:
                                              - component: Label
                                                config:
                                                  text: =items[loop.item.name].displayState
                                        - component: f7-col
                                          config:
                                            style:
                                              width: 50px
                                              text-align: right
                                              padding-top: 4px
                                          slots:
                                            default:
                                              - component: Label
                                                config:
                                                  text: =items[loop.item.name + 'Battery'].displayState
                                        - component: f7-col
                                          config:
                                            style:
                                              width: 25px
                                              text-align: left
                                          slots:
                                            default:
                                              - component: oh-icon
                                                config:
                                                  icon: '=(Number.parseFloat(items[loop.item.name + "Battery"].state) > 95) ? "material:battery_full" : (Number.parseFloat(items[loop.item.name + "Battery"].state) > 80) ? "material:battery_5_bar" : (Number.parseFloat(items[loop.item.name + "Battery"].state) > 60) ? "material:battery_4_bar" : (Number.parseFloat(items[loop.item.name + "Battery"].state) > 40) ? "material:battery_3_bar" : (Number.parseFloat(items[loop.item.name + "Battery"].state) > 20) ? "material:battery_2_bar" : (Number.parseFloat(items[loop.item.name + "Battery"].state) > 1) ? "material:battery_1_bar" : "material:battery_0_bar"'
                                                  color: '=(Number.parseFloat(items[loop.item.name + "Battery"].state) > 60) ? "green" : (Number.parseFloat(items[loop.item.name + "Battery"].state) > 20) ? "orange" : "red"'
                                                  height: 25

I have two questions:

1. text: =loop.item.name #how to get Customname…

Is there an option to create a property on a item (not that i know) en show here a custom name?
Now i have the format of the date, for displayState

2. (Number.parseFloat(items[loop.item.name + “Battery”].state)

I use that expression a lot, can i set that into a var, for more readable code and easier to use?

More tips and tricks are welcome… shoot ,

Thx

btw this is the output now:

[JustinG]

@Jeroen_Timmers

1. text: =loop.item.name #how to get Customname…

Is there an option to create a property on a item (not that i know) en show here a custom name?

You can access the label of the item using loop.item.label, but if you want something truly customized, then you will have to set some custom metadata for the item and use the fetchMetadata repeater property to get access to that custom namespace.

@Jeroen_Timmers

Now i have the format of the date, for displayState

2. (Number.parseFloat(items[loop.item.name + “Battery”].state)

I use that expression a lot, can i set that into a var, for more readable code and easier to use?

No. Variable assignment is not available in the widget expressions. Also, each widget expression is evaluated in its own context, so the variables wouldn’t be shared anyway. Sometimes you just get really long and ugly expressions. Here’s one of my worst:

=(Number.isNaN(Number((@@(props.item + props.target)).split(' ')[0])))?(0):(52.5 + -44.5 * Math.sin((90 + Math.sign(Number((@@(props.item + props.target)).split(' ')[0]) - Number((@@(props.item + props.temp)).split(' ')[0])) * 9 - ((Number((@@(props.item + props.temp)).split(' ')[0]) - 70) * 7)) / 180 * Math.PI))

[Jeroen_Timmers]

Thanx, i have the solution for me…

text: ‘=(loop.item.hasOwnProperty(“metadata”) && loop.item.metadata.hasOwnProperty(“widget”)) ? loop.item.metadata.widget.config.title : loop.item.name’

with the property

fetchMetadata: widget