How to use the Build-in widget, List Card

[Kim_Andersen]

Sorry if this is the wrong catagory. cant seem to find any better.

Can anyone tell me, whats this MainUI Pages List Card for, and even better, how do I configure it? Either there is some issues with it, or Im simply to stupid.

When I add the widget (List Card) I see a configure option at the top right corner. Thats the easy part. I choose simple list:
I also got a plus icon at the left. Nothing happens when I click this.
And the I got a List configuration. When I press this, I have the option of: Configure list. But nothing happens when I click on it.

This is driving me nuts… All I wanted was a simple widget showing two items (from Icalendar). But I cant add any items. Thats a pretty borring List to me

Im on openhabian openHAB 4.3.4
Release Build

[rlkoshak (Rich Koshak)]

@Kim_Andersen

Can anyone tell me, whats this MainUI Pages List Card for

The cards you see on the overview tabs are a type of list card.

You also often see the list card used with an oh-repeater.

At a high level, an oh-list-card is a container that lets you add oh-X-item widgets as rows.

The code for the battery example can be found at Battery Level Status.

The base widget is an oh-list-card and the oh-repeater is inserted in the first slot. The repeater will look through the Items that meet the filter and generate an oh-list-item for each.

But you don’t have to use a repeater. You can insert oh-X-item widgets in the slots manually, one after the other to populate the rows.

I’ve never tried to configure an oh-list-card manually through the UI though. I’ve always used the widget builder under developer tools and hand coded the YAML. But I just tried it and it seems to be working as I expected. But I’m on OH 5 M2 so maybe something was fixed?

When you click the + you should get an option to choose an “X item” widget which you should be able to separately configure. That will become row 1. Then click plus again and configure row 2 and so on.

These are the steps I took:

1. Added a row and columns to hold the card.

2. Click the + and selected “List Card” as the widget.
   

   

3. I click the + in the widget and chose an appropriate widget. In this case I choose a Label Item widget. Now there is a new black and white configuration icon.
   

   

4. I click that configuration icon to configure the Label Item widget.
   

   

And at that point it crashed on me.

I’m not sure why nor whether the problem is the browser or what. That will require some debugging I don’t have right now.

But a simple two row widget built by hand would look something like this:

uid: widget_5b016e0c58
props:
  parameterGroups: []
  parameters: [ ]
tags: []
component: oh-list-card
config:
  title: 'Times of Day'
  footer: 'Populated by Astro'
slots:
  default:
    - component: oh-label-item
      config:
        title: "='Default day: ' + @'Default_Day'"
        icon: f7:clock
        iconColor: red
    - component: oh-label-item
      config:
        title: "='Default evening: ' + @'Default_Evening'"
        icon: f7:clock
        iconColor: green

which renders

That ought to get you by for now. But console logs from the browser and an issue will need to be filed so that the fact that clicking on + doesn’t work.

Note, when in the YAML editor, it has intellisence. Hitting ctrl-space will bring up all the correct ways to complete the field you are on of the correct fields you can enter at that point. It’s Item aware too so if you refernce an Item using items. or @ (which is a shorthand for use the display state of the Item or the raw state if there isn’t a display state) you’ll get a searchable list fo Items to choose from. So hand coding these is not that much more of a pain.

[Kim_Andersen]

@rlkoshak

1. I click the + in the widget and chose an appropriate widget. In this case I choose a Label Item widget. Now there is a new black and white configuration icon.

2. I click that configuration icon to configure the Label Item widget.

And at that point it crashed on me.

Thanks Rich.
But I never get as far as you. When I click the + in the widget, nothings happens. When I click the new black and white configuration on the widget, nothing happens. And as well as the List, nothing happens. The only thing that seems to work, is the usual Widget menu where I can configure the main widget.

This is why I wondered, how the heck am I suppose to add any items. But it seems like the List card is faulty and need someone overhaling. I´m not sure I can provide any logs or anything, as my problem is, nothing happens.

What I needed was a simple widget, which will show Name and Time (date+time) for the next event in my Icalendar thing. I dont need any icons ect yet
I did try modifying a few other widgets, including your old Power widget, as I thought this would have been straight forward and simple. But I failed. I will give it a new shot later with the example from your time of day example. It still looks straight forward and simple, just as I thought

@rlkoshak

