might I ask you to hop over here, and see if you can help me out with some niftier nested JS templates then Ive been able to come up withâŚ
apreciated if you would
Can someone tell me why this configuration template is not working?
ciabatte_1:
entity: '[[entity]]'
icon: >
[[[
if (entity.state === 'on')
return "mdi:power-socket-eu";
else
return "mdi:power-socket-eu";
]]]
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: '[[entity_id]]'
styles:
card:
- font-weight: bold
- font-size: 13px
- font-family: 'Times New Roman'
icon:
- color: >
[[[
if (entity.state === 'on')
return "red";
else
return "green";
]]]
It gives me error about data [entity_id]âŚ
well, we cant cause we dont know what youâre feeding itâŚor what the template config looks like
btw, youâve got [[entity]] and [[entity_id]] in this config, are they pointing to the same entity_id?
also your template for the icon seems unnecessary since in all cases you want the same icon ? no need for a template then 
You should share the decluttering-card that you use with this that gives this error. A logical thing to me would be that you have set the entity in your variables, but not set the entity_id. If you want them to be the same you wonât need a service-call. A tap_action toggle would do exactly that.
Edit: and @Mariusthvdb is correct, you seem to use the exact same icon in both the âonâ state and any other state. Again if you want them to be the same just put the icon instead of a template. So icon: mdi:power-socket-eu.
Ok, about the icon youâre right, itâs my fault.
About the decluttering-card (if with this you mean the original card without configuration template), itâs this:
- type: custom:button-card
name: Ciabatta 1
entity: switch.ciabatta1
icon: mdi:power-socket-eu
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: switch.ciabatta1
styles:
card:
- font-weight: bold
- font-size: 13px
- font-family: 'Times New Roman'
icon:
- color: >
[[[
if (states['switch.ciabatta1'].state == 'on')
return "red";
else
return "green";
]]]
The entity and the entity_id point to the same entity, but i think the entity: switch.ciabatta1 is not so necessary as the entity_id: switch.ciabatta1 in the toggle action.
Ok thanks, but the icon itâs not a problem, my problem is about the template not working as i coded itâŚ
your code is using the format using a decluttering-template with variables in [].
see GitHub - custom-cards/decluttering-card: 𧚠Declutter your lovelace configuration with the help of this card for documentation on that card.
You should post that decluttering template for us to be able to check why it doesnât work (what does that actually mean, do you get errors, do you get a button at all etc etc)
if you donât have a decluttering template, the code unposted will never work, and you should write a full button card config first to see what you want.
since youâre new to HA, you better start getting a more fundamental understanding of the inner workings, before using something as complex, and simply copying other configs, or parts of it. It wont work like that
Hmmm⌠i donât have a decluttering template and the full button card config is what i posted in my last message. Or am i wrong? I have others configuration templates without the [[ ]] variables, so i tried to learn putting those variables but at the actual state i am wrong.
Is it possible to have a config template for that button-card without the [[ ]] variables?
yes, read the docs at: button-card/README.md at master ¡ custom-cards/button-card ¡ GitHub
and then try:
- type: custom:button-card
name: Ciabatta 1
entity: switch.ciabatta1
icon: mdi:power-socket-eu
tap_action:
action: toggle
styles:
card:
- font-weight: bold
- font-size: 13px
- font-family: 'Times New Roman'
icon:
- color: >
[[[
if (entity.state == 'on') return "red";
return "green";
]]]
Maybe i am not so clear, but i already coded some configuration templates and all are working as i expected.
Now i am having troubles as never did a config template with a toggle action and with an entity_id inside it. I have many button-card like that i posted, so i was thinking to create a config template to use with those card to avoid to repeat every code inside every card like i did with other card but without toggle actions⌠Hope to be more clear now about what i would like to haveâŚ
you donât need that if using a switch and toggling that. See my post above. In fact, you dont even need to define the tap-action since toggle is default for entities in these domains
Ok, so for every similar card i must put the same in every card? Is there a way/option to create something inside button_card_templates to avoid to repeat the same in every card?
For example i have this template:
mio_header:
color_type: label-card
color: rgb(44, 109, 214)
styles:
name:
- font-size: 14px
- font-weight: bold
- font-family: 'Times New Roman'
- color: white
And i use this for every similar card:
- type: "custom:button-card"
template: mio_header
name: Salotto Yeelight
Is it possible with that card?
if you want something like this:
- type: custom:button-card
template: switch_regular
entity: switch.sw_tv_auditorium_template
name: Tv Aud.
you define a button-template (named âswitch-regularâ here) like this:
switch_regular:
label: >
[[[
var id = entity.entity_id.split('.')[1].slice(3, -9);
return states['sensor.' + id + '_actueel'].state + ' Watt';
]]]
template: button_body_alt
which uses yet another template button_body_alt
button_body_alt:
color: auto
size: 30%
aspect_ratio: 1/1
show_state: true
show_label: true
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: success
styles:
lock:
- color: red
card:
- border-radius: 6px
- padding-left: 5px
- box-shadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'
name:
- justify-self: start
- font-weight: bold
- font-family: Helvetica
- font-size: 13px
- text-overflow: unset
- white-space: unset
- word-break: break-word
- text-align: start
label:
- font-size: 11px
- font-family: Helvetica
- justify-self: start
state:
- font-size: 11px
- font-family: Helvetica
- justify-self: start
- text-transform: capitalize
- font-weight: bold
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- justify-content: start
- align-items: start
state:
- value: 'on'
styles:
card:
# - box-shadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'
# - box-shadow: 0px 0px 2px 1px rgb(85, 91, 101)
# - box-shadow: 0px 0px 2px 1px var(--paper-item-icon-active-color)
- background-color: '#F0C209'
name:
- color: '#555B65'
state:
- color: gray
label:
- color: red
icon:
- color: '#555B65'
id: on-icon
- value: 'off'
styles:
card:
- color: '#F0C209'
- background-color: '#555B65'
# - box-shadow: 0px 0px 2px 1px
label:
- color: rgba(0, 0, 0, 0.0)
icon:
- color: '#F0C209'
id: off-icon
- value: 'unavailable'
styles:
card:
- opacity: 0.6
- color: grey
- --paper-item-icon-color: grey
label:
- color: rgba(0, 0, 0, 0.0)
you then can reference this method on all switches you like to have that config for.
1 Like
Yes, ok thatâs what i wanted since the beginning of our conversation⌠Now iâll study your config and make for my needed⌠thanks again for your support!
Can you explain me what the switch_regular template does? It shows the label of the card, but cannot understand how the var works hereâŚ
I have my switches and sensor named according to strict guidelines, to be able to manipulate their idâs in templates like this. In the config, you should probably not use the first template, but change that into the second. I showed it here, to explain how these templates can be inherited.
it automatically creates the name of the sensor that is relevant for the switch.
to set the var id
it takes the entity_id of a switch: âswitch.sw_tv_auditorium_templateâ,
splits it at the â.â and takes the right part of it â[1]â: sw_tv_auditorium_templateâ,
and then slices from the 4th character on the left â[3]â: âtv_auditorium_templateâ
to the 9nth from the right â[-9]â : âtv_auditoriumâ
this var id is then injected in to the return template states['sensor.' + id + '_actueel'].state to result in states['sensor.tv_auditorium_actueel'].state which is the corresponding sensor to read the state and display in the buttonâŚ
1 Like
HI, silly me, Ive only now discovered the confirmation: option⌠is this still alive?
because when I try this:
- type: custom:button-card
template: switch_regular
entity: switch.sw_audio_auditorium_template
name: Audio Aud.
lock: true
confirmation: 'Sure to toggle? If not do nothing.'
No popup or confirmation box, on either platform or device.
Just the lock opening up for a few seconds and than closing again.
I tried this just now and in my environment it works. At the first press the lock disappear, then pressing again i get the confirmation box
A I see, I had to press once more. Got it working yes, very nice.
But, and @RomRider might be asked already, can we template this confirmation field too?:
confirmation: >
[[[return 'Sure to toggle ' + entity.name + '? If not do nothing.']]]
Answer for now is no, but maybe this could be added?
Please have a look, thanks!