Changing the name of a widget

Hi All,

This widget displays the dimmer items nicely, but it populates the name with the item name, rather than its label.


You can see it says KitchenBarDim1, is there a way I can change it? I went into the Widget and tried label: Island and also edited the YAML on the page view, it just wouldnt change!

thanks

Hi

Can you post the YAML in code fences? It is almost impossible to decipher from the screen shot.

Certainly, sorry!

uid: Dimmer
tags: []
props:
  parameters:
    - context: item
      description: An item to control
      label: Island
      required: false
      type: TEXT
timestamp: Sep 29, 2021, 2:45:41 PM
component: f7-card
config:
  noShadow: false
  class:
    - padding
  style:
    box-shadow: 0px 0px 0px hsl(0,0%,90%)
    border-radius: 12px
    height: 5em
slots:
  default:
    - component: f7-row
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: Label
                  config:
                    text: '=(props.dimmeritem) ? props.dimmeritem : " Set Dimmer"'
                    style:
                      color: var(--card-text-color)
                      font-size: 15px
                      line-height: 30px
                      white-space: nowrap
                      overflow: hidden
                      text-overflow: ellipsis
                      position: absolute
                      top: 0.5em
    - component: oh-toggle
      config:
        style:
          position: absolute
          top: 1.2em
          left: calc(100% - 60px)
        color: green
        item: =props.dimmeritem
    - component: f7-row
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: f7-icon
                  config:
                    style:
                      font-size: 12px
                      line-height: 15px
                      color: grey
                      position: absolute
                      top: 3em
                      left: 1.2em
                    f7: rays
          - component: f7-col
            slots:
              default:
                - component: Label
                  config:
                    text: =items[props.dimmeritem].displayState || items[props.dimmeritem].state
                    style:
                      position: absolute
                      top: 3em
                      left: 3em
                      color: grey
                      font-size: 12px
                      line-height: 15px
                      white-space: nowrap
                      overflow: hidden
                      text-overflow: ellipsis
    - component: oh-slider
      config:
        item: =props.dimmeritem
        max: 100
        Padding: 500px
        label: false
        color: green
        scale: false
        noShadow: true
        outline: false
        min: 0
        unit: "%"
        style:
          width: calc(100% - 2em)
          position: absolute
          top: 4.5em
          left: 1em

Shouldn’t this be

                    text: '=(props.dimmeritem) ? items[props.dimmeritem].label : " Set Dimmer"'

Hi

Looks like your props does not contain a name:

props:
  parameters:
    - context: item
      description: An item to control
      label: Island
      required: false
      type: TEXT
timestamp: Sep 29, 2021, 2:45:41 PM

So props.dimmeritem is not defined?

Should be:

props:
  parameters:
    - context: item
      description: An item to control
      label: Island
      name: dimmeritem
      required: false
      type: TEXT
timestamp: Sep 29, 2021, 2:45:41 PM

No, it then should show the alternative text.
Like I wrotw before,

Will only return the configuration parameter for the widget, whereas

will return the given label for that item.

The entire name has disappeared now :smiley: despite my items having labels

Yes, it does that on mine - however the toggle will also have no item defined as the props section does not have a props.dimmeritem configured.

Ups, sorry, I was wrong about the label, see here :

Indeed, good catch

and here is a workaround :

uid: Dimmer
tags: []
props:
  parameters:
    - context: item
      description: An item to control
      label: Dimmer Item
      name: dimmeritem
      required: true
      type: TEXT
timestamp: Sep 29, 2021, 4:44:28 PM
component: f7-card
config:
  noShadow: false
  class:
    - padding
  style:
    box-shadow: 0px 0px 0px hsl(0,0%,90%)
    border-radius: 12px
    height: 5em
slots:
  default:
    - component: f7-row
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-repeater
                  config:
                    for: dimmeritem
                    sourceType: itemsWithTags
                    itemTags: Light
                    filter: loop.dimmeritem.name.includes(props.dimmeritem)
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =loop.dimmeritem.label
                          style:
                            color: var(--card-text-color)
                            font-size: 15px
                            line-height: 30px
                            white-space: nowrap
                            overflow: hidden
                            text-overflow: ellipsis
                            position: absolute
                            top: 0.5em

1 Like

Beautiful. It works :slight_smile: Thank you Hans!