item-Name als Variable im Widget

[TorstenE]

Hallo Mitstreiter,

nachfolgendes Widget, das ja jeder eigentlich kennt:

Code: Alles auswählen

component: oh-cell
config:
  color: yellow
  action: toggle
  actionItem: Lampe03_Licht
  actionCommand: ON
  actionCommandAlt: OFF
  item: Lampe03_Licht
  title: Bardecke
  stateAsHeader: true
  icon: '=(items.Lampe03_Licht.state == "ON") ? "f7:lightbulb_fill" : "f7:lightbulb_slash"'
  footer: Licht
slots: null

Die Frage, lässt sich die Item-Bezeichnung in Zeile 11 (icon: ...)
durch eine Variable bzw. den Wert, welcher hinter "item" steht ersetzen?

Code: Alles auswählen

icon: '=(itmes.var(item).state == ......

Danke

Torsten

[scotty]

Hallo Torsten,

Die Variable wird so festgelegt:

Code: Alles auswählen

    - description: oh-icon wählen oder leer wenn disabled (<u>Vorschlag:</u> <b>material:arrow_upward</b>)
      label: oh icon name
      name: icon7
      required: false
      type: TEXT

...und später dann so angezeigt (Zeile 5):

Code: Alles auswählen

    - component: oh-label-item
      config:
        item: =props.item7
        title: =props.prop7
        icon: =props.icon7
        iconColor: green
        iconUseState: true

stelle gerade fest, dass dein Beispiel wechselnde Anzeigen haben soll. Das geht auch, muss jetzt aber erst einmal was erledigen. Melde mich ggf. heute Abend noch einmal.

[scotty]

Hallo Torsten,

hast du dein Problem inzwischen gelöst? Falls nein, solltest du vielleicht noch einmal genauer beschreiben, was mit der Zeile 11 erreicht werden soll.

Hier mal ein Beispiel, wie ich es gelöst habe:

Code: Alles auswählen

uid: Abendbeleuchtung_1
tags: []
props:
  parameters:
    - description: A text prop
      label: Prop 1
      name: prop1
      required: false
      type: TEXT
    - context: item
      description: An item to control
      label: Item
      name: item
      required: false
      type: TEXT
    - description: Abstand von Links in Pixel (Muss nachgestelltes "px" enthalten)
      label: Abstand von Links
      name: AbLinks
      required: true
      type: TEXT
    - description: Abstand von Rechts in Pixel (Muss nachgestelltes "px" enthalten)
      label: Abstand von Rechts
      name: AbRechts
      required: true
      type: TEXT
    - description: Abstand von Oben in Pixel (Muss nachgestelltes "px" enthalten)
      label: Abstand von Oben
      name: AbOben
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Jun 22, 2022, 5:10:14 AM
component: f7-card
config:
  bgColor: gray
  outline: true
  style:
    background-color: '=(items[props.item].state === "ON") ? "rgb(255,255,255)" : "rgba(228,228,228,0.9)"'
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: '=(items[props.item].state === "ON") ? "10px 10px 28px 1px rgba(255,234,5,0.3)" : "var(--f7-card-expandable-box-shadow)"'
    class:
      - padding
    height: 12.0em
    left: =propsAbLinks
    max-width: 16.0em
    min-width: 8.5em
    noShadow: false
    right: =props.AbRechts
    top: =props.AbOben
  textColor: black
slots:
  content:
    - component: f7-block
      config:
        style:
          align-items: start
          display: flex
          flex-direction: column
          margin: 0px
          padding: 0px
      slots:
        default:
          - component: f7-icon
            config:
              f7: '=(items[props.item].state === "ON") ? "lightbulb_fill" : "lightbulb"'
              margin: 0px
              padding: 0px
              size: 42
              style:
                color: '=(items[props.item].state === "ON") ? "rgba(255,234,5,1)" : "black"'
          - component: Label
            config:
              style:
                color: '=(items[props.item].state === "ON") ? "black" : "rgb(0, 0, 0)"'
                font-size: 15px
                font-weight: 500
                margin-left: 0px
                margin-top: 20px
                padding: 0px
              text: =props.prop1
          - component: Label
            config:
              style:
                color: '=(items[props.item].state === "ON") ? "red" : "rgb(0, 0, 0)"'
                font-size: 15px
                font-weight: 500
                margin-left: 10px
                margin-top: 20px
                padding: 0px
              text: '=(items[props.item].state === "ON") ? "AN" : "AUS"'
    - component: oh-link
      config:
        action: toggle
        actionCommand: ON
        actionCommandAlt: OFF
        actionItem: =props.item
        style:
          actionPosition: center
          height: 100%
          left: 0
          position: absolute
          top: 0
          width: 100%

[TorstenE]

Hey Scotty,

ja ich konnte die "Aufgabe" (besser wie "Problem" ) lösen.
Ich hatte zuerst das Standard-Widget im YAML-Moduls bearbeitet. Dort gab es kein "probs" und "parameters".
Also habe ich ein neues Widget selbst erstellt und dann war mir klar wie es funktioniert.

Wer noch nie ein Widget selbst erstellt hat, hier wird es kurz erklärt:
https://www.youtube.com/watch?v=eD_RQUCqLl0
Hinweis: Die Abschnitte in den Parameters werden durch einen "- " (Bindestrich, Leerstelle) eingeleitet, das fällt im Video nicht so auf.

Nochmals Danke

Torsten

[scotty]

Ja dann, Glückwunsch zur Erfüllung der "Aufgabe" Gefällt dir denn das Schalter-Widget, oder hast du was Besseres? Dann lass uns teilhaben.

[TorstenE]

nein leider habe ich nix Besseres. Aber wenn, dann lass ich Euch gerne daran teilhaben.

Malzeit

Torsten