This is not about clicking and something is happening in the real word 
It is just about getting status information (e.g. signal strength, battery level, temperature, etc) of an equipment element presented in a space saving table view.
Just wanted to share in case someone needs a template to adapt from.
Just provide the type of equipment according to semantics e.g. SmokeDetector and name of points in a comma-seperated way.
Furthermore it puts the location at the beginning of each row (which was painful to find out)
The widget asumes that the item name follows the standard syntax: thingName_channel
You can also specify individual column headers and an overall header
Code
uid: StateGrid
tags: []
props:
parameters:
- description: Name of equipment tag, i.e. SmokeDetector. All equipments with this tag will be included in the query
label: Tag name
name: varTag
required: false
type: TEXT
- description: Suffix(es) of items (comma-separated) to be queried within all equipments with the above tag. Syntax:itemSuffix=columnHeader, e.g. BatteryLevel=Battery,SignalStrength=Signal,ErrorCode=Error
label: Item Suffixes und Label
name: varItem
required: false
type: TEXT
- label: Header
name: varHeader
required: false
type: TEXT
parameterGroups: []
timestamp: Feb 10, 2021, 9:36:19 PM
component: f7-card
config:
style:
color: var(--my-font-color)
fontSize: 1.0em
font-weight: bold
--f7-card-bg-color: "#111111"
--f7-card-margin-vertical: 0px
--f7-card-margin-horizontal: 0px
--f7-card-content-padding-horizontal: 0px
--f7-card-content-padding-vertical: 0px
--f7-card-border-radius: 0px
slots:
default:
- component: f7-card-content
config:
style:
align-items: center
text-align: center
slots:
default:
- component: f7-row
config:
style:
height: 35px
padding-left: 10px
fontSize: 150%
text-align: left
slots:
default:
- component: f7-col
slots:
default:
- component: Label
config:
text: '=(props.varHeader == NULL) ? "" : props.varHeader'
- component: f7-row
config:
noGap: true
style:
height: 35px
slots:
default:
- component: f7-col
- component: oh-repeater
config:
for: rHeader
sourceType: array
in: =props.varItem.split(",")
fragment: true
slots:
default:
- component: f7-col
slots:
default:
- component: Label
config:
text: =loop.rHeader.split("=")[1]
- component: oh-repeater
config:
for: rThing
sourceType: itemsWithTags
itemTags: '=(props.varTag == NULL) ? "" : props.varTag'
fetchMetadata: semantics
fragment: true
slots:
default:
- component: f7-row
config:
style:
height: 35px
--f7-grid-row-gap: 1px
--f7-grid-gap: 1px
slots:
default:
- component: f7-col
slots:
default:
- component: Label
config:
text: =loop.rThing.metadata.semantics.config.hasLocation
style:
padding-left: 10px
text-align: left
- component: oh-repeater
config:
for: rItem
sourceType: array
in: =props.varItem.split(",")
fragment: true
slots:
default:
- component: f7-col
config:
style:
background: "#222222"
font-weight: normal
slots:
default:
- component: Label
config:
text: =items[loop.rThing.name + "_" + loop.rItem.split("=")[0]].state
style:
height: 35px
class:
- justify-content-center
- display-flex
- flex-direction-column