If..Else..with widget properties

Setup, Configuration and Use Widgets
1

Hello,

I created a widget

uid: Cell_Card_Activity
tags: []
props:
  parameters:
    - description: Small title on top of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - description: Header big sized
      label: Header
      name: header
      required: false
      type: TEXT
    - description: Icon on top of the card (only f7 icons (without f7:))
      label: Icon
      name: icon
      required: false
      type: TEXT
    - description: rgba or HEX
      label: Background Color
      name: bgcolor
      required: false
      type: TEXT
    - context: item
      description: Item to control
      label: ControlItem
      name: controlitem
      required: false
      type: TEXT
    - context: item
      description: Item to check
      label: CheckItem
      name: checkitem
      required: false
      type: TEXT
    - description: Value to check
      label: CheckValue
      name: checkvalue
      required: false
      type: TEXT
    - label: Command to send
      name: command
      required: false
      type: TEXT
  parameterGroups: []
timestamp: May 1, 2024, 10:40:51 AM
component: f7-card
config:
  style:
    background: =({props.checkvalue:'linear-gradient(black, black),
      url(/static/images/lg-oled55b39la.png)'})[@@props.checkitem]||
      'url(/static/images/lg-oled55b39la.png)'
    background-blend-mode: saturation
    background-position: center
    background-size: 58%
    background-repeat: no-repeat
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    class:
      - padding: 0px
    height: 120px
    margin-left: 5px
    margin-right: 5px
    noShadow: false
slots:
  content:
    - component: f7-block
      config:
        style:
          display: flex
          flex-direction: row
          left: 16px
          position: absolute
          top: -5px
      slots:
        default:
          - component: f7-icon
            config:
              f7: =props.icon
              size: 18
              style:
                margin-right: 10px
              visible: "=props.icon ? true : false"
          - component: Label
            config:
              style:
                font-size: 12px
                margin-top: 0px
              text: "=props.title ? props.title : ''"
    - component: f7-block
      config:
        style:
          bottom: -15px
          flex-direction: row
          left: 16px
          position: absolute
      slots:
        default:
          - component: Label
            config:
              style:
                font-size: 17px
                font-weight: 600
                margin-left: 0px
                margin-top: 0px
              text: "=props.header ? props.header : 'Set Props'"
    - component: oh-link
      config:
        action: command
        actionCommand: =props.command
        actionFeedback: Done!
        actionItem: =props.item
        style:
          actionPosition: center
          height: 100px
          left: 0
          position: absolute
          top: 0
          width: 100%

Now I want to make it easy configurable by using conditional terms in the widget but it doesn’t work as expected.
Can/how can I use widget properties in the conditional clause?

background: =({props.checkvalue:'linear-gradient(black, black),
      url(/static/images/lg-oled55b39la.png)'})[@@props.checkitem]||
      'url(/static/images/lg-oled55b39la.png)'
2

Gradually build the expression up using the Developer Sidebar (alt-shift-d). You cannot reference properties there but use “real” values to build the expression and test that it works and then you can copy that working expression over and replace the “real” values with the proerties.