This card @iantrich and the ideas I got from looking at how youâre using it @GaryOkie saved my life! ok maybe not that dramatic but seriously itâs really cool what possibilities this opened up. With this config-template-card and a bit of html and HA automation, I was able to extend the features of the Ring HA add-on: GitHub - tsightler/ring-mqtt-ha-addon: Home Assistant addon to integrate Ring alarm and camera devices via MQTT so that now my HA dashboard card shows each new motion event snapshot image and plays the relevant video instantly and of course, without having to refresh the dashboards!
2 Likes
Can someone help me with the syntax on this. I am trying to change the backgrouund-color based on whether a specific entity is part of a group. I have tried various routes, this is my current failing effort (result is the picture entity is just blank)
type: custom:config-template-card
entities:
- light.study_lights_group
- group.dynamic_lights
card:
type: picture-elements
image: local/floorplan_ground2.png
elements:
- type: image
image: /local/study.png
style:
background-color: >-
${ if('light.study_lights_group' in
state_attr('group.dynamic_lights','entity_id') 'rgba(252, 3,240, 1)';
else 'rgba(0,0,0,0)';}
top: 35.45%
left: 78.5%
width: 23.1%
transform: rotate(-90deg)
entity: light.study_lights_group
tap_action:
action: call-service
service: script.group_change
service_data:
selected_light: light.study_lights_group
It has me stumped, similar syntax worked for changing based on a if (states[âentityâ].state == âxâ, but I cannot get it to work for the if ⌠in state_attr ⌠form.
Ta
Hi, I have some JS in the âinnerâ card (apexcharts), and it stopped working after I added config-template-card. Below is partial example: the script in apex_config/legend/formatter doesnât work any more. Is there a fix? Thanks!
type: custom:config-template-card
entities:
- sensor.bieznia_dystans_wg_tygodni_sql
card:
type: custom:apexcharts-card
graph_span: 35d
span:
end: week
offset: '-1d'
apex_config:
legend:
formatter: |
EVAL:(seriesName, opts) => {
let arr = opts.w.globals.series[opts.seriesIndex],
value = arr[arr.length - 1];
// ... do some stuff with 'value'
}
A card inside CTC is only updated when a monitored entity is updated.
I know, itâs a different problem: inner card scipts donât get called at all. As if they werenât there.
Probably this is a question to the apexcharts cardâs author too - why scripts are not calledâŚ
Not to blame anyone, but you should raise an issue for both cards.
Also I suggest you to SIMPLIFY a script when posting issues in Github - to make it more clear for people (and easier to reproduce).
I think, CTC probably intercepts all javascript code, so I have to call my inner scripts differently. Oh well, time to learn some JS, I guess 
Any reason of using JS just for a legend?
Can you move this code on the upper level - on the CTC level?
Yes, I was hoping, moving code up would work, and it did 
But if the function needs access to dynamic arguments provided by inner card - you have to return the âinner functionâ itself. So eg. I had this code to transfer xaxis labels into weeks:
type: custom:apexcharts-card
apex_config:
xaxis:
labels:
formatter: |
EVAL:(timestamp) => {
let d = new Date(timestamp);
let d2 = d.toLocaleString('unknown',{month:'short',day:'numeric'});
d.setDate(d.getDate() - 6);
let d1 = d.toLocaleString('unknown',{day:'numeric'});
return `${d1}-${d2}`;
}
After adding CTC, it becomes this:
type: custom:config-template-card
variables:
getXaxisLabelFunc: |
() => {
// transfers week end date into week range, eg. 8-14 jan
return `EVAL:(timestamp) => {
let d = new Date(timestamp);
let d2 = d.toLocaleString('unknown',{month:'short',day:'numeric'});
d.setDate(d.getDate() - 6);
let d1 = d.toLocaleString('unknown',{day:'numeric'});
return \`\${d1}-\${d2}\`;
}`;
}
card:
type: custom:apexcharts-card
apex_config:
xaxis:
labels:
formatter: ${getXaxisLabelFunc()}
Good evening! Thanks for creating this awesome card! Iâm trying to modify the name of my lamps, but somehow it doesnât want me to use replace on the friendly names. What am i doing wrong?
The following works:
- type: custom:config-template-card
entities:
- light.badezimmer
card:
type: custom:mushroom-light-card
entity: light.badezimmer
name: "${ var name = states['light.badezimmer'].friendly_name; name}"
The following also works perfectly
name: "${ var name = 'Badezimmer Hue'; var x = name.replace('Hue', ''); x}"
However, the combination doesnât work (the card isnât displayed)
- type: custom:config-template-card
entities:
- light.badezimmer
card:
type: custom:mushroom-light-card
entity: light.badezimmer
name: "${ var name = states['light.badezimmer'].friendly_name; var x = name.replace('Hue', ''); x}"
Any help would be very appreciated! Thanks
I think the friendly_name is an attribute of the light.badezimmer.
Try:
name: "${ var name = states['light.badezimmer'].attributes.['friendly_name']; var x = name.replace('Hue', ''); x}"
1 Like
Amazing, this worked! Thanks a lot, searched for hours and didnât understood why it wasnât working
name: "${ var name = states['light.badezimmer'].attributes.friendly_name; var x = name.replace('Hue', ''); x }"
Iâve been trying to pass a sensor entity as a variable but it doesnât work. I see an error in the browser console ReferenceError: sensor is not defined. Is there something Iâm missing?
type: custom:config-template-card
entities:
- sensor.temp4
variables:
entity_id: sensor.temp4
card:
type: gauge
entity: ${entity_id}
seems an improper use for this card if you ask me, setting a name can be done directly in the card? You should really use config-template-card as sparsely as possible, since it is very heavy on the system. Also, use it only for what is was designed for: to template the config option in Dashboard.
setting a name in an entities object on a single card does not require that.
not sure why you donât use:
type: custom:mushroom-light-card
entity: light.badezimmer
name: Badezimmer
whatâs more, you can even set the name on the light directly, just edit it in the UI. You would not even need to set the name in the card at allâŚ
if you want to create a generic card config, you could use a template inside the button-card (which mushroom essentially is) for that.
entity_id: '''sensor.temp4'''
if you donât mind me asking, but why would you do that? simply passing the entity_id would be straightforward, and not requiring the config-template-card at all?
because of that, I fear you might be using the wrong card for your requirements, and hence tasking the system unnecessarily so.
Thatâs a simplified example. My actual usage is a lot more complexâŚsee below. I have 4 of these cards and Iâll potentially expanding that to 8.
type: custom:config-template-card
entities:
- input_datetime.dosing_reset_time_calcium
- input_number.dosing_container_weight_calcium
- sensor.dosing_days_remaining_calcium
variables:
maxDays: >-
Number(states['sensor.dosing_days_remaining_calcium'].attributes['start_vol'])
/
Number(states['sensor.dosing_days_remaining_calcium'].attributes['daily_dosing'])
card:
type: vertical-stack
title: Calcium
cards:
- type: gauge
entity: sensor.dosing_days_remaining_calcium
min: 0
max: ${maxDays}
severity:
red: 10
yellow: 15
green: 20
- type: horizontal-stack
cards:
- type: markdown
variables:
daily_dosing: >-
${states['sensor.dosing_days_remaining_calcium'].attributes['daily_dosing']}
days_since_reset: >-
${states['sensor.dosing_days_remaining_calcium'].attributes['days_since_reset']}
content: >
### Configuration
**Dosing:** {{ config.variables.daily_dosing }} ml/day
**Last Calibration:** {{ config.variables.days_since_reset | round
}} days
- type: markdown
variables:
remaining_vol: >-
${states['sensor.dosing_days_remaining_calcium'].attributes['remaining_vol']}
weight: >-
${states['sensor.dosing_days_remaining_calcium'].attributes['expected_weight']}
content: |
### Estimates
**Weight:** {{ config.variables.weight | round }} g
**Remaining:** {{ config.variables.remaining_vol | round }} ml
- type: entities
entities:
- entity: input_number.dosing_container_weight_calcium
name: Calibration Weight
- type: button
tap_action:
action: call-service
service: input_datetime.set_datetime
service_data:
timestamp: ${Date.now()/1000}
target:
entity_id: input_datetime.dosing_reset_time_calcium
show_icon: false
name: Mark Calibration
show_state: false
Thanks, that solves my issue
sure, that makes sense 
those are true variables, in the sense they are templates, and not plain entity_idâs.
thatâs why I asked.
seems a rather heavy card, donât you notice any lags or heavy loading there? Expanding that to even 8âŚ
The card is used within auto entities. So as i have many lights (>30), this trick enables me to populate the mushroom light card without needing to change all names. It works perfectly now. (thanks for the further ideas, maybe iâll go renaming them manually if that helps performance).
Here the full example (where it is now working perfectly):
- type: custom:auto-entities
card:
type: grid
columns: 4
square: false
card_param: cards
sort:
method: name
filter:
include:
- domain: light
area: Wohnzimmer
options:
type: custom:config-template-card
entities:
- this.entity_id
card:
type: custom:mushroom-light-card
entity: this.entity_id
name: >-
${
states['this.entity_id'].attributes.friendly_name.replace('Wohnzimmer
Hue', '') }
fill_container: true
show_brightness_control: true
use_light_color: true
secondary_info: none