were is problem?
Change ; with : between open and closed.
works, thankyou
Need some assistance. I am trying to use the reference state entities (“entity.state”, etc.) in a card. They work great in a standard view, but do not work in a browser_mod popup.
Not sure if there is something else I need to consider with button-card in a popup, it is intended to work that way, or if it is a bug. And if a bug, in what code (button-card, browser-mod, or the frontend).
snippet below. Happy to provide more if necessary of course. I am also using the “entity.state” reference in other places with the same result.
TIA
img_cell:
- background-color: >
[[[ return ((entity.state === 'on') ? "rgba(var(--rgb-primary-color),0.2)" : "rgba(var(--rgb-secondary-text-color),0.2)")
]]]
- border-radius: 50%
- width: 60%
- hight: 40%
I might be wrong, but I was led to believe that all lines in JavaScript starting with return need to end with a semi-colon ;
Does that make a difference here?
CORRECT:
line;
line;
line;
still CORRECT - but does not look good:
line;line;line;
WRONG:
some_expression(xxx;xxxx;xxxx;)
Gave it a shot with the same results. It is definitely the “entity.state” bit that is not rendering properly. But at least now my script looks better.
Again, the config works fine in a standard Lovelace view; just not in a browser_mod popup. So for whatever reason, the local state variables in button-card are not available in a browser_mod popup. I searched the issues in both repositories, but did not see anything like this. Given the prevalence of both, I am surprised that there is nothing there, so am assuming I am doing something wrong. Is anyone using these local variables successfully in a popup?
you need to return the entity in the popup otherwise it will not work. Is your popup in the same config as your card or are you using templates outside the card config? Something like this will work.
type: "custom:button-card"
entity: "define_entity_here"
tap_action:
action: "fire-dom-event"
browser_mod:
service: "browser_mod.popup"
data:
hide_header: true
content:
type: "custom:button-card"
entity: "[[[ return entity.entity_id ]]]"
styles:
img_cell:
- background-color: >
[[[
return entity.state == "on"
? "rgba(var(--rgb-primary-color),0.2)"
: "rgba(var(--rgb-secondary-text-color),0.2)"
]]]
- border-radius: 50%
- width: 60%
- hight: 40%
yeah, good question. I always use them. the thing is, if you do, you are 100% certain the interpreter does what you instruct it to do, which in this case is see the end of that specific instruction/variable/template etc etc Those are called ‘statements’.
and this would be the formal rule:
A semicolon is not necessary after a statement if it is written on its own line. But if more than one statement on a line is desired, then they must be separated by semicolons.
otoh, search Google on
javascript semicolon
and you’ll see a plethora of different opinions.
Interesting. The popup contains several cards with different entities, so not sure how this would work. So in that example, it passes the state object from the calling function? nice.
If for whatever reason the local state object is not getting loaded, I wonder if I could force it to load somehow? will play with that.
Here is a fuller snippet. The popup typically contains several button-cards (and other cards) that follow.
- type: 'custom:button-card'
aspect_ratio: 1/1
show_name: false
show_icon: true
entity: group.all_occupancy
icon: 'mdi:home'
tap_action:
haptic: medium
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Occupancy
content:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: grid
columns: 2
square: false
cards:
- type: 'custom:button-card'
entity: binary_sensor.hk_presence_pa
name: Pa
icon: mdi:home-account
aspect_ratio: 4/1
color: auto
show_name: true
show_icon: true
layout: icon_name
tap_action:
action: none
haptic: medium
show_state: false
styles:
icon:
- width: 70%
name:
- justify-self: start
img_cell:
- background-color: >
[[[ return ((entity.state === 'on') ? "rgba(var(--rgb-primary-color),0.2)" : "rgba(var(--rgb-secondary-text-color),0.2)")
]]]
- border-radius: 50%
- width: 60%
- hight: 40%
card_mod:
class: opaque
- type: 'custom:button-card'
entity: binary_sensor. ........ > additional cards
Everyone facing localization issues - please test this (a very small & possibly insufficient fix):
Before:
After:
But how to test ? We can’t build it, and can not edit the resource with that change?
Do you have a shareable .js file we can download?
My edit was very “brute-force”:
- Open js-file in VSC (/www/community/button-card/button-card.js).
- Find the only occurrence of “component.${r}.state._.${i.state}”.
- Replace
state._
with
entity_component._.state
Again, this is a temporarily fix. I realized that in 2023.4 localization keys were changed; so I searched a code for patterns and found these “xxxx.state._.xxxxx” old keys in button-card, multiple-entity-row, slider-entity-row, config-template-card, history-explorer-card (means - all these cards have or may have issues).
Probably a REAL fix should be more complex)))
Anyway, I decided to create a PR with this small change - to urge a developer(s) to dig this issue in this card with a more attention.
Update: one more thing should be changed to support different device_classes:
replace
component.${domain}.state.${stateObj.attributes.device_class}.${stateObj.state}
with
component.${domain}.entity_component.${stateObj.attributes.device_class}.state.${stateObj.state}
1 Like
Just FYI, I updated to 2023.5.0 and it now works as expected. Not sure what changed, but happy it did!
Edit: Got excited and spoke too soon. After further testing, still no joy.
Thanks 
seems to be fine again, will do some more checks.
I noticed that the second change you described is a bit different in the js file. I have changed this
component.${r}.state.${i.attributes.device_class}.${i.state}
to
component.${r}.entity_component.${i.attributes.device_class}.state.${i.state}
1 Like
Cannot check right now. Theses changes need to be checked a lot. Frankly speaking, I use this card in 2 places - about 20 cards of one template, 12 cards of another template, and I’m both cases “state_display” is used …
I have what might be a stupid question, but I have searched and have been unable to find my answer.
I am learning yaml and becoming more comfortable with it, but when making a dashboard, I find the GUI easier to manage all of my coding. I get lost when it is all coded in yaml in one big file. Or even split across multiple easier to manage files.
I have done some button-card features and card-mod for a couple of GUI elements, but am working on a complete custom dashboard. I have many button-card templates and would like to use those in a GUI dashboard. I tried adding the “button-card-templates: !include….” but the GUI did not like it.
I know I can code each button element individually and add all of my modifications, but it is so much easier to use a template and make a change once as I continue to refine my setup.
So is there a way to reference button card templates that I have saved in my config while using the GUI editor to build my dashboard? Any help would be greatly appreciated. Thanks in advance.
Short answer is no. The GUI editor does not allow !include, that only works in yaml mode.
Lock icon shows above all layers and dialogs
In core-2023.5.2 something changed in frontend, and now card Lock icon (lock: enabled: true) displays above all layers and windows.
type: custom:button-card
entity: sensor.home_energy
lock:
enabled: true
This has not happened before
z-index seems to be changed recently in Frontend which caused issues with button-card, restriction-card and user-defined styles with changed z-index.