I am currently trying to add this to my setup, but I do not get how the state description works. Could you elaborate on that one or link me somewhere? 
Hi Johannes,
You can add the state description as metadata when you open the item in the UI. See my example config in the screenshot:
The actual configuration depends on your preference. You can read more about state descriptions in the OH documentation:
1 Like
Thank you! 
uid: Müllabfuhr_cell
tags: []
props:
parameters:
- description: "Text Prefix<b> ( Default: Next colltection )</b>"
label: Text
name: prefix
required: false
type: TEXT
- context: item
description: An item with the String of the next Garbage Collection Date
label: Item Date
name: date
required: true
type: TEXT
- context: item
description: An item with the String of the next Garbage Collection Type
label: Item Type
name: type
required: true
type: TEXT
parameterGroups: []
timestamp: May 2, 2021, 12:34:49 PM
component: f7-card
config:
style:
border-radius: var(--f7-card-expandable-border-radius)
min-width: 200px
slots:
default:
- component: f7-block-header
config:
style:
display: flex
flex-direction: row
justify-content: center
padding: 0px
padding-left: 0px
margin: 0px
slots:
default:
- component: Label
config:
style:
padding: 10px
text-align: center
text: '=(props.prefix) ? props.prefix + " " + dayjs(items[props.date].state).fromNow() : "Next collection " + " " + dayjs(items[props.date].state).fromNow()'
- component: f7-block
config:
style:
display: flex
flex-direction: row
justify-content: center
padding: 10px
padding-left: 0px
margin: 0px
height: 70px
slots:
default:
- component: oh-image
config:
visible: "=items[props.type].state.split('/')[0] === 'Restmüll' ? true : false"
url: /icon/tonne_grau.svg
style:
padding-right: 5px
width: 30px
- component: oh-image
config:
visible: "=items[props.type].state.split('/')[0] === 'Gelb' ? true : items[props.type].state.split('/')[1] === 'Gelb' ? true : items[props.type].state.split('/')[2] === 'Gelb' ? true : items[props.type].state.split('/')[3] === 'Gelb' ? true : false"
url: /icon/tonne_gelb.svg
style:
padding-right: 5px
width: 30px
- component: oh-image
config:
visible: "=items[props.type].state.split('/')[0] === 'Bio' ? true : items[props.type].state.split('/')[1] === 'Bio' ? true : items[props.type].state.split('/')[2] === 'Bio' ? true : items[props.type].state.split('/')[3] === 'Bio' ? true : false"
url: /icon/tonne_braun.svg
style:
padding-right: 5px
width: 30px
- component: oh-image
config:
visible: "=items[props.type].state.split('/')[0] === 'Papier' ? true : items[props.type].state.split('/')[1] === 'Papier' ? true : items[props.type].state.split('/')[2] === 'Papier' ? true : items[props.type].state.split('/')[3] === 'Papier' ? true : false"
url: /icon/tonne_blau.svg
style:
width: 30px
- component: oh-image
config:
visible: "=items[props.type].state.split('/')[0] === 'Sperrmüll' ? true : items[props.type].state.split('/')[1] === 'Sperrmüll' ? true : items[props.type].state.split('/')[2] === 'Sperrmüll' ? true : items[props.type].state.split('/')[3] === 'Sperrmüll' ? true : false"
url: /icon/sperrmuell.svg
style:
width: 30px
1 Like
Very nice widget. I already used your widgets for the washing mashine and the universal widget because I like your style very much.
I would also like to use this one but I am not sure how you configured your items.
I already have icalendar in use for my garbage calendar but currently I am just checking the days today and tomorrow. As far as I can see you can see a much longer date range in your widget so I would be gad if you could show me your config for icalendar.
My icalendar things file looks like this:
Bridge icalendar:calendar:private "calendar" [ url="https://calendar.google.com/calendar/ical/xxxxx", refreshTime=5 ]
Thing icalendar:eventfilter:today "Today events" (icalendar:calendar:private) [ maxEvents=4, datetimeUnit="DAY", datetimeStart=0, datetimeEnd=1, datetimeRound=true, refreshTime=5 ]
Thing icalendar:eventfilter:tomorrow "Tomorrows events" (icalendar:calendar:private) [ maxEvents=4, datetimeUnit="DAY", datetimeStart=1, datetimeEnd=2, datetimeRound=true, refreshTime=5 ]
Thing icalendar:eventfilter:day2 "Day2 events" (icalendar:calendar:private) [ maxEvents=4, datetimeUnit="DAY", datetimeStart=2, datetimeEnd=3, datetimeRound=true, refreshTime=5 ]
Hi Eric,
You should not to set the endTime property or use a much higher value. The binding will stop searching at this point in the future and will not return a hit if the event is later than the specified number of days.
I configured my things through the UI. You can see one complete example in the screenshots:
2 Likes
now it is working perfectly! Thank you for this beautyful widget
Dear Ward and all,
Thanks a lot for this excellent widget. It works nearly perfect for me. I really learned a lot when reverse-engineering how you constructed the widget.
Interestingly I have the same issue with the displayState function: for me it delivers no footer at all when integrated in a list. The State Description Metadata is correctly encoded (if I use the garbage_cell_v4 widget it works fine and displays Thursday, 22.05, like I want it to be). This looks like a bug to me. As a workaround, I have opted for the following:
footer: =loop.item.state.substring(0,10)
It doesn’t really look like I want it to look like, but it does the job for now and looks less overcrowded than just using the state function.
Does anyone know how to order the list by date, so that the next garbage collection always stays on top of the list?
You could order the list by creating a text item that contains the datearray parameter. You then need a rule that updates the item whenever one of the dates changes. It not super convenient but not too complicated. I don’t know any other way to do this.
EDIT: oh and please don’t forget to share your code here since this has been requested by other users as well and I would also be interested but was to lazy to implement this myself so far 
1 Like
Let’s do a first try for the sorted list. The script uses one group item containing all garbage filter items (gMullFilter) and one item for the result (SortedGarbageDateItems). Color and naming of the list entries is taken from custom metadata namespace (color and name) of each filter item.
var FrameworkUtil = Java.type("org.osgi.framework.FrameworkUtil");
var _bundle = FrameworkUtil.getBundle(scriptExtension.class);
var bundle_context = _bundle.getBundleContext()
var MetadataRegistry_Ref = bundle_context.getServiceReference("org.openhab.core.items.MetadataRegistry");
var MetadataRegistry = bundle_context.getService(MetadataRegistry_Ref);
var Metadata = Java.type("org.openhab.core.items.Metadata");
var MetadataKey = Java.type("org.openhab.core.items.MetadataKey");
#var logger = Java.type("org.slf4j.LoggerFactory").getLogger("org.openhab.rule." + ctx.ruleUID);
var members = Java.from(ir.getItem("gMullFilter").getAllMembers());
members.sort(function(a,b) {
return new Date(a.state) - new Date(b.state);
});
var sortedString = "";
members.forEach(function(item) {
var color = MetadataRegistry.get(new MetadataKey("color", item.name));
var name = MetadataRegistry.get(new MetadataKey("name", item.name));
if ((null != color) || (null != name)) {
sortedString += '"' + name.value + '","' + color.value + '","f7:trash","' + item.name + '"|'
}
})
if (1 < sortedString.length) {
events.postUpdate("SortedGarbageDateItems", sortedString.slice(0, -1));
}
1 Like
Is this script to sort the dates?? and if yes, how to use with the widget?
Thanks
Nikos
Yes this script is meant to sort the dates. I do not use it yet but you can see that it relies on custom Item metadata. This would be the ideal solution in my opinion (at least in theory) but since the support for custom metadata is still pretty limited in main ui I haven’t really used this feature.
As DrRSatzteil (netter Name btw. 
) already wrote the script is meant to sort the dates. On my setup the script gets called everytime a garbage items changes. Color and name are set as custom namespace on each item. These are used to beautify the list.
Can you please tell me how to use it ? I am just now try to migrate my oh2 to oh3 and all these metadata confuse me.
Sure. Got to your item list and select the appropriate item. Click on the “Add Metadata” button and select “Enter custom namespace”. Enter e.g. “color” and finally you should end with something like this
value: yellow
config: {}
thanks for your reply but i am think its too difficult for me 
i have all Ready put the custom metadata like you told me, when i run the script i get this error:
Script execution of rule with UID ‘4c3bed8d7f’ failed: TypeError: Cannot get property “value” of null in at line number 23
next question is how to use the “SortedGarbageDateItems” item to the garbage widget??
Wauw, this is indeeed working! thanks!!! I will use this in several other widgets as well.
I’m a bit of an OpenHAB beginner and definitely new to widgets, but I’m trying to get this to work. I got the widget and it works statically, with some missing items, but I’m not sure how to make and populate the items:
- So it’s easy enough to create the item “items.garbage_collection_garbage” and I assume I’ll need to write a script to populate SOMETHING in the item so that “displayState” is some value, but what type IS the item? I see references in the messages here to meta data, but I’ve never used it before. How do I set it up so “items.garbage_collection_garbage.displayState” returns what’s necessary?
- Once I get that item working, I obviously need an item “items.local_dateweekday”. Where does that come from? Do I need another script to populate that? Another script?
I think I understand the rest, but I need to get over this hurdle first. Any help?
Thanks!
Hi Ian,
Let me try to help you explain what you need:
-
For every line that should be shown in the widget list you will need an item of type DateTime. To get a human readable displayState from this item you will need to apply the state description metadata (Open the item in Main Ui and click ‚Add metadata‘ → select ‚State Description‘. Then fill in the pattern value something like: ‚ %1$tA %1$td.%1$tm.%1$tY‘ and check out the resulting display in the main UI. Please search the forums and/or documentation if you need more help on the pattern syntax. I think there should be plenty of helpful resources around.
-
I should have updated the first post, sorry for not doing so. Please use the garbage_list_v1 version of the widget that I posted on Jan 26. there is no need for this item anymore. I will update the first post when I find some more time.
I hope this will help you to get on the right track. Please let me know if you got it working!