Note, when in the YAML editor, it has intellisence. Hitting ctrl-space will bring up all the correct ways to complete the field you are on of the correct fields you can enter at that point. It’s Item aware too so if you refernce an Item using items. or @ (which is a shorthand for use the display state of the Item or the raw state if there isn’t a display state) you’ll get a searchable list fo Items to choose from. So hand coding these is not that much more of a pain.

Ahh thanks alot… I did notice some list of items appeared once in a while. But I never actually managed to figure out, what triggered it… Nice to know now.

[rlkoshak (Rich Koshak)]

@Kim_Andersen

But I never get as far as you. When I click the + in the widget, nothings happens. When I click the new black and white configuration on the widget, nothing happens.

The new black and white widget appearing is the only thing that will happen when you click the +. So if you are getting that icon the + part is working.

@Kim_Andersen

This is why I wondered, how the heck am I suppose to add any items. But it seems like the List card is faulty and need someone overhaling. I´m not sure I can provide any logs or anything, as my problem is, nothing happens.

I’m willing to bet there is all sorts of stuff being logged to the console. In your browser open the browser console (in Firefox it’s under More Tools → Web Developer Tools). The console is where the MainUI logs appear. I’m willing to bet there is an error logged when you click on something and nothing happens.

But again, it appears the + icon is working. It’s the other black and white icons that are not working. But it would be good to capture the logs from adding the list card through the point where it breaks.

[Kim_Andersen]

I will troubleshoot later on this one. Cause right now I seem to be struggling with the build in rules. (more of that in another thread).

Anyway, I tried your example, and it worked fine, as suspected. However, would it be possible to have two items states on one line? I added +‘item’ and it worked fine. But, there is no space bestween the two items states in the output. So it looked quite stupid. (name of an event as well as date/time all on one sentense without space inbetween).

[rlkoshak (Rich Koshak)]

@Kim_Andersen

However, would it be possible to have two items states on one line?

Yes, you just need to add the space. There’s no leading or trailing space by default so you ahve to add it yourself.

"='Some title string: ' + @'ItemOne' + ' ' + @'ItemTwo'"

It’s the same sort of thing you’d do in a rule to include the states of two Items in one log statement, for example. You are building up a string with parts. Expressions are just a little bit of JavaScript code which is executed to calculate the value for a given widget property. They give you the ability to make really dynamic widgets that combine multiple Items into a meaningful single widget.

If you want something more complicated than that, you’ll probably have to go down the path of a custom widget. Here’s an example that combines the sensor and the actuator for my garage door into one widget.

uid: rlk_garagedoor_list
tags:
  - garagedoor
  - list
  - marketplace:126585
props:
  parameters:
    - description: Door name
      label: Name
      name: name
      required: false
      type: TEXT
    - context: item
      description: Control Item
      label: Control Item
      name: control_item
      required: false
      type: TEXT
    - context: item
      description: Sensor Item
      label: Sensor Item
      name: sensor_item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Feb 3, 2021, 1:12:37 PM
component: oh-list-item
config:
  action: command
  actionCommand: true
  actionItem: =props.control_item
  badge: '=(items[props.sensor_item].state == "CLOSED") ? "closed" : "open"'
  badgeColor: '=(items[props.sensor_item].state == "CLOSED") ? "green" : "red"'
  icon: '=(items[props.sensor_item].state == "CLOSED") ? "f7:house" :
    "f7:house_fill"'
  iconColor: '=(items[props.sensor_item].state == "CLOSED") ? "green" : "red"'
  title: =props.name

The color, icon, and badge are controlled by the sensor Item. Clicking on the widget sends a command to the actuator Item.

Since I wrote the above new features were added to expressions which can make them shorter and easier to understand, but I’ve not gone back to update this widget yet.

[Kim_Andersen]

@rlkoshak

Yes, you just need to add the space. There’s no leading or trailing space by default so you ahve to add it yourself.

"='Some title string: ' + @'ItemOne' + ' ' + @'ItemTwo'"

It’s the same sort of thing you’d do in a rule to include the states of two Items in one log statement, for example.

Thanks… I knew I probably had to do something like that, but the spaces (missing) made me give it up. I´ll give it a new try tonight

@rlkoshak

Since I wrote the above new features were added to expressions which can make them shorter and easier to understand, but I’ve not gone back to update this widget yet.

I may be going that part, as I enjoy the more simple but still useable look. But I guess I have to learn alot about how to build widgets and even more, how the heck to do a decent looking display, (styles etc). Right now I fokus on getting things to be just useable.