Skip to content

Widget-Typ: Select

Select-Widgets verhalten sich im Dashboard wie normale Icon/Text-Widgets, beziehen ihre Optionen aber aus dem Status und öffnen bei Tap einen Auswahl-Dialog.

Einsatzfälle

  • Lichtszene wählen
  • Betriebsmodus wechseln
  • Profil, Preset oder Quelle auswählen

Statusmodell

Ein Select-Widget benötigt im Status:

  • den aktuell gesetzten Wert
  • ein Array mit allen Optionen

Primitive Optionen

{
  "scene": "movie",
  "available_scenes": ["movie", "reading", "off"]
}

Objektoptionen

{
  "scene": "movie",
  "available_scenes": [
    {
      "id": "movie",
      "label": "Filmabend"
    },
    {
      "id": "reading",
      "label": "Lesen"
    }
  ]
}

Konfiguration

{
  "content": {
    "mode": "select",
    "title": {
      "mode": "static",
      "value": "Szene"
    },
    "value": {
      "mode": "path",
      "value": "scene_label"
    },
    "select": {
      "valuePath": "scene",
      "optionsPath": "available_scenes",
      "optionValuePath": "id",
      "optionLabelPath": "label",
      "action": {
        "request": {
          "url": "http://192.168.1.20/api/lights/living-room/scene",
          "method": "post",
          "jsonBody": {
            "scene": ""
          }
        },
        "valueBindings": [
          {
            "target": "json_body",
            "path": "scene"
          }
        ],
        "refreshAfterAction": true
      }
    }
  }
}

Feldbedeutung

  • valuePath: aktueller Wert im Status
  • optionsPath: Pfad auf das Optionsarray
  • optionValuePath: interner Wert eines Objekt-Elements
  • optionLabelPath: sichtbarer Text eines Objekt-Elements

Wenn ein Array-Element nur ein Primitive ist, wird derselbe Wert für Value und Label verwendet.

Anzeige im Widget

Das Widget selbst nutzt:

  • Icon
  • Titel
  • content.value, falls gesetzt

Die Select-spezifischen Statusdaten sind nur für den Dialog relevant, nicht für die Grunddarstellung. Dadurch bleibt das Widget kompakt.

Dialogverhalten

  • Tap öffnet den Dialog
  • das aktuell bekannte Select-Value ist vorgewählt
  • die Optionliste kommt aus dem letzten Snapshot
  • OK sendet den gewählten Wert an den Action-Endpoint
  • prompt: true zeigt vor dem Senden einen zusätzlichen Bestätigungsdialog

Optimistisches Verhalten

Wenn refreshAfterAction = false gesetzt ist:

  • das Widget wird nicht sofort neu geladen
  • selectValue wird lokal angepasst
  • der sichtbare value wird nach Möglichkeit auf das Label der gewählten Option gesetzt
  • wenn content.value bereits auf den rohen Select-Wert zeigt, ersetzt die App ihn zur Anzeige automatisch durch das passende Label

Bestätigung mit prompt

"select": {
  "valuePath": "scene",
  "optionsPath": "available_scenes",
  "optionValuePath": "id",
  "optionLabelPath": "label",
  "action": {
    "request": {
      "url": "http://192.168.1.20/api/lights/living-room/scene",
      "method": "post",
      "jsonBody": {
        "scene": ""
      }
    },
    "valueBindings": [
      {
        "target": "json_body",
        "path": "scene"
      }
    ],
    "prompt": true
  }
}

Empfehlung

Der sichtbare Value sollte idealerweise direkt aus dem Backend als sprechendes Feld kommen, zum Beispiel:

"value": {
  "mode": "path",
  "value": "scene_label"
}

Das macht das Widget auch dann lesbar, wenn Dialog und Optionsarray gerade nicht sichtbar sind.

Siehe auch