Hi, I would like open the GroupItem in an table entry on main ui widget.
I have a example atteched, but it doesnt display the content of the groupItem.
Additional the fix item name in a table cell doesnt work - example: rm_bat: =items.testitem.state
What is wrong on the example?
Thank you.
Screenshots of the widget code are too difficult to read. It will be much easier to see what’s going on if you paste the widget code directly into code fences:
```
Widget code goes here
```
I copied the code with my Smartphone, tomorrow I make it better with the PC, sorry.
uid: overview_table
tags:
props:
parameters:
parameterGroups:
timestamp: Dec 2, 2023, 3:03:54 PM
component: div
config:
class:
- card
- data-table
- data-table-collapsible
- data-table-init
slots:
default:
- component: table
config: {}
slots:
default:
- component: oh-repeater
config: {}
- component: thead
slots:
default:
- component: tr
slots:
default:
- component: th
config:
class:
- label-cell
content: Zimmer
- component: th
config:
class:
- label-cell
content: RM_Bat
- component: th
config:
class:
- label-cell
content: RM_Def
- component: th
config:
class:
- label-cell
content: RM_Alarm
- component: tbody
slots:
default:
- component: oh-repeater
config:
for: room
fragment: true
in:
- rm_bat: ok
rm_def:
config:
lable: =items.Sensor_CPUTemp.state
rm_alarm: ok
name: Zimmer1
config:
action: group
actionGroupPopupItem: gZ100
expandable: false
item: gZ100
stateAsHeader: true
title: Zimmer 100
- rm_bat: ok
rm_def: =@‘ElectricityMeter_Power’
rm_alarm: ok
name: Zimmer2
- name: Zimmer3
- name: Zimmer4
slots:
default:
- component: tr
slots:
default:
- component: td
config:
class:
- label-cell
content: =loop.room.name
data-collapsible-title: Zimmer
- component: td
config:
class:
- numeric-cell
content: =loop.room.rm_bat
data-collapsible-title: RM_Battery
- component: td
config:
class:
- numeric-cell
data-collapsible-title: RM_Def
slots:
default:
- component: span
config:
visible: =loop.room.rm_def < 10
content: =loop.room.rm_def
- component: f7-chip
config:
visible: =loop.room.rm_def >= 10
color: red
text: =loop.room.rm_def
icon-f7: exclamationmark_triangle_fill
style:
font-size: var(–f7-table-body-font-size)
- component: td
config:
class:
- numeric-cell
content: =loop.room.rm_alarm
data-collapsible-title: RM_Alarm
Let me see if I understand what you are trying to do. You want the config configuration in the loop array
config:
action: group
actionGroupPopupItem: gZ100
expandable: false
item: gZ100
stateAsHeader: true
title: Zimmer 100
to apply to the configuration of the one of the components in the table. Is that correct?
If that is correct then you cannot do this directly. The each of the key within in the config object are evaluated as expressions, but the config object itself is not, so you cannot assign some other object variable to a components config.
Your only hope would be to list each of the config keys and match them up one-to-one with the keys from the loop array like this:
config:
action: =loop.config && loop.config.action
actionGroupPopupItem: =loop.config && loop.config.actionGroupPopupItem
...
Thank you Justin for your response.
Yes, this was my aim, but where is the groupitem declaration gZ100 in your code?
I think it will not work, because I cant declarate the items in the config part for the cell entrys:
- rm_bat: =items.RM_bat_Z100.state
My intention:
One tablecolum for one romm with the important properties (e.g. smoke detector battery, window status..). And to get fast an overview of the room when there is a problem at the properties in the table, I would like to click on the roomname to see the items of the room (groupitem).
Is it possible to make a table with static item entrys (without loop) and link to the location page instead the groupitem?
You defined this in your loop array so that the first element that the repeater returns in the loop variable is an object that has a config key which in turn is its own object with several other keys. Because you don’t have the config object in every element of the array you must test if it exists before you try to access any of its own keys or you will get an error. So the expression:
=loop.config && loop.config.action
first evaluates whether the config object exists. If it does not then the AND statement is already false and the evaluation stops. Any yaml key that has a value of false will just be ignored. If loop.config does exist, then the AND statement moves to evaluate the second part of the expression. If loop.config.action does not exist then again the AND statement returns false, but if it does exist then the AND statement returns not just true but the actual value of loop.config.action. This is a very common shortcut many programming/scripting languages.
Right now it is not possible to navigate to the location page or call the location cards outside of the location page.
This is very doable, and the approach you’ve started is one possible solution (again, to actually be able to troubleshoot what you’ve got you will need to post the code in code fences so that it is readable).
I don’t know how you whole system is configured, but if it were me, I would probably use a different approach with a structure as follows:
- Consistent naming structure so that the name each relevant item can be predictably derived from the location group. For example: If location name is
location_roomthen window item islocation_room_window - Metadata on the group item containing any required additional information (may not be required depending on your needs)
- Put the locations you want in the table into their own group item
- Use
on-repeaterto loop through that group of locations item
Then each row in the repeater has access to the location item data such as it’s label and name. You can construct the names of any other item that you want from the name of the location item to get it’s state. For example: items[loop.location.name + '_window'].state
This is my current status:
uid: overview_table
tags: []
props:
parameters: []
parameterGroups: []
timestamp: Dec 2, 2023, 3:03:54 PM
component: div
config:
class:
- card
- data-table
- data-table-collapsible
- data-table-init
slots:
default:
- component: table
config: {}
slots:
default:
- component: oh-repeater
config: {}
- component: thead
slots:
default:
- component: tr
slots:
default:
- component: th
config:
class:
- label-cell
content: Zimmer
- component: th
config:
class:
- label-cell
content: RM_Bat
- component: th
config:
class:
- label-cell
content: RM_Def
- component: th
config:
class:
- label-cell
content: RM_Alarm
- component: tbody
slots:
default:
- component: oh-repeater
config:
for: room
fragment: true
in:
- rm_bat: =items.Z1_RM_Bat.state
rm_def: =items.Z1_RM_Def.state
rm_alarm: =items.Z1_RM_Alarm.state
name: Zimmer1
config:
action: group
actionGroupPopupItem: gZ1
expandable: false
item: gZ1
stateAsHeader: true
- rm_bat: =items.Z2_RM_Bat.state
rm_def: =items.Z2_RM_Def.state
rm_alarm: =items.Z2_RM_Alarm.state
name: Zimmer2
config:
action: group
actionGroupPopupItem: gZ2
expandable: false
item: gZ2
stateAsHeader: true
- rm_bat: =items.Z3_RM_Bat.state
rm_def: =items.Z3_RM_Def.state
rm_alarm: =items.Z3_RM_Alarm.state
name: Zimmer3
config:
action: group
actionGroupPopupItem: gZ3
expandable: false
item: gZ3
stateAsHeader: true
slots:
default:
- component: tr
slots:
default:
- component: td
config:
class:
- label-cell
content: =loop.room.name
data-collapsible-title: Zimmer
- component: td
config:
class:
- label-cell
content: =loop.room.rm_bat
data-collapsible-title: RM_Bat
- component: td
config:
class:
- label-cell
content: =loop.room.rm_def
data-collapsible-title: RM_Def
- component: td
config:
class:
- label-cell
content: =loop.room.rm_alarm
data-collapsible-title: RM_Alarm
Great, we can work with this.
I don’t know if you’re planning on adding something here, but right now this repeater is, obviously, not doing anything. It’s not causing any problems, I just wanted to point out that you can remove it if you want to.
There’s a lot we can streamline here. Each one of your array elements looks like this, and, in fact, the only thing that actually changes is the name and the basic room ID in the other information (e.g., Z1). I would recommend reducing the repeater array to just these two pieces and do the rest of the calculations that you need directly in the components further down. (You could easily make the repeater even simpler if you wanted to, but that might make the downstream calculations a little more opaque. So, lets say your repeater just looks like this instead:
- component: oh-repeater
config:
for: room
fragment: true
in:
- rm_id: Z1
name: Zimmer1
- rm_id: Z2
name: Zimmer2
- rm_id: Z3
name: Zimmer3
Here’s how that changes each of the table cells:
- component: td
config:
class:
- label-cell
content: =loop.room.name
data-collapsible-title: Zimmer
This one doesn’t change at all, for now. loop.room.name still exists and contains the string for the room’s name. We’ll come back to this later.
- component: td
config:
class:
- label-cell
content: =loop.room.rm_bat
data-collapsible-title: RM_Bat
This one we do have to change because before you were calculating a state in the repeater definition. So now we move that calculation to the cell’s content, but we have to change it just a little to build the item name from the room ID that we included in the repeater array:
content: =items[loop.room.rm_id + '_RM_Bat'].state
We can apply the exact same logic to the other cells.
content: =items[loop.room.rm_id + '_RM_Def'].state
and
content: =items[loop.room.rm_id + '_RM_Alarm'].state
That deals with everything but the ability to open the group viewer. You wanted that to happen when you clicked on the room name so we have to go back to the first cell and actually change that as well. You don’t want just text content in the cell, you want another component. In this case the component that you want is an oh-link which can have text and also gives you access to the OH actions, but you could just as easily use an oh-button if you prefer the look of those. For the link we just need to fill in the text property and the properties for the action which you tried to define before, but had never actually placed in the config of a component.
- component: td
config:
class:
- label-cell
data-collapsible-title: Zimmer
slots:
default:
- component: oh-link
config:
text: =loop.room.name
action: group
actionGroupPopupItem: ='g' + loop.room.rm_id
Wow, thank you very much.
The Link to the room items is working now. Finally I have to check the items in the table.
This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.