Monatsrückblick Januar/Februar 2026 ist online!

[jensven]

Ich möchte gern die Hintergrundfarbe je nach einem Wert des Datenpunktes ändern.
Speziell hier gehts um den trashschedule Datenpunkt "types"

Dieser hat in meinem Fall 3 Verschiedene möglichkeiten
"GrüneTonne" "Gelber Sack" "GraueTonne"

Habe im Forum folgendes gefunden und an meiner Situation angepasst:

{wert:trashschedule.0.next.types; wert=="GrüneTonne" ? "#006400" :: wert=="Gelber Sack" ? "#ffff00" :: wert=="GraueTonne" ? "#000000" }

Im Editor ändert sich die Hintergrundfarbe dann in Grün (passt da die nächste Tonne Grün ist) aber wenn ich dann in runtime gehe bleibt der hintergrund farblos

EDIT
Die Hintergrundfarbe hat sich nur geändert da der Farbcode Grün als erstes steht. Somit hat der Code an für sich gar nicht funktioniert

Lösung für weitere suchenden
@sborg said in CSS Binding Bedinung mit mehreren Optionen:

@jensven Deine Bedingung ist falsch. Es muss immer "wenn -- dann -- sonst" lauten. Dir fehlt in der letzten Abfrage das "sonst". Damit kann er nicht umgehen und macht einfach gar keine Färbung...

{wert:trashschedule.0.next.types; wert=="Gelber Sack" ? "#ffff00" : wert=="GrüneTonne" ? "#006400" : wert=="GraueTonne" ? "#000000" : "" }

Im einzelnen:

• "Gelber Sack" ? dann "#ffff00" sonst weiter abfragen
• "GrüneTonne" ? dann "#006400" sonst weiter abfragen
• "GraueTonne" ? dann "#000000" [und hier fehlt nun der sonst-Teil] sonst ""

Auch wenn der letzte "sonst" nie zum tragen kommen kann/kommt, muss er angegeben werden! Hier halt mit "nix" ;)

[DJMarc75]

@jensven sagte in Hintergrundfarbe je nach Datenpunkt wert:

bleibt der hintergrund farblos

farblos ? Also unsichtbar? Vll mal den z-index hochstellen - könnte EIN Problem sein :)

[jensven]

@djmarc75
unsichtbar jetzt nicht unbedingt.
ich habe das widget "Basic - String" in dem der Datenpunkt "types" drinnen ist. ALs Hintergrundfarbe dann den oben genannten Code. Doch es kommt keine Hintergrundfarbe in der Runtime

Was meinst du mit "z-index hochstellen ?

[DJMarc75]

@jensven sagte in Hintergrundfarbe je nach Datenpunkt wert:

in dem der Datenpunkt "types" drinnen ist

Jo, kenne Deinen Datenpunkt nicht aber da kann es schon auch sein dass die Schreibweise des jeweiligen Wertes nicht mit Deiner Definition in VIS übereinstimmt.

@jensven sagte in Hintergrundfarbe je nach Datenpunkt wert:

Was meinst du mit "z-index hochstellen ?

Basics in VIS:

Z-Index gibt die "Höhenebene" Deines Widgets an

stell das mal auch, z.B. auf 10

[jensven]

@djmarc75

@djmarc75 said in Hintergrundfarbe je nach Datenpunkt wert:

Jo, kenne Deinen Datenpunkt nicht aber da kann es schon auch sein dass die Schreibweise des jeweiligen Wertes nicht mit Deiner Definition in VIS übereinstimmt.

Da habe ich nochmal nachgeschaut und habe es eins zu eins vom Adapter kopiert. Falsch kann dies eigentlich sein

Basics in VIS:

Z-Index gibt die "Höhenebene" Deines Widgets an

stell das mal auch, z.B. auf 10

Habe ich getan, hat sich nichts geändert.

Habe jetzt mal den code in folgenden geändert:

{wert:trashschedule.0.next.types; wert=="Gelber Sack" ? "#ffff00" :: wert=="GrüneTonne" ? "#006400" :: wert=="GraueTonne" ? "#000000" }

Also den gelben Sack nach vorne geschoben und nun wird im Editor die Farbe in Gelb geändert, was ja nicht stimmen kann da der Wert des Datenpunktes Momentan "GrüneTonne" ist.
Aber in der Runtime bleibt der Hintergrund weiterhin Farblos

[DJMarc75]

@jensven sagte in Hintergrundfarbe je nach Datenpunkt wert:

Aber in der Runtime bleibt der Hintergrund weiterhin Farblos

zeig doch mal bitte einen Screenshot von diesem "farblos" damit man sich mal ein Bild machen kann.

[jensven]

@djmarc75 said in Hintergrundfarbe je nach Datenpunkt wert:

zeig doch mal bitte einen Screenshot von diesem "farblos" damit man sich mal ein Bild machen kann.

Im Editor

In der Runtime

[DJMarc75]

@jensven bei solchen CSS-Bindings kenn ich mich halt wenig aus - warte mal lieber, da meldet sich bestimmt jemand mit Ahnung ;)

und im Zweifelsfall die doppelten Doppelpunkte mal durch einzelne Doppelpunkte ersetzen :) - kann ja klappen ;)

[jensven]

Habe jetzt alles mögliche probiert und es nicht hinbekommen.
Habe für jeden Tonnen Typ nen html Widget erstellt, die alle übereinander gelegt und es mit der Sichtbarkeit Option gelöst.

Falls es doch noch jemand gibt der die Lösung für das CSS Binding hat bitte hier rein schreiben für weitere Projekte ect. :blush:

[SBorg]

@jensven Deine Bedingung ist falsch. Es muss immer "wenn -- dann -- sonst" lauten. Dir fehlt in der letzten Abfrage das "sonst". Damit kann er nicht umgehen und macht einfach gar keine Färbung...

{wert:trashschedule.0.next.types; wert=="Gelber Sack" ? "#ffff00" : wert=="GrüneTonne" ? "#006400" : wert=="GraueTonne" ? "#000000" : "" }

Im einzelnen:

• "Gelber Sack" ? dann "#ffff00" sonst weiter abfragen
• "GrüneTonne" ? dann "#006400" sonst weiter abfragen
• "GraueTonne" ? dann "#000000" [und hier fehlt nun der sonst-Teil] sonst ""

Auch wenn der letzte "sonst" nie zum tragen kommen kann/kommt, muss er angegeben werden! Hier halt mit "nix" ;)

[jensven]

@sborg said in CSS Binding Bedinung mit mehreren Optionen:

Auch wenn der letzte "sonst" nie zum tragen kommen kann/kommt, muss er angegeben werden! Hier halt mit "nix" ;)

das wars :man-facepalming:
Ich danke dir