Hello,
I’d like to ask for some help. I’m new to Home Assistant and have no prior programming experience, so please be patient with me 
I’m currently working on a custom room card that’s a mix of several other room cards I found online. I’ve run into a couple of issues I’m struggling with and could really use some guidance.
Problem 1: Hiding Buttons if Undefined
I’d like to hide btn1, btn2, and btn3 if their entity is not defined. I tried doing it with a simple condition in the code, but I couldn’t get it to work. Basically, I’m not able to access or use variables correctly anywhere in the card. Here’s a small example of what I tried:
icon_color: |
{% if variables.btn4_entity | string | length > 0 %}
amber
{% endif %}
But this doesn’t seem to work. So my main question is: how can I properly use variables inside the YAML template code?
Then I also tried using a state-switch like this:
- type: custom:state-switch
entity: template
template: |
{% if variables.btn1_entity | string | length > 0 %}
show
{% else %}
empty
{% endif %}
states:
show:
empty:
However, this is always resolved as empty, even when btn1_entity is defined. I tried a few variations, but nothing worked. How can I make this conditional rendering work based on whether a variable is set?
Problem 2: Using Variables Inside Jinja
I’m having trouble using variables inside a Jinja block like this:
badge_icon: |
{% if (states('sensor.office_sensor_humidity') | int) >= 60 %}
mdi:water
{% elif (states(variables.temp_entity) | int) >= 26 %}
mdi:fire
{% elif (states(variables.temp_entity) | int) <= 18 %}
mdi:snowflake
{% endif %}
This code doesn’t work. But if I replace variables.temp_entity with a hardcoded entity name, like in the example below, everything works fine:
badge_icon: |
{% if (states('sensor.office_sensor_humidity') | int) >= 60 %}
mdi:water
{% elif (states('sensor.office_sensor_temperature') | int) >= 26 %}
mdi:fire
{% elif (states('sensor.office_sensor_temperature') | int) <= 18 %}
mdi:snowflake
{% endif %}
So it seems like variables aren’t accessible inside Jinja blocks in this context. Is there a correct way to reference them, or am I doing something wrong?
Here’s the rest of my current code setup for reference (template + usage).
Thank you in advance for any help! I really appreciate it.
button_card_templates:
room_template:
variables:
var_name: Room name
var_bgimage: Background image
var_icon: mdi:sofa
var_navigation: Destination
temp_entity: sensor.office_sensor_temperature
hum_entity: sensor.office_sensor_humidity
btn1_entity: btn1 entity
btn1_icon: btn1 icon
btn2_entity: btn2 entity
btn2_icon: btn2 icon
btn3_entity: btn3 entity
btn3_icon: btn3 icon
name: '[[[ return variables.var_name ]]]'
custom_fields:
icon:
card:
type: custom:mushroom-template-card
layout: horizontal
primary: ''
secondary: ''
icon: '[[[ return variables.var_icon ]]]'
icon_color: amber
tap_action:
action: navigate
navigation_path: '[[[ return variables.var_navigation ]]]'
card_mod:
style: |
ha-card {
border: solid 0px;
background: transparent;
--icon-size: 100px;
margin-left: -30px;
margin-bottom: -45px;
margin-top: -5px;
}
mushroom-badge-icon {
margin-right: 10px;
margin-top: 10px;
--badge-icon-size: 10px;
--badge-size: 20px;
}
badge_icon: |
{% if (states('sensor.office_sensor_humidity') | int) >= 60 %}
mdi:water
{% elif (states(variables.temp_entity) | int) >= 26 %}
mdi:fire
{% elif (states(variables.temp_entity) | int) <= 18 %}
mdi:snowflake
{% endif %}
badge_color: |
{% if (states('sensor.office_sensor_humidity') | int) >= 60 %}
blue
{% elif (states(variables.temp_entity) | int) >= 26 %}
red
{% elif (states(variables.temp_entity) | int) <= 18 %}
blue
{% endif %}
temp: |
[[[ return states[variables.temp_entity].state + '°C' ]]]
hum: |
[[[ return states[variables.hum_entity].state + '%' ]]]
btn1:
card:
type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: ''
layout: vertical
icon: '[[[ return variables.btn1_icon ]]]'
entity: '[[[ return variables.btn1_entity ]]]'
icon_color: |
{% if variables.btn4_entity | string | length > 0 %}
amber
{% endif %}
card_mod:
style: |
ha-card {
border: solid 0px;
--icon-size: 35px;
margin: -8px!important;
background: transparent!important;
}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
layout: vertical
icon: '[[[ return variables.btn2_icon ]]]'
entity: '[[[ return variables.btn2_entity ]]]'
icon_color: |
{% if is_state(entity, 'on') %}
amber
{% endif %}
card_mod:
style: |
ha-card {
border: solid 0px;
--icon-size: 35px;
margin: -8px!important;
background: transparent!important;
}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
layout: vertical
icon: '[[[ return variables.btn3_icon ]]]'
entity: '[[[ return variables.btn3_entity ]]]'
icon_color: |
{% if is_state(entity, 'on') %}
amber
{% endif %}
card_mod:
style: |
ha-card {
border: solid 0px;
--icon-size: 35px;
margin: -8px!important;
background: transparent!important;
}
styles:
grid:
- grid-template-areas: '"n btn1" "temp btn1" "hum btn1" "icon btn1"'
- grid-template-columns: 4fr 1fr
- grid-template-rows: min-content min-content min-content 1fr
- border: solid 0px
card:
- height: 160px
- border: solid 0px;
- background-image: >
[[[ return "linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url("
+ variables.var_bgimage + ")" ]]]
- background-position: center
- background-size: cover
- '--primary-text-color': '#ffffff'
- min-height: 130px
custom_fields:
btn1:
- padding-top: 1px
- justify-self: end
- padding-right: 15px
temp:
- justify-self: start
- font-size: 12px
- opacity: '0.7'
- padding-top: 0px
- padding-left: 5px
hum:
- justify-self: start
- font-size: 12px
- opacity: '0.7'
- padding-left: 5px
name:
- justify-self: start
- align-self: start
- font-size: 14px
- font-weight: 500
- color: white
- padding: 5px
views:
- title: Home
type: custom:vertical-layout
cards:
- square: true
type: grid
cards:
- type: custom:button-card
template: room_template
variables:
var_name: Test Office
var_bgimage: /local/home/lab1.png
var_icon: mdi:sofa
var_navigation: '#office'
temp_entity: sensor.office_sensor_temperature
hum_entity: sensor.office_sensor_humidity
btn1_entity: light.office_light_ceiling
btn1_icon: mdi:ceiling-light
btn2_entity: light.office_light_ceiling
btn2_icon: mdi:ceiling-light
btn3_entity: light.office_light_ceiling
btn3_icon: mdi:ceiling-light
columns: 2
