Example Custom List Widgets

Add-ons UIs
,
81

@rlkoshak
This line has a typo in the temperature list widget. Note the ] is in the wrong place in the third conditional statement.

Edit: Found second typo, it was also missing an e off parseFloat.

Should be:

`iconColor: '=(Number.parseFloat(items[props.item].state) > 75) ? "red" : (Number.parseFloat(items[props.item].state) > 55) ? "orange" : (Number.parseFloat(items[props.item].state) > 32) ? "blue" : "purple"'`
82

It probably never hit that problem when I tested it as it doesn’t get that cold. Thanks for spotting the errors. I’ll update the OP (and my running widgets too).

83

i’d like to use some custom list widgets but i my first issue is with the oh-list-card card:
the card has a 10px margin and i can’t figure out to override this :frowning:
all my other cards don’t have this margin (more space for widgets on smartphone) and therefore the list card doesn’t fit with the rest…

image

image

any idea hot i can remove the margin?

84

Just use inside widget css style?

config:
  style:    
    padding: 0
    margin: 0
85

i use the standard oh-list-card and put my custom widget list inside the oh-list-card.
the margin comes from the oh-list-card and so i can’t apply the css style inside the widget.
i tried this (page code) but it’s not working:

blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - ...
		- ...
		- component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-list-card
                      config:
                        class:
                          style:
                            padding: 0
                            margin: 0
                      slots:
                        default:
                          - component: widget:rollershutter_list_widget_new
                            config:
                              header: Eingang
                              item: rs_eingang
                          - component: widget:rollershutter_list_widget_new
                            config:
                              header: Büro
                              item: rs_buero
masonry: null
86

Delete “class:”

87

oops, sorry. deleted the “class” line but the margin is still there.

                  default:
                    - component: oh-list-card
                      config:
                        style:
                          padding: 0
                          margin: 0
                      slots:
[...]
88

Let’s call for Batman. @RGroll , does oh-list-card accept css styles? Maybe a style in a parent component could help there? Maybe change oh-list-card to f7-card?

89

Awesome

90

@rlkoshak thanks for your excamples, i really like them, but i struggle to find a solution and maybe you can help.

When using the custom widget the automatic location of the item is gone (e.g Bath > Xiaomi Mijia BT HT), is there way to show this location with custom widgets as well

I ope this image explains a bit better what i mean

image
image762×269 24.6 KB

first line is the default oh-label-item
second line is the custom widget
third line is the default oh-label-item without a subtitle
fourth line is the custom widget without a subtitle

91

You can modify the custom widget code to add that to the footer I would guess. I don’t know. All these examples were written before the Equipment and Location stuff were shown as part of the widgets so that information is all included in the Item’s label for me.

92

thanks for the hint with the footer it is working now
when adding the “props.footer” the same way as the other field and not entering any data in it, openHAB will put the “grand-group” > “group” of the item in the footer by itself

93

Hello everyone,

isn’t it possible to create a custom widget from the standard “List Card” widget? But it should be so dynamic that you can add multiple widgets in the page editor like in the standard. I want to add some flex style formats in the custim widget to switch to rows or columns display.
In my experiments I can add multiple widgets in the page editor but they are removed again when saving.

Here is my construction widget:

uid: KRDListCard
tags:
  - Liste
props:
  parameters:
    - description: A text prop
      label: Prop 1
      name: prop1
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jul 2, 2023, 7:52:24 PM
component: oh-list-card
config:
  title: Text
  stylesheet: >
    .2Spalten {
      display: flex;
      flex-direction: row;
      gap: var(--f7-card-margin-vertical);
    }
  class:
    - 2Spalten
  style:
    display: flex
    flex-direction: row
    gap: var(--f7-card-margin-vertical)
  slots:
    - component: {}
      default: []

The last lines are just trial and error.
But maybe there is a completely different solution, but I can’t find the solution.

94

You can only create a reusable custom widget from the Developer Tools → Widgets screen. You can define widgets inline though.

You should be able to define the whole list card with it’s custom list item widgets in one go, but you need to be aware that the List Card is just a container for List Item widgets. The List Item Widgets themselves will be defined in the slots.