Thanks for the help, but this is just another card, with it’s own templates which I currently use.
I’m trying to reduce the HA code by sharing the templates with the rest of the dashboards. To do that, I only know the yaml way. However, with the new HA improvements, maybe there are some other ways to do that in storage mode. It will be a lot easier to edit the dashboards!
Hello all,
a question to which I currently have not found an answer.
I use a custom button card with 3 custom fields.
I want to use the TAP_ACTION only on the entities of the 3 custom fields, but not on the entity of the main card.
However, when I insert the appropriate coding at the top level, the TAP_ACTION is also disabled for the custom fields.
Is there a trick here how I could achieve this?
“Main-Button-Card” no TAP_ACTION, but Custom Fields with TAP_ACTION?
I think that the only way you can achieve that is by embedding a card into another card as custom fields. Then each card has individual control over the tap action.
like so:
custom_fields:
top:
card:
type: 'custom:button-card'
entity: null
icon: 'mdi:arrow-up-circle-outline'
template: cover_inside_button
tap_action:
action: call-service
service: cover.open_cover
service_data:
entity_id: '[[[ return entity.entity_id ]]]'
bottom:
card:
type: 'custom:button-card'
entity: null
icon: 'mdi:arrow-down-circle-outline'
template: cover_inside_button
tap_action:
action: call-service
service: cover.close_cover
service_data:
entity_id: '[[[ return entity.entity_id ]]]'
stop:
card:
type: 'custom:button-card'
entity: null
icon: 'mdi:stop-circle-outline'
template: cover_inside_button
tap_action:
action: call-service
service: cover.stop_cover
service_data:
entity_id: '[[[ return entity.entity_id ]]]'Please post you code properly as NO one can evaluate what you wrote without proper indentation. To us your code looks like this which is totally wrong:
custom_fields:
top:
card:
type: ‘custom:button-card’
entity: null
icon: ‘mdi:arrow-up-circle-outline’
template: cover_inside_button
tap_action:
action: call-service
service: cover.open_cover
service_data:
entity_id: ‘[[[ return entity.entity_id ]]]’
bottom:
card:
type: ‘custom:button-card’
entity: null
icon: ‘mdi:arrow-down-circle-outline’
template: cover_inside_button
tap_action:
action: call-service
service: cover.close_cover
service_data:
entity_id: ‘[[[ return entity.entity_id ]]]’
stop:
card:
type: ‘custom:button-card’
entity: null
icon: ‘mdi:stop-circle-outline’
template: cover_inside_button
tap_action:
action: call-service
service: cover.stop_cover
service_data:
entity_id: ‘[[[ return entity.entity_id ]]]’
The code was incomplete and provided as an example (not to be used as is, since there is clearly missing template code) and it was pasted with the appropriate indentations. It did reformat when posted…
@Tamsy, thanks for the formatting tip!
It is now posted as requested. Sorry for any inconvenience!
First of all sorry from my side
I had actually thought yesterday that I had still attached the example with my question. But there I have messed up
So in the following my example, where the tap_action works for both date and time.
- type: custom:button-card
entity: sensor.date
styles:
grid:
- grid-template-areas: '"time1" "time2"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr 1fr
custom_fields:
time1:
card:
type: custom:button-card
name: time1
entity: sensor.time
view_layout:
grid-area: "time1"
tap_action:
action: more-info
time2:
card:
type: custom:button-card
name: time2
entity: sensor.time
view_layout:
grid-area: "time2"
tap_action:
action: more-info
But if I now deactivate the TAP_ACTION for the date entity, no TAP_ACTION works for the custom fields anymore.
- type: custom:button-card
entity: sensor.date
tap_action:
action: none
styles:
grid:
- grid-template-areas: '"time1" "time2"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr 1fr
custom_fields:
time1:
card:
type: custom:button-card
name: time1
entity: sensor.time
view_layout:
grid-area: "time1"
tap_action:
action: more-info
time2:
card:
type: custom:button-card
name: time2
entity: sensor.time
view_layout:
grid-area: "time2"
tap_action:
action: more-info
Is there any way to reach my goal? Or is that not feasible at all?
Are you using an updated button-card?
As mentioned above by @kbrown01, maybe this is not the right forum to help you with the card problem.
Here is a link to the embedded cards tap_action issues:
(Embedded cards tap_action · Issue #410 · custom-cards/button-card · GitHub)
Try post the issue there.
If it does not work, maybe use the hold_action instead.
Hopefully this helps!
Hey, I’m trying to adjust “show_state” depending on the state of the entity. If I write true or false directly it works, but with this template, it only seems to display as true. Any help? The code works in other places, so what is wrong here?
show_state: >
[[[
if(entity.state == 'active'){
return 'true';
} else {
return 'false';
}
]]]
*screenshot of the card with the state showing as the timer is active. When paused/idle, the numbers should be hidden.
1 Like
Would you be able to try something like this?
show_state: |
[[[
if (states['domain.entity'].state == 'active') {
return 'true';
} else {
return 'false';
}
]]]
or maybe
show_state: |
[[[
if (states['domain.entity'].state == 'active') {
return `
true
`
} else {
return `
false
`
}
]]]
thanks for your reply but it did not work. Attaching some more screenshots below:
*When timer is active, state is shown (the numbers)
*when timer is paused, “5:58(paused)” should be hidden. Aka “show_state: false”. Ignore the big “Paused” for now, that’s a separate issue
*This is the entity
*This is the card yaml. The same functionality is used on line 384 and there is performs as it should.
Sorry, I should have said, that you will need to change the text ‘domain.entity’ to the entity_id you are referencing:
show_state: |
[[[
return states['trigger.irrigation_1'].state !== 'paused';
]]]
Hopefully, this should return a positive (true) if the entity is not showing the state ‘paused’.
Hi, I did actually try that too but it made no difference. Would you mind trying it out yourself? All you need to do is create a timer helper. I’ve scaled the card down a bit and pasted the code here: Irrigation Card - Pastebin.com
Much appreciated!
I think I have it.
I think that the “state” value was being thrown as you can use it with operators (like code snippet below), so I don’t think it could handle the query correctly:
state:
- value: on
name: On
- value: off
name: Off
So instead I used the custom_field option and came up with this:
type: custom:button-card
entity: timer.irrigation_1
name: Irrigation
label: Greenhouse
show_name: true
show_icon: false
show_label: true
custom_fields:
timer: |
[[[
if (states['timer.irrigation_1'].state !== 'paused') return states['timer.irrigation_1'].attributes.remaining ;
]]]
styles:
grid:
- grid-template-areas: |
[[[
if (states['timer.irrigation_1'].state !== 'paused')
return '"n n" "l l"';
else
return '"n n" "l timer"';
]]]
- grid-template-rows: 1.5fr 1fr
- grid-template-columns: 1fr 1fr
- row-gap: 8px
card:
- height: 100%
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 1rem
- overflow: visible
- aspect-ratio: 3/2
name:
- text-align: left
- font-size: var(--fs-600)
- font-family: Montserrat
- font-weight: 600
- justify-self: start
- align-self: end
- color: var(--contrast-100)
- overflow: visible
label:
- text-align: left
- font-size: var(--fs-400)
- font-family: Montserrat
- font-weight: 500
- justify-self: start
- align-self: center
- color: var(--contrast-100)
- overflow: visible
custom_fields:
timer:
- text-align: right
- font-size: var(--fs-400)
- font-family: Montserrat
- font-weight: 500
- justify-self: end
- align-self: center
- color: var(--contrast-100)
This appears to work how I think you want it working, but feel free to come back to me if not!
Thanks for putting your time into this. I had two problems with it though:
- The card content jump up/down based on what is shown.
- The counter does not cound down. It stays static.
I managed to solve issue 1 by adjusting some stuff. Not sure exactly HOW. To me, the code has the same states and conditions, just written differently. Oh well, at least it works 
I will share it later.
As for issue 2, this seems to be a noted, but not fixed, flaw in HA. See this thread: 'remaining' Attribute of timer helper Entity stays static instead of counting down · Issue #12676 · home-assistant/frontend · GitHub
I will have to try to suggested fix in the thread or find another way…
Hello
Who can help me?
With the button I want to switch “entity: input_button.homemode_home_marco”.
But the color from the icon should come from the dropdown helper “input_select.marco_homemode” with the value “Home”.
I get the following error message:
ButtonCardJSTemplateError: SyntaxError: Unexpected token '==' in 'if ('input_select.anke_homemode') == 'Home' return 'red'; else return 'black';'
cards:
- type: custom:button-card
entity: input_button.homemode_home_marco
icon: mdi:home
color_type: icon
size: 36px
name: Home
tap_action:
action: toggle
styles:
card:
- font-size: 16px
- font-weight: normal
icon:
- color: |
[[[
if ('input_select.marco_homemode') == 'Home' return 'red';
else return 'black';
]]]
Thanks
Right now you’re just naming the input_select, but you don’t say, what you want from that entity. In your case you’d presumably want the state of the input_select.
[[[
if (is_state('input_select.marco_homemode', 'Home')) {
return 'red'; }
else {
return 'black'; }
]]]
1 Like
Thank you
Yes i want the state of the input.
type: horizontal-stack
cards:
- type: custom:button-card
entity: input_button.homemode_home_marco
icon: mdi:home
color_type: icon
size: 36px
name: Home
tap_action:
action: toggle
styles:
icon:
- color: |
[[[
if (is_state('input_select.marco_homemode', 'Home')) {
return 'red'; }
else {
return 'black'; }
]]]
Sorry, my javascript is not the best
I get the following message back:
missed comma between flow collection entries (15:64)
** 12 | … **
** 13 | … **
** 14 | … **
** 15 | … select.marco_homemode’, ‘Home’)) {**
-----------------------------------------^
** 16 | … **
** 17 | …**
The custom button card is amazing - so many opportunities! Can anybody assist?
I want to have the buttons highlighted below centred horizontally in the card. I’ve tried card mod but that does not seem to apply to custom button card (somethign about no ha-card or summin’)
I’ve tried various CSS attempts, played with padding etc. etc. but just cannot nail it down?
How could I achieve this? TIA
YAML below for that strip of icons (buttons)
type: custom:layout-card
layout_type: custom:vertical-layout
layout: {}
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
name: Front door
show_name: false
entity: binary_sensor.front_door_gate_contact
color_type: card
state:
- value: 'on'
color: rgb(191,33,47)
icon: mdi:bell-circle
- value: 'off'
color: rgb(0,111,60)
icon: mdi:bell-circle
size: 100%
styles:
card:
- width: 35px
- height: 35px
- type: custom:button-card
name: Lounge gate
img_cell:
- align-self: center
- text-align: center
show_name: false
entity: binary_sensor.lounge_gate_contact
color_type: card
color: rgb(66, 134, 244)
size: 100%
styles:
card:
- width: 35px
- height: 35px
state:
- value: 'on'
color: rgb(191,33,47)
icon: mdi:sofa
- value: 'off'
color: rgb(0,111,60)
icon: mdi:sofa
- type: custom:button-card
name: Kitchen
show_name: false
entity: binary_sensor.drive_gate_monitor_contact
color_type: card
state:
- value: 'on'
color: rgb(191,33,47)
icon: mdi:silverware-variant
- value: 'off'
color: rgb(0,111,60)
icon: mdi:silverware-variant
size: 100%
styles:
card:
- width: 35px
- height: 35px
- type: custom:button-card
name: Family room
show_name: false
entity: binary_sensor.family_room_gate_monitor_contact
color_type: card
state:
- value: 'on'
color: rgb(191,33,47)
icon: mdi:table-tennis
- value: 'off'
color: rgb(0,111,60)
icon: mdi:table-tennis
size: 100%
styles:
card:
- width: 35px
- height: 35px
- type: custom:button-card
name: Laundry gate
img_cell:
- align-self: center
- text-align: center
show_name: false
entity: binary_sensor.laundry_gate_contact
color_type: card
color: rgb(66, 134, 244)
size: 100%
styles:
card:
- width: 35px
- height: 35px
state:
- value: 'on'
color: rgb(191,33,47)
icon: mdi:washing-machine
- value: 'off'
color: rgb(0,111,60)
icon: mdi:washing-machine
- type: custom:button-card
name: Drive
show_name: false
entity: binary_sensor.drive_gate_monitor_contact
color_type: card
state:
- value: 'on'
color: rgb(191,33,47)
icon: mdi:car-hatchback
- value: 'off'
color: rgb(0,111,60)
icon: mdi:car-hatchback
size: 100%
styles:
card:
- width: 35px
- height: 35px
- type: custom:button-card
name: Garage
show_name: false
entity: binary_sensor.garage_door_monitor_contact
color_type: card
state:
- value: 'on'
color: rgb(191,33,47)
icon: mdi:garage
- value: 'off'
color: rgb(0,111,60)
icon: mdi:garage
size: 100%
styles:
card:
- width: 35px
- height: 35px
- type: custom:button-card
name: Workshop
show_name: false
entity: binary_sensor.workshop_door_contact
color_type: card
state:
- value: 'on'
color: rgb(191,33,47)
icon: mdi:hammer-screwdriver
- value: 'off'
color: rgb(0,111,60)
icon: mdi:hammer-screwdriver
size: 100%
styles:
card:
- width: 35px
- height: 35px