How to add a text to an item in a widget?

Setup, Configuration and Use Beginners
1

I would like to add a text to the item trendItem: =(props.windItem) in following widget. The trendItem shows simply an number (for example ‘5’) and I would like to add a string “km/h” in order it looks on the widget like “5 km/h”.

- component: oh-label-card
                        config:
                          action: analyzer
                          actionAnalyzerCoordSystem: time
                          actionAnalyzerItems: =[props.windItem]
                          icon: f7:wind
                          iconColor: '=(items[props.windItem].state < Number(props.windMax)  ? "red" : "green")'
                          iconSize: 31px
                          item: =(props.windItem)
                          left: 0%
                          noShadow: true
                          position: absolute
                          top: 0
                          trendGradient:
                            - "#f94144"
                            - "#42b983"
                            - "#3a86ff"
                          trendItem: =(props.windItem)
                          vertical: false
                          width: 100%
                          z-index: 1

How can I do that?

2

There are several possibilities:

  1. From what you have posted, I am guessing that your item is a Number type item. If you change this to a Number:Speed quantity type item then the unit label will be automatically added to the display value.

  2. If you cannot or do not want to change the item type, you can add the unit label to the item using the State description metadata. There are numerous examples of how to do this in the forums and the help docs.

  3. When using the label card there are two ways to set the information that the card displays. When you use the item property it automatically fetches the display state (if there is one) or the state of the item and uses that for display. However, you can also just set a label property instead and the card will display whatever you have set that property to. In this case you can an item state plus an additional string so:

label: =`${items[props.windItem].state} km/h`
3

Thanks for your answer! I actually used the item as a Number type and it showed the speed. Than I added as you described the label in my widget like this:

label: =`${items[props.windItem].state} km/h`

Now I had the problem that the card showed km/h km/h (twice). So after removing the km/h from the label it worked as you described!!¨