On further inspection with the debugger, the ābutton-cardā appears to have inner and outer elements that both get borders for some reason. Its not the config-template-card. Sorry for the distraction.
Hi iantrich, hope you can help with this,
This works:
- type: custom:config-template-card
card: {'type':'custom:camera-card','entity': 'camera.garage'}
But this does not:
- type: custom:config-template-card
card: >-
${var cards = [];
cards.push({'type': 'custom:camera-card',
'entity': 'camera.garage'
});
cards}
What am I missing?
TIA
1 Like
Youāre trying to return a JavaScript object to YAML. That wonāt work. You need to expand it to a string. I canāt test right now, but instead of returning cards, you might try
JSON.stringify(cards)
Edit: I remembered I had this jsbin and it looks like it might work. Not sure how YAML will handle the escaped double quotes, I would think they would be fine 
Thanks for looking into this.
Iāll give it a try.
Just another clue, this works:
- type: custom:config-template-card
entities: [binary_sensor.garage_mvmnt]
variables:
- ('garage')
- ('carport')
card:
type: custom:hui-vertical-stack-card
cards: >-
${var cards = [];
vars.forEach(entity_id => {
var name = 'camera.'+entity_id;
if (states['binary_sensor.garage_mvmnt'].state === 'on' ) {
cards.push({'type': 'custom:camera-card',
'entity': name
});
}
});
cards}
2 Likes
Please help, canāt get the following working:
cards:
- type: 'custom:config-template-card'
entities:
- sensors.meteoblue_url
card:
type: 'custom:iframe'
aspect_ratio: 50%
title: Meteogram
url: 'http://www.meteoblue.com'
It quits with: Custom element doesn't exist: custom:iframe.
Thank you @iantrich this is the working version (for everyone following):
- type: 'custom:config-template-card'
entities:
- sensor.additional_url
#Note: also had a plural mistake in the line above
card:
type: 'custom:hui-iframe-card'
aspect_ratio: 50%
url: ${'https://some.site.com/'+states['sensor.additional_url'].state}
Please not the additional
As noted in the docs, core cards need to have the proper prefix/suffix
custom:hui-iframe-card
1 Like
Version 1.0.6 Hi
Love the concept of this module - however whenever I put in any ${} template information the cards fails to render in Lovelace - the page remains blank. Thought at first this was because I was defining variables incorrectly but even simple plain text inside the template brackets kills the card. If you leave out the template information the cards render fine. There are no config errors showing. Have tried multiple card types and have always put custom: in front of the card type.
Am at a loss as to how to get this working.
Am running Hassio in Docker on Ubuntu server 18.04 and everything else works well.
Any thoughts ?
1 Like
We need an example config that isnāt working for you to help.
cards:
- type: 'custom:config-template-card'
variables:
- states.sensor.bus43.state
- states.sensor.bus43.attributes['runs'][states.sensor.bus43.attributes.departures[0].run_id |string]['destination_name']
entitities:
- sensor.bus43
card:
type: 'custom:hui-markdown-card'
title: "Next Bus"
show_header_toggle: false
content: "${vars[0]}"
Have tried this and multiple other variation - all with the same result (glance and entities). As soon as I include the templates component the card does not render at all. When this line is changed to a simple string it displays. The sensor is data from a public transport API and the variables derive the correct data when tested as templates in Home assistant. I am trying to use this to get all of the data about local public transport routes onto one card without having multiple template sensors.
I think you are defining your variables in an incorrect format. Check the readme of the card for an example. You want:
states['sensor.bus43'].state
I also suspect the second variable isnāt going to work after this is fixed either, since it looks like a jinja2 template expression. You need to convert it to a javascript expression.
Thanks very much indeed - it worked perfectly. My misunderstanding of Javascript
1 Like
I think I shouldnāt have said the second variable needs to be converted to javascript. I have a similar use case as you, and I did the dictionary and list indexing inside the javascript template rather than the variable itself. You can define variables and functions in the template, which might make your life easier if you need to do this over multiple sensors in the same card.
Trying to make a glance card with entity picture depending on state.
config-template-card installed and works but code
- type: ācustom:config-template-cardā
entities:
- automation.office_color_loop
card:
type: custom:hui-glance-card
entities:
- entity: automation.office_color_loop
entity_picture: ā${ states[āautomation.office_color_loopā].state === āonā ? ā/local/img/colorloop_off.pngā : ā/local/img/colorloop.pngā}ā
does not yiels expected result. it uses default entity picture
@iantrich or anyoneā¦
- entity: sensor.abb_usage
name: "${'Total' + '\xa0'.repeat(19) + (((vars[2] +vars[3]) / 1E3).toFixed(2)) + '\xa0' + 'GB of' + '\xa0' + (vars[4] =! 'null' ? vars[4] : 'Unlimited' + '\xa0' + 'GB')}"
icon: mdi:lan-connect
At the emd I was doing a test if a srting was NOT equal here:
(vars[4] =! ānullā ? vars[4] : āUnlimitedā + ā\xa0ā + āGBā)
and just found out I canāt do that. doh.
vars[4] can be a number (not a string) or it will be a string ānullā
If itās null, I want to put in Unlimited otherwise I want to use the vars[4] value. How can I do that?
not sure if this is still needed, but you have the wrong quotes around your templates, (the italic ones) probably because of copying from the community posts, which does that.
change them to the correct straight quotes and see if that helps?
entity_picture: >
${ states['automation.office_color_loop'].state === 'on' ? '/local/img/colorloop_off.png' : '/local/img/colorloop.png'}
Can anyone see why this produces a blank card (removing both templates and using either image url works):
type: 'custom:config-template-card'
entities:
- binary_sensor.recycling_week
card:
type: 'custom:hui-picture-elements-card'
title: "${states['binary_sensor.recycling_week'].state === 'on' ? 'Garbage and Recycling Monday' : 'Garbage Bin Only Monday'"
image: "${states['binary_sensor.recycling_week'].state === 'on' ? '/local/icons/rubbish_and_recycling/recycling.png' : '/local/icons/rubbish_and_recycling/garbage.png'"
elements:
- type: state-icon
entity: binary_sensor.recycling_week
style:
top: 1%
left: 7%
EDIT: As Thomas Loven kindly pointed out, I was missing the closing } braces in my templates.
2 Likes
Hi, found this card while trying to get some sort of template working in a Kodi Remote.
Basically trying to get it to send to the selected entity from a input_select.
Iāve got it working on two of them but no idea on how to go about doing the rest and am unfortunately not versed in JS.
input_select:
select_kodi:
options:
- Bedroom
- LivingRoom
- Kitchen
- Bathroom
initial: Bedroom
This is just a test button Iāve been playing with:
type: 'custom:config-template-card'
variables:
- 'states[''input_select.select_kodi''].state'
entities:
- input_select.select_kodi
card:
type: 'custom:button-card'
icon: 'mdi:menu'
name: Menu
show_name: true
size: 25%
tap_action:
action: call-service
service: media_player.kodi_call_method
service_data:
entity_id: ${vars[0] === 'Bedroom' ? 'media_player.bedroom' : 'media_player.livingroom' }
method: Input.ContextMenu
Bedroom and Living Room work fine when selected but choosing Kitchen or Bathroom seem to revert to Living Room according to the logs?
Quite honestly I can barely understand this part:
${vars[0] === 'Bedroom' ? 'media_player.bedroom' : 'media_player.livingroom' }
(if input_select.select_kodi equals Bedroom then use media_player.bedroom else use
media_player.livingroom)?
At first I thought it needed to be the array like the input_select but that didnt work:
${vars[0] === 'Bedroom' ? 'media_player.bedroom' : 'media_player.livingroom' : media_player.kitchen }
And now Im just lost looking for some guidance!
Itās a ternary operator: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
Try this
${vars[0] === 'Bedroom' ? 'media_player.bedroom' : vars[0] === 'Kitchen' ? 'media_player.kitchen' : vars[0] === 'Kitchen' ? 'kitchen' : 'media_player.livingroom' }
1 Like