I have a button in my UI that pops up an entity card so I can toggle multiple related entities. I’m also using the custom:decluttering-card to make the card and browser-mod to make the entity card popup.
Here’s the coding I’m using:
# card to show various (on/off) modes
mode-thing:
card:
type: custom:button-card
entity: '[[thing_entity]]'
name: '[[thing_name]]'
triggers_update: all
aspect_ratio: '[[aspect_ratio]]'
hold_action:
action: fire-dom-event
browser_mod:
command: call-service
service: browser_mod.popup
service_data:
deviceID: this
title: Modes
hide_header: false
card:
type: entities
entities:
- entity: '[[thing_entity]]'
- entity: '[[m1_entity]]'
- entity: '[[m2_entity]]'
styles:
card:
- background-color: '[[card_background_color]]'
- border-radius: 0%
- padding: 1%
- color: ivory
- font-size: 12px
- text-transform: capitalize
grid:
- grid-template-areas: '"n n n n n" "i i m1 m1 m1" "i i m2 m2 m2" "stat stat m3 m3 m3"'
- grid-template-columns: 1fr 1fr 1fr 1fr 1fr
- grid-template-rows: 1fr 1fr 1fr 1fr
name:
- font-weight: bold
- font-size: 13px
- color: white
- align-self: middle
- justify-self: start
- padding-bottom: 0px
img_cell:
- justify-content: start
- align-items: start
- margin: 0%
icon:
- color: '[[thing_icon_color]]'
- width: 80%
- margin-top: 0%
custom_fields:
stat:
- font-size: 12px
- align-self: middle
- justify-self: start
m1:
- align-self: middle
- justify-self: start
m2:
- align-self: middle
- justify-self: start
m3:
- align-self: middle
- justify-self: start
state:
- value: 'on'
id: value_on
icon: '[[thing_icon_on]]'
- value: 'off'
id: value_off
icon: '[[thing_icon_off]]'
custom_fields:
stat: |
[[[
var status = '[[thing_name_off]]';
if (entity.state == "on") status = '[[thing_name_on]]';
return `<span>${status}</span>`
]]]
m1: |
[[[
if ('[[m1_show]]' == 'true') {
var icon = '[[m1_icon_off]]';
var status = '[[m1_status_off]]';
if (states['[[m1_entity]]'].state == '[[m1_on_state]]') {
icon = '[[m1_icon_on]]';
status = '[[m1_status_on]]';
}
return `<ha-icon icon=${icon}
style="width: 14px; height: 14px; color: yellow;">
</ha-icon><span> ${status}</span>`
}
return ``
]]]
m2: |
[[[
if ('[[m2_show]]' == 'true') {
var icon = '[[m2_icon_off]]';
var status = '[[m2_status_off]]';
if (states['[[m2_entity]]'].state == '[[m2_on_state]]') {
icon = '[[m2_icon_on]]';
status = '[[m2_status_on]]';
}
return `<ha-icon icon=${icon}
style="width: 14px; height: 14px; color: yellow;">
</ha-icon><span> ${status}</span>`
}
return ``
]]]
m3: |
[[[
if ('[[m3_show]]' == 'true') {
var icon = '[[m3_icon_off]]';
var status = '[[m3_status_off]]';
if (states['[[m3_entity]]'].state == '[[m3_on_state]]') {
icon = '[[m3_icon_on]]';
status = '[[m3_status_on]]';
}
return `<ha-icon icon=${icon}
style="width: 14px; height: 14px; color: yellow;">
</ha-icon><span> ${status}</span>`
}
return ``
]]]
My question is about this part right here:
card:
type: entities
entities:
- entity: '[[thing_entity]]'
- entity: '[[m1_entity]]'
- entity: '[[m2_entity]]'
Is there some way to “pass in” the list of entities that make up the entity card? That way I could have different instances of this card with a different number of entities on the entity card. Alternatively, is there some sort of “blank entity” that would just show up as a blank line on the entity card?