Simple Selection Widget up to 11 buttons (or more)

image

I have always liked the simplicity of the selection tool used in sitemaps, and wanted a similar Main UI widget for use in lists. Using the visible property, the buttons are only visible if you populate the value to be displayed. Like sitemap mapping, just add commands and display values. I chose 11 buttons as I often set dimmers this way (see below), but more can be added, and of course you can use less than 11. There is likely a better way to do this, still looking…

Screenshots

image

image

image

image

image

Changelog

Version 0.3

  • added dynamic icon

Version 0.2

  • added options for color, active color, and active text color

Version 0.1

  • initial release

Resources

uid: Selection New
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: icon
      required: false
      type: TEXT
    - description: Color of selection widget (blank=default)
      label: Color
      name: color
      required: false
      type: TEXT
    - description: Color of selection widget fill when button is selected (blank=default)
      label: Active Color
      name: activecolor
      required: false
      type: TEXT
    - description: Color of text when button is selected (blank=default/white)
      label: Active Text Color
      name: activetextcolor
      required: false
      type: TEXT
    - description: The Button 1 command
      label: Button 1 Command
      name: commandbutton1
      required: false
      type: TEXT
    - description: The Button 1 value
      label: Button 1 Value
      name: valuebutton1
      required: false
      type: TEXT
    - description: The Button 2 command
      label: Button 2 Command
      name: commandbutton2
      required: false
      type: TEXT
    - description: The Button 2 value
      label: Button 2 Value
      name: valuebutton2
      required: false
      type: TEXT
    - description: The Button 3 command
      label: Button 3 Command
      name: commandbutton3
      required: false
      type: TEXT
    - description: The Button 3 value
      label: Button 3 Value
      name: valuebutton3
      required: false
      type: TEXT
    - description: The Button 4 command
      label: Button 4 Command
      name: commandbutton4
      required: false
      type: TEXT
    - description: The Button 4 value
      label: Button 4 Value
      name: valuebutton4
      required: false
      type: TEXT
    - description: The Button 5 command
      label: Button 5 Command
      name: commandbutton5
      required: false
      type: TEXT
    - description: The Button 5 value
      label: Button 5 Value
      name: valuebutton5
      required: false
      type: TEXT
    - description: The Button 6 command
      label: Button 6 Command
      name: commandbutton6
      required: false
      type: TEXT
    - description: The Button 6 value
      label: Button 6 Value
      name: valuebutton6
      required: false
      type: TEXT
    - description: The Button 7 command
      label: Button 7 Command
      name: commandbutton7
      required: false
      type: TEXT
    - description: The Button 7 value
      label: Button 7 Value
      name: valuebutton7
      required: false
      type: TEXT
    - description: The Button 8 command
      label: Button 8 Command
      name: commandbutton8
      required: false
      type: TEXT
    - description: The Button 8 value
      label: Button 8 Value
      name: valuebutton8
      required: false
      type: TEXT
    - description: The Button 9 command
      label: Button 9 Command
      name: commandbutton9
      required: false
      type: TEXT
    - description: The Button 9 value
      label: Button 9 Value
      name: valuebutton9
      required: false
      type: TEXT
    - description: The Button 10 command
      label: Button 10 Command
      name: commandbutton10
      required: false
      type: TEXT
    - description: The Button 10 value
      label: Button 10 Value
      name: valuebutton10
      required: false
      type: TEXT
    - description: The Button 11 command
      label: Button 11 Command
      name: commandbutton11
      required: false
      type: TEXT
    - description: The Button 11 value
      label: Button 11 Value
      name: valuebutton11
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jan 13, 2023, 8:57:14 AM
component: oh-list-item
config:
  icon: =props.icon
  title: =props.thetitle
  iconUseState: true
  item: =props.item
