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

2 Likes

Beautiful. It works :slight_smile: Thank you Hans!

Looking at the workaround (as I was caught by same issue) I have serious concerns. I believe it will work cause repeater is only one place in current UI which work with actual item instance and not its state.
To the point. If you have a small component which is used in several places on the same dashboard then each oh-repeater instance embedded required by workaround will submit its own request to the REST. Another point - it loads all items (potentially several dozen) to get name of just one. I guess there should be a way for repeater to pass additional filter for server to limit results.

Going to test my deployments now. :wink:

No, please note that in my example the dimmerItem is defined in props and repeater is just using that item ( for: dimmerItem).
It is only working that way !!!
If you need more than one item, you can assign more than one item to dimmerItem using the multiple option.

coming from here and after having some trouble with loading times with oh-repeater / sourceType: tags i’d like to add that this solution may not be ideal if you have a lot of items.
as i understand the page checks all items for tags everytime a page with the widget loads. for me the oh-repeater widgets aren’t loading fast enough. still struggling with the access to item.label outside of oh-repeater…

No, it should only check the item defined in props for tags.
Please post your code, so we can check…

Hi!
This my widget:

uid: widget_list_f7_repeaterTagFilter
props:
  parameters:
    - description: The title for the widget
      label: Title
      name: title
      required: false
      type: TEXT
    - description: prefix for items
      label: Tag
      name: tag
      required: true
      type: TEXT
    - context: item
      description: Item Filter
      label: Item
      name: item
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Nov 12, 2021, 8:47:30 AM
component: f7-card
config:
  style:
    noShadow: false
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    margin: 1px
  title: "=props.title ? props.title : 'set props!'"
slots:
  default:
    - component: oh-list
      config: {}
      slots:
        default:
          - component: oh-repeater
            config:
              fragment: true
              for: listItem
              sourceType: itemsWithTags
              itemTags: tRS_EG
              filter: loop.listItem.name.includes(props.item)
            slots:
              default:
                - component: f7-row
                  config:
                    color: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
                    class:
                      - display-flex
                    style:
                      align-items: center
                      padding: 2px 15px
                  slots:
                    default:
                      - component: f7-col
                        config:
                          style:
                            flex: 4
                            text-align: left
                            margin-top: 0px
                        slots:
                          default:
                            - component: Label
                              config:
                                text: =loop.listItem.label
                                style:
                                  padding-top: 5px
                      - component: f7-col
                        config:
                          style:
                            flex: 1
                        slots:
                          default:
                            - component: oh-toggle
                              config:
                                item: =loop.listItem.name + '_auto'
                                color: lightblue
                                style:
                                  padding-top: 2px
                      - component: f7-col
                        config:
                          style:
                            flex: 2
                            text-align: center
                        slots:
                          default:
                            - component: oh-link
                              config:
                                action: popup
                                popupOpen: ='.' + loop.listItem.name + 'popUpRS'
                                style:
                                  margin-top: 10px
                              slots:
                                default:
                                  - component: f7-popup
                                    config:
                                      class: =loop.listItem.name + 'popUpRS'
                                      swipeToClose: true
                                      style:
                                        --f7-popup-tablet-width: 60%
                                        --f7-popup-tablet-height: 129px
                                    slots:
                                      default:
                                        - component: widget:Popup_Rollershutter
                                          config:
                                            item: =loop.listItem.name + '_lm'
                                            title: =loop.listItem.label
                                            popupClass: ='.' + loop.listItem.name + 'popUpRS'
                                  - component: oh-icon
                                    config:
                                      icon: "=(items[loop.listItem.name + '_lm'].state > 89) ? 'blades_80_'  + themeOptions.dark : (items[loop.listItem.name + '_lm'].state > 79) ? 'blades_80_'  + themeOptions.dark : (items[loop.listItem.name + '_lm'].state > 69) ? 'blades_70_'  + themeOptions.dark : (items[loop.listItem.name + '_lm'].state > 59) ? 'blades_60_'  + themeOptions.dark : (items[loop.listItem.name + '_lm'].state > 49) ? 'blades_50_'  + themeOptions.dark : (items[loop.listItem.name + '_lm'].state > 39) ? 'blades_40_'  + themeOptions.dark : (items[loop.listItem.name + '_lm'].state > 29) ? 'blades_30_'  + themeOptions.dark : (items[loop.listItem.name + '_lm'].state > 19) ? 'blades_20_' + themeOptions.dark : (items[loop.listItem.name + '_lm'].state > 9) ? 'blades_10_' : 'blades_00_' + themeOptions.dark "
                                      style:
                                        width: 20px
                                        align-items: center
                      - component: f7-col
                        config:
                          style:
                            flex: 1
                        slots:
                          default:
                            - component: oh-button
                              config:
                                iconF7: arrowtriangle_up
                                iconSize: 20
                                action: command
                                actionItem: =loop.listItem.name
                                actionCommand: UP
                      - component: f7-col
                        config:
                          style:
                            flex: 1
                        slots:
                          default:
                            - component: oh-button
                              config:
                                iconF7: stop
                                iconSize: 20
                                action: command
                                actionItem: =loop.listItem.name
                                actionCommand: STOP
                      - component: f7-col
                        config:
                          style:
                            flex: 1
                        slots:
                          default:
                            - component: oh-button
                              config:
                                iconF7: arrowtriangle_down
                                iconSize: 20
                                action: command
                                actionItem: =loop.listItem.name
                                actionCommand: DOWN

and here you can see the loading behaviour of a page with this widget (tab RS_TagFilter) and the loading behaviour of a page with the same widget but with sourceType: array where i manually have to configure every single item and label (tab RS_Arr):
TagFilter
you can see that in RS_TagFilter the widget takes a little bit of time to load, in RS_Arr the loading isn’t noticable.

i have also made the test with your code (adjusted only the Tag) and also here the loading es noticable:
TestLabel

Ok, I can see your misunderstanding.
If you check my example, there is an item defined in the props:

Only this item is used in my repeater example:

So in fact, the repeater will only check this one item for the tags.

in my first example i use “item” instead on “dimmeritem” and it’s used in oh-repeater:

filter: loop.listItem.name.includes(props.item)

and in the second example i used exactly your code, adapted the “tag” and set one of my dimmer lights as prop.

You see the difference ?
loop and props need to be identical.