Thanks for testing — really appreciate it. I switched to oh-input-item / simpleList: false as you suggested, but the issue persists exactly as before: the first date field (“Von”) reliably sets its variable, the second (“Bis”) visually shows the picked date but vars.customToDraft stays undefined.
version: 1
widgets:
widget_Grafanachartwithtimeranges:
tags: []
props:
parameters:
- description: Titel der Karte
label: Titel
name: title
required: false
type: TEXT
- description: URL für den Grafana-Frame
label: Quell-URL
name: URL
required: true
type: TEXT
- default: from=now-6h&to=now;-6h,from=now-12h&to=now;-12h,from=now-1d&to=now;-24h,from=now/d&to=now/d;Heute,from=now-3d&to=now;-3 Tage,from=now-7d&to=now;-7 Tage,from=now-14d&to=now;-14 Tage
description: Komma-getrennte Liste. Beispiel "from=now-6h&to=now;6h,from=now-1d/d&to=now-1d/d;Gestern". Erster Eintrag ist Standard.
label: Zeitraum-Optionen
name: timerange
required: true
type: TEXT
- default: "420"
description: Höhe des Frames in px (leer = Standard)
label: Höhe (px)
name: height
required: false
type: TEXT
- default: "#FFFFFF"
label: Hintergrundfarbe
name: bgColor
required: false
type: TEXT
parameterGroups:
- name: general
label: Allgemein
- name: colors
label: Farben
component: f7-card
config:
style:
background: =props.bgColor
border-radius: 12px
margin: 0
padding: 12px
title: =props.title
slots:
default:
- component: Label
config:
style:
color: var(--f7-color-gray)
display: block
font-size: 10px
margin-bottom: 4px
word-break: break-all
text: >-
=('customRange: ' + vars.customRange + ' | src: ' + (vars.customRange ? props.URL.replace('{period}', vars.customRange) : props.URL.replace('{period}', vars.selectedPeriod || props.timerange.split(',')[0].split(';')[0])))
- component: oh-webframe-card
config:
borders: false
class:
- display-block
height: =(props.height || '420') + 'px'
noBorder: true
noShadow: true
style:
border-radius: 8px
overflow: hidden
src: >-
=vars.customRange
? props.URL.replace('{period}', vars.customRange)
: props.URL.replace('{period}', vars.selectedPeriod || props.timerange.split(',')[0].split(';')[0])
- component: f7-segmented
config:
class:
- padding-top-half
outline: false
round: true
style:
--f7-button-border-radius: 8px
--f7-button-font-size: 13px
--f7-button-font-weight: 500
--f7-button-padding-horizontal: 0px
--f7-button-padding-vertical: 0px
--f7-button-text-transform: none
margin: 0
slots:
default:
- component: oh-repeater
config:
for: size
fragment: true
sourceType: range
slots:
default:
- component: oh-repeater
config:
for: period
fragment: true
in: =[props.timerange.split(",")[loop.size].split(";")[1]]
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: selectedPeriod
actionVariableValue: =props.timerange.split(",")[loop.size].split(";")[0]
fill: =(!vars.customRange && ((props.timerange.split(',')[loop.size].split(';')[0] == vars.selectedPeriod) || (props.timerange.split(',')[0].split(';')[1] === loop.period && !vars.selectedPeriod)))
round: true
style:
--f7-button-border-color: var(--f7-card-outline-border-color)
text: =loop.period
- component: oh-button
config:
popupOpen: .grafana-custom-range-popup
fill: =(!!vars.customRange)
round: true
style:
--f7-button-border-color: var(--f7-card-outline-border-color)
text: "..."
- component: f7-popup
config:
class:
- grafana-custom-range-popup
slots:
default:
- component: f7-navbar
config:
title: Eigener Zeitraum
slots:
right:
- component: oh-button
config:
popupClose: true
text: Schließen
- component: f7-block
slots:
default:
- component: f7-list
config:
simpleList: false
slots:
default:
- component: oh-input-item
config:
title: Von
type: date
variable: customFromDraft
- component: oh-input-item
config:
title: Bis
type: date
variable: customToDraft
- component: f7-block
config:
style:
color: var(--f7-color-gray)
font-size: 10px
margin: 4px 0
word-break: break-all
slots:
default:
- component: Label
config:
text: >-
=('Von: ' + JSON.stringify(vars.customFromDraft) + ' | Bis: ' + JSON.stringify(vars.customToDraft))
- component: oh-button
config:
class:
- padding-top-half
action: variable
actionVariable: customRange
actionVariableValue: >-
=(!vars.customFromDraft || !vars.customToDraft) ? '' : ('from=' + new Date(vars.customFromDraft).toISOString().slice(0,19) + '&to=' + new Date(vars.customToDraft).toISOString().slice(0,19))
fill: true
round: true
text: Übernehmen
popupClose: true
- component: oh-button
config:
class:
- padding-top-half
outline: true
round: true
text: Zurücksetzen auf Schnellauswahl
action: variable
actionVariable: customRange
actionVariableValue: ""
Since your minimal repro didn’t show the bug, there must be something specific to my actual widget structure that triggers it — possibly the nesting depth, the f7-popup + f7-navbar wrapper, or the sibling debug Label component that re-renders on every variable change. Posting the full widget below so you can see exactly what’s different from your repro.
Structural differences from your minimal repro that I suspect might matter:
- The two date fields are inside an
f7-popup → f7-block → f7-list, not directly in the card’s default slot.
- There’s an
f7-navbar as a sibling slot inside the popup (for the title/close button).
- There’s a second
f7-block immediately after the f7-list, containing a debug Label whose text expression reads both customFromDraft and customToDraft — this re-renders on every keystroke/selection in either field.
- The “Apply” button references both variables together in a single
actionVariableValue ternary expression.
If you have a moment to drop this exact YAML into a test instance, I’d be curious whether it reproduces for you too. If it does, that narrows it down to something in this structure; if it doesn’t, then it’s likely something environment-specific on my end (browser, theme, locale — running Chrome desktop, German locale, if that’s relevant) and I’ll dig further on that side.
Thanks again, sorry for the back-and-forth!
How do I mark it when a human produced the text?