slots:
  after:
    - component: f7-segmented
      config:
        color: =props.color
        style:
          display: inline-flex
          flex-direction: row
          justify-content: flex-end
      slots:
        default:
          - component: oh-button
            config:
              action: command
              actionCommand: =props.commandbutton1
              actionItem: =props.item
              active: "=(items[props.item].state === props.commandbutton1) ? true : false"
              color: "=(items[props.item].state === props.commandbutton1) ? props.activecolor : ''"
              outline: true
              style:
                height: auto
                width: auto
              text: =props.valuebutton1
              text-color: "=(items[props.item].state === props.commandbutton1) ? props.activetextcolor : ''"
              visible: "=props.valuebutton1 ? true : false"
          - component: oh-button
            config:
              action: command
              actionCommand: =props.commandbutton2
              actionItem: =props.item
              active: "=(items[props.item].state === props.commandbutton2) ? true : false"
              color: "=(items[props.item].state === props.commandbutton2) ? props.activecolor : ''"
              outline: true
              style:
                height: auto
                width: auto
              text: =props.valuebutton2
              text-color: "=(items[props.item].state === props.commandbutton2) ? props.activetextcolor : ''"
              visible: "=props.valuebutton2 ? true : false"
          - component: oh-button
            config:
              action: command
              actionCommand: =props.commandbutton3
              actionItem: =props.item
              active: "=(items[props.item].state === props.commandbutton3) ? true : false"
              color: "=(items[props.item].state === props.commandbutton3) ? props.activecolor : ''"
              outline: true
              style:
                height: auto
                width: auto
              text: =props.valuebutton3
              text-color: "=(items[props.item].state === props.commandbutton3) ? props.activetextcolor : ''"
              visible: "=props.valuebutton3 ? true : false"
          - component: oh-button
            config:
              action: command
              actionCommand: =props.commandbutton4
              actionItem: =props.item
              active: "=(items[props.item].state === props.commandbutton4) ? true : false"
              color: "=(items[props.item].state === props.commandbutton4) ? props.activecolor : ''"
              outline: true
              style:
                height: auto
                width: auto
              text: =props.valuebutton4
              text-color: "=(items[props.item].state === props.commandbutton4) ? props.activetextcolor : ''"
              visible: "=props.valuebutton4 ? true : false"
          - component: oh-button
            config:
              action: command
              actionCommand: =props.commandbutton5
              actionItem: =props.item
              active: "=(items[props.item].state === props.commandbutton5) ? true : false"
              color: "=(items[props.item].state === props.commandbutton5) ? props.activecolor : ''"
              outline: true
              style:
                height: auto
                width: auto
              text: =props.valuebutton5
              text-color: "=(items[props.item].state === props.commandbutton5) ? props.activetextcolor : ''"
              visible: "=props.commandbutton5 ? true : false"
          - component: oh-button
            config:
              action: command
              actionCommand: =props.commandbutton6
              actionItem: =props.item
              active: "=(items[props.item].state === props.commandbutton6) ? true : false"
              color: "=(items[props.item].state === props.commandbutton6) ? props.activecolor : ''"
              outline: true
              style:
                height: auto
                width: auto
              text: =props.valuebutton6
              text-color: "=(items[props.item].state === props.commandbutton6) ? props.activetextcolor : ''"
              visible: "=props.commandbutton6 ? true : false"
          - component: oh-button
            config:
              action: command
              actionCommand: =props.commandbutton7
              actionItem: =props.item
              active: "=(items[props.item].state === props.commandbutton7) ? true : false"
              color: "=(items[props.item].state === props.commandbutton7) ? props.activecolor : ''"
              outline: true
              style:
                height: auto
                width: auto
              text: =props.valuebutton7
              text-color: "=(items[props.item].state === props.commandbutton7) ? props.activetextcolor : ''"
              visible: "=props.commandbutton7 ? true : false"
          - component: oh-button
            config:
              action: command
              actionCommand: =props.commandbutton8
              actionItem: =props.item
              active: "=(items[props.item].state === props.commandbutton8) ? true : false"
              color: "=(items[props.item].state === props.commandbutton8) ? props.activecolor : ''"
              outline: true
              style:
                height: auto
                width: auto
              text: =props.valuebutton8
              text-color: "=(items[props.item].state === props.commandbutton8) ? props.activetextcolor : ''"
              visible: "=props.commandbutton8 ? true : false"
          - component: oh-button
            config:
              action: command
              actionCommand: =props.commandbutton9
              actionItem: =props.item
              active: "=(items[props.item].state === props.commandbutton9) ? true : false"
              color: "=(items[props.item].state === props.commandbutton9) ? props.activecolor : ''"
              outline: true
              style:
                height: auto
                width: auto
              text: =props.valuebutton9
              text-color: "=(items[props.item].state === props.commandbutton9) ? props.activetextcolor : ''"
              visible: "=props.commandbutton9 ? true : false"
          - component: oh-button
            config:
              action: command
              actionCommand: =props.commandbutton10
              actionItem: =props.item
              active: "=(items[props.item].state === props.commandbutton10) ? true : false"
              color: "=(items[props.item].state === props.commandbutton10) ? props.activecolor : ''"
              outline: true
              style:
                height: auto
                width: auto
              text: =props.valuebutton10
              text-color: "=(items[props.item].state === props.commandbutton10) ? props.activetextcolor : ''"
              visible: "=props.commandbutton10 ? true : false"
          - component: oh-button
            config:
              action: command
              actionCommand: =props.commandbutton11
              actionItem: =props.item
              active: "=(items[props.item].state === props.commandbutton11) ? true : false"
              color: "=(items[props.item].state === props.commandbutton11) ? props.activecolor : ''"
              outline: true
              style:
                height: auto
                width: auto
              text: =props.valuebutton11
              text-color: "=(items[props.item].state === props.commandbutton11) ? props.activetextcolor : ''"
              visible: "=props.commandbutton11 ? true : false"
4 Likes

Cool! :slight_smile:

Small improvement:

config:
icon: =props.icon
title: =props.thetitle
iconUseState: true
item: =props.item

Then we have dynamic icon.

Thanks for that. Added.