Four Button List Item

Add-on Marketplace UI Widgets
,
1

With the great help from a number of members to get the formatting of this correct (thanks @AndyMB, @DrRSatzteil, I have a four button list item widget to share. This can be used as the default list item widget for your items, or inside other widgets. Note when you are adding this to other widgets, the properties can only be changed in Code view. If used as a default list item widget, you get a nice UI for the properties.

Hope someone finds it useful.

image
image992×117 9.07 KB

Code

uid: HighMedLow
tags: []
props:
  parameters:
    - description: The name to show
      label: Title
      name: thetitle
      required: false
      type: TEXT
    - context: item
      description: An item to control
      label: Item
      name: item
      required: false
      type: TEXT
    - description: Icon name only OH supported
      label: Icon
      name: theicon
      required: false
      type: TEXT
    - description: The Low command value
      label: Low Command
      name: commandlow
      required: false
      type: TEXT
    - description: Low icon f7 only - no f7 prefix
      label: Low Icon
      name: lowicon
      required: false
    - description: The Med command value
      label: Med Command
      name: commandmed
      required: false
      type: TEXT
    - description: Med icon f7 only - no f7 prefix
      label: Med Icon
      name: medicon
      required: false
    - description: The High command value
      label: High Command
      name: commandhigh
      required: false
      type: TEXT
    - description: High icon f7 only - no f7 prefix
      label: Hight Icon
      name: highicon
      required: false
    - description: The off command value
      label: Off Command
      name: commandoff
      required: false
      type: TEXT
    - description: Off icon f7 only - no f7 prefix
      label: Off Icon
      name: officon
      required: false
  parameterGroups: []
timestamp: Feb 12, 2021, 6:06:13 AM
component: oh-list-item
config:
  icon: =props.theicon
  title: =props.thetitle
slots:
  after:
    - component: f7-block
      config:
        style:
          display: inline-flex
          flex-direction: row
          justify-content: flex-end
          padding: 0px
          padding-left: 5px
      slots:
        default:
          - component: oh-button
            config:
              actionItem: =props.item
              action: command
              actionCommand: =props.commandoff
              icon-f7: =props.officon
              iconColor: black
              text: OFF
              size: 25
              style:
                --f7-button-bg-color: transparent
                --f7-button-hover-bg-color: transparent
                --f7-button-text-color: black
                --f7-button-border-radius: 5px
                --f7-button-pressed-bg-color: red
                --f7-button-fill-hover-bg-color: green
                font-size: 12px
                height: auto
          - component: oh-button
            config:
              actionItem: =props.item
              action: command
              actionCommand: =props.commandlow
              icon-f7: =props.lowicon
              iconColor: yellow
              text: LOW
              size: 25
              style:
                --f7-button-bg-color: transparent
                --f7-button-hover-bg-color: transparent
                --f7-button-text-color: black
                --f7-button-border-radius: 5px
                --f7-button-pressed-bg-color: red
                --f7-button-fill-hover-bg-color: green
                font-size: 12px
                height: auto
          - component: oh-button
            config:
              actionItem: =props.item
              action: command
              actionCommand: =props.commandmed
              icon-f7: =props.medicon
              iconColor: green
              text: MEDIUM
              size: 25
              style:
                --f7-button-bg-color: transparent
                --f7-button-hover-bg-color: transparent
                --f7-button-text-color: black
                --f7-button-border-color: black
                --f7-button-border-radius: 5px
                --f7-button-pressed-bg-color: lightgrey
                --f7-button-fill-hover-bg-color: green
                font-size: 12px
                height: auto
          - component: oh-button
            config:
              actionItem: =props.item
              action: command
              actionCommand: =props.commandhigh
              icon-f7: =props.highicon
              iconColor: red
              text: HIGH
              size: 25
              style:
                --f7-button-bg-color: transparent
                --f7-button-hover-bg-color: transparent
                --f7-button-text-color: black
                --f7-button-border-color: black
                --f7-button-border-radius: 5px
                --f7-button-pressed-bg-color: red
                --f7-button-fill-hover-bg-color: green
                font-size: 12px
                height: auto
14 Likes
2

I currently use this widget and it appears in the model as a list widget, of course. Now I would like to add it to the overview page as a cell widget. Simply replacing the line component: oh-list-item to component: oh-cell does not work. Does anybody know if this widget can be easily adapted to an oh-cell?
Thank you for your attention

4

Please, check this example. It is rather similar to what you want. Sorry for its length :wink:

uid: multi_items_cards
tags: []
props:
  parameters:
    - default: 7rem
      description: Button width
      label: Button width
      name: btn_width
      required: false
      type: TEXT
    - default: 8rem
      description: Button height
      label: Button height
      name: btn_height
      required: false
      type: TEXT
    - default: "32"
      description: Icon size
      label: Icon size
      name: icon_size
      required: false
      type: TEXT
    - description: The name to show
      label: Title
      name: thetitle
      required: false
      type: TEXT
    - context: item
      description: The first item to control
      label: Item1
      name: item1
      required: false
      type: TEXT
    - description: Item 1 Label
      label: Item 1 label
      name: label1
      required: false
      type: TEXT
    - context: item
      description: The second item to control
      label: Item2
      name: item2
      required: false
      type: TEXT
    - description: Item 2 Label
      label: Item 2 label
      name: label2
      required: false
      type: TEXT
    - context: item
      description: The third item to control
      label: Item3
      name: item3
      required: false
      type: TEXT
    - description: Item 3 Label
      label: Item 3 label
      name: label3
      required: false
      type: TEXT
    - description: Icon name only OH supported
      label: Icon
      name: theicon
      required: false
      type: TEXT
    - description: Item1 icon f7 only - no f7 prefix
      label: Item1 Icon
      name: item1_icon
      required: false
    - description: Item2 icon f7 only - no f7 prefix
      label: Item2 Icon
      name: item2_icon
      required: false
    - description: Item3 icon f7 only - no f7 prefix
      label: Item3 Icon
      name: item3_icon
      required: false
  parameterGroups: []
timestamp: Apr 26, 2023, 10:45:27 AM
component: f7-card
config:
  title: =props.thetitle
  style:
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: var(--f7-card-expandable-box-shadow)
    #background-image: linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.8)), url(/static/images/bg.jpg)
    background: linear-gradient(347deg, rgba(83,74,236,1) 0%, rgba(170,170,244,1) 0%, rgba(255,255,255,1) 37%)
    background-repeat: no-repeat
    background-size: cover
    background-position: center 
    font-weight: bold
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-block
            slots:
              default:
                - component: f7-row
                  config:
                    style:
                      display: flex
                      flex-wrap: wrap
                      flex-direction: row
                      justify-content: center
                      align-items: flex-start
                      align-content: flex-start
                      padding-bottom: 20px
                      width: 100%
                      height: 100%
                  slots:
                    default:
                      - component: f7-col
                        config:
                          style:
                            width: =props.btn_width
                            height: =props.btn_height
                            display: flex
                            flex-wrap: wrap
                            flex-direction: row
                            justify-content: center
                            padding: 0px 5px 50px
                        slots:
                          default:
                            - component: f7-row
                              config:
                                style:
                                  width: 100%
                                  height: 100%
                              slots:
                                default:
                                  - component: oh-button
                                    config:
                                      actionItem: =props.item1
                                      action: command
                                      actionCommand: TOGGLE
                                      iconF7: =props.item1_icon
                                      iconColor: =items[props.item1].state=="OFF"?"gray":"yellow"
                                      iconSize: =props.icon_size
                                      outline: true
                                      color: =items[props.item1].state=="OFF"?"gray":"yellow"
                                      round: true
                                      style:
                                        display: flex
                                        flex-wrap: nowrap
                                        flex-direction: column
                                        justify-content: center
                                        align-items: center
                                        height: 100%
                                        width: 100%
                                        box-shadow: var(--f7-button-raised-box-shadow)
                                        --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .1)
                                        --f7-button-bg-color: rgba(255,255,255, 1)                                        
                            - component: f7-row
                              config:
                                style:
                                  width: 100%
                                  height: 100%
                                  display: flex
                                  flex-wrap: nowrap
                                  justify-content: center
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      text: =props.label1
                                      style:
                                        font-size: 16px
                      - component: f7-col
                        config:
                          style:
                            width: =props.btn_width
                            height: =props.btn_height
                            display: flex
                            flex-wrap: wrap
                            flex-direction: row
                            justify-content: center
                            padding: 0px 5px 50px
                        slots:
                          default:
                            - component: f7-row
                              config:
                                style:
                                  width: 100%
                                  height: 100%
                              slots:
                                default:
                                  - component: oh-button
                                    config:
                                      actionItem: =props.item2
                                      action: command
                                      actionCommand: TOGGLE
                                      iconF7: =props.item1_icon
                                      iconColor: =items[props.item2].state=="OFF"?"gray":"yellow"
                                      iconSize: =props.icon_size
                                      outline: true
                                      color: =items[props.item2].state=="OFF"?"gray":"yellow"
                                      round: true
                                      style:
                                        display: flex
                                        flex-wrap: nowrap
                                        flex-direction: column
                                        justify-content: center
                                        align-items: center
                                        height: 100%
                                        width: 100%
                                        box-shadow: var(--f7-button-raised-box-shadow)
                                        --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .1)
                                        --f7-button-bg-color: rgba(255,255,255, 1)                                        
                            - component: f7-row
                              config:
                                style:
                                  width: 100%
                                  height: 100%
                                  display: flex
                                  flex-wrap: nowrap
                                  justify-content: center
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      text: =props.label2
                                      style:
                                        font-size: 16px
                      - component: f7-col
                        config:
                          style:
                            width: =props.btn_width
                            height: =props.btn_height
                            display: flex
                            flex-wrap: wrap
                            flex-direction: row
                            justify-content: center
                            padding: 0px 5px 50px
                        slots:
                          default:
                            - component: f7-row
                              config:
                                style:
                                  width: 100%
                                  height: 100%
                              slots:
                                default:
                                  - component: oh-button
                                    config:
                                      actionItem: =props.item3
                                      action: command
                                      actionCommand: TOGGLE
                                      iconF7: =props.item1_icon
                                      iconColor: =items[props.item3].state=="OFF"?"gray":"yellow"
                                      iconSize: =props.icon_size
                                      outline: true
                                      color: =items[props.item3].state=="OFF"?"gray":"yellow"
                                      round: true
                                      style:
                                        display: flex
                                        flex-wrap: nowrap
                                        flex-direction: column
                                        justify-content: center
                                        align-items: center
                                        height: 100%
                                        width: 100%
                                        box-shadow: var(--f7-button-raised-box-shadow)
                                        --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .1)
                                        --f7-button-bg-color: rgba(255,255,255, 1)                                        
                            - component: f7-row
                              config:
                                style:
                                  width: 100%
                                  height: 100%
                                  display: flex
                                  flex-wrap: nowrap
                                  justify-content: center
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      text: =props.label3
                                      style:
                                        font-size: 16px

This is how it looks like
image

1 Like
5

Thank you for posting. This is a card widget and not a cell, but anyway It is very useful as I can try to manually modify the various options to modify it. There are some typos (i.e. the icon is not used and the three f7 icons all correspond to the first one provided, but it can be easily corrected).