An easy way would be to use vertical-stack-in-card.
What is the correct way to check if entity exists when using templates?
Some buttons display several entities, and when one of them missing whole button not showing, trying to make template to check if entity even exists before making calculations on it
tried these without success:
- colorstyle: "[[[
if (!states['sensor.dsl_dl'].state);
if (states['sensor.dsl_dl'].state < 20) return 'red';
else return 'lime';
]]]"
- colorstyle: "[[[
if (states['sensor.dsl_dl'].state != '');
if (states['sensor.dsl_dl'].state < 20) return 'red';
else return 'lime';
]]]"
Please advice
checking if the sensor is in the states object should suffice:
- colorstyle: "[[[
if (states['sensor.dsl_dl']);
if (states['sensor.dsl_dl'].state < 20) return 'red';
else return 'lime';
]]]"
- colorstyle: "[[[
if (states['sensor.dsl_dl']);
if (states['sensor.dsl_dl'].state < 20) return 'red';
else return 'lime';
]]]"
Thanks but it is not working, Chrome log shows:
Uncaught (in promise) TypeError: Cannot read property ‘state’ of undefined
This is scrape sensor and it’s not exist when not connecting to router UI
After reading about State Objects I figures it’s better to template the scrape sensor to return 0 instead of not showing
the error gave you the answer
- colorstyle: "[[[
if (states['sensor.dsl_dl'] !== undefined);
if (states['sensor.dsl_dl'].state < 20) return 'red';
else return 'lime';
]]]"
- colorstyle: "[[[
if (states['sensor.dsl_dl'] !== undefined);
if (states['sensor.dsl_dl'].state < 20) return 'red';
else return 'lime';
]]]"
Sorry but still same result, I’ve tried for 2 hours many combinations with all kindz of brackets, commas indentations, undefined, ‘undefined’, tons of Google results for JS, but nothing worked so I’m focusing on changing sensor itself instead of changing button (for now also without success 
). Unfortunately I have to go off now so I’l deal with it later.
Many thanks for help.
- colorstyle: "[[[
if (states['sensor.dsl_dl']) {
if (states['sensor.dsl_dl'].state < 20) return 'red';
else return 'lime';
} ]]]"
1 Like
this is great, using it in my button config.
a bit puzzled how to use that in a state template, could you please help me here, using this now:
state:
- operator: template
value: >
return entity.state == 'home'
color: '#008000'
- operator: template
value: >
return entity.attributes.country_code != 'nl'
color: 'white'
- operator: template
value: >
return entity.state == 'not_home'
color: '#555B65'
- operator: default
color: '#643aac'
the template flukes on the second condition, when there is no country code (yet, this is made after a poll of the entity, a device_tracker). I would have hoped it would continue to the third condition, not having met the second condition, but it doesn’t.
So I’d need to add a condition to that, being available. Tried:
- operator: template
value: >
return entity.attributes.country_code && entity.attributes.country_code != 'nl'
color: 'white'
and:
- operator: template
value: >
if (entity.attributes.country_code) return entity.attributes.country_code != 'nl'
color: 'white'
even:
return entity.attributes.country_code {entity.attributes.country_code != 'nl'}
but too unfamiliar with this for me new syntax, I cant get it right.
Please help me find, thanks!
would you mind share an example ?
tried the following :
i used the templates and this is what i get :
code:
i comment the custom fields:
cards:
- type: "horizontal-stack"
cards:
- template: button
type: "custom:button-card"
styles:
img_cell:
- margin: none
- align-items: flex-end
icon:
- width: 100%
- border-radius: 10px
grid:
- grid-template-areas: '"icn temp" "n n" "i i"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr 1fr 3fr
name:
- padding-top: 4px
# custom_fields:
# temp: >
# [[[
# return `<ha-icon icon='mdi:motion-sensor' style='width: 12px; height: 12px; color: yellow;'></ha-icon>
# <span>${states['switch.meye_cam2_motion'].state}</span>`
# ]]]
# icn: >
# [[[
# if (states['binary_sensor.motion_cam_out'].state == 'on') return "<div style='text-align: start;'><ha-icon icon='mdi:cctv' style='color: lime; animation: blink 2s ease infinite;'></ha-icon></div>";
# else return "<div style='text-align: start;'><ha-icon icon='mdi:cctv' style='color: deepskyblue;'></ha-icon></div>";
# ]]]
entity: camera.camera_wyze
show_entity_picture: "true"
- template: button
type: "custom:button-card"
styles:
img_cell:
- margin: none
- align-items: flex-end
icon:
- width: 100%
- border-radius: 10px
grid:
- grid-template-areas: '"icn temp" "n n" "i i"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr 1fr 3fr
name:
- padding-top: 4px
# custom_fields:
# temp: >
# [[[
# return `<ha-icon icon='mdi:motion-sensor' style='width: 12px; height: 12px; color: yellow;'></ha-icon>
# <span>${states['switch.meye_cam2_motion'].state}</span>`
# ]]]
# icn: >
# [[[
# if (states['binary_sensor.motion_cam_out'].state == 'on') return "<div style='text-align: start;'><ha-icon icon='mdi:cctv' style='color: lime; animation: blink 2s ease infinite;'></ha-icon></div>";
# else return "<div style='text-align: start;'><ha-icon icon='mdi:cctv' style='color: deepskyblue;'></ha-icon></div>";
# ]]]
entity: camera.camera_wyze
show_entity_picture: "true"
type or paste code here
When i click on them i can see the steam without issue…
any idea why i can’t get the picture ?
EDIT: I think I can do this using custom fields…
From the docs it appears that the state cannot be templated.
Is there any other way, when the state is a number, to have it formatted.
e.g.
34087 displayed as 34,087
I’m no javascript expert (not even close 
) but I’ve found that this could work if templating were possible.
entity.state.toLocaleString('en')
Anyone that can help me format to the new template format?
This one worked before:
label_template: >
return '<span style="font-weight: bold;">Stuga 1: </span>'+ (states['calendar.stuga1'].state === 'off'
? '<span style="color: #00FF00; font-weight: bold;">LEDIG</span>'
: '<span style="color: #FF0000; font-weight: bold;">UTHYRD</span>')
+ '<br />'
+ '<br />'
+ '<span style="font-weight: bold;">Ankomst: </span>' + states['sensor.stuga1ankomst'].state + '<br />'+ '<br />'
+ '<span style="font-weight: bold;">Avresa: </span>' + states['sensor.stuga1avresa'].state + '<br />'+ '<br />'
+ '<span style="font-weight: bold;">Gäst: </span>' + states['sensor.stuga1beskrivning'].state
have you tried:
label: >
[[[
return '<span style="font-weight: bold;">Stuga 1: </span>'+ (states['calendar.stuga1'].state === 'off'
? '<span style="color: #00FF00; font-weight: bold;">LEDIG</span>'
: '<span style="color: #FF0000; font-weight: bold;">UTHYRD</span>')
+ '<br />'
+ '<br />'
+ '<span style="font-weight: bold;">Ankomst: </span>' + states['sensor.stuga1ankomst'].state + '<br />'+ '<br />'
+ '<span style="font-weight: bold;">Avresa: </span>' + states['sensor.stuga1avresa'].state + '<br />'+ '<br />'
+ '<span style="font-weight: bold;">Gäst: </span>' + states['sensor.stuga1beskrivning'].state
]]]
Yes tried that one, but it gives this.
no, thats not what you want 
if you look here, you can see how I did something like that without the html coding, direct in the markdown
maybe that helps.
sorry that was for a markdown card, not a button card. forget my post please.
That works for me, are you sure you are on the latest version?
1 Like
Thanks it is working.
Sorry, your example worked fine, i must have missed some indentations.
1 Like
First I want to say I love this card! It makes up about 96% of my entire UI.
I do have a question if you can answer it.
I used your original weather card and modified it to use Animated icons. My question is there a way I could implement a custom sensor to get a value if sun.sun is above or below horizon so I can match up icons in the evening because now if it’s a partly cloudy night I get partly cloudy with the sun so it doesn’t quite matchup.
I’m looking for a better icon set that I haven’t found yet but I love this weather card thanks for the inspiration.
On a off topic question, has your future forecast really off of what actually happens? It seems like the current weather is pretty close. Very strange, I’ll have to look into the api and see if I set it up wrong.
Weather Button Card
`
Sure you could have an outer check for below/above horizon and then use the different icon set should you find it.
I don’t follow your second question.
1 Like