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
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"
