How do I reference a variable passed to a decluttering card in a custom button card custom field? Pass a variable with is an entity to the decluttering card template and the template will display the state of that variable entity. In the below example, I pass name, icon, and 4 entities. I want to show the states of the entities in the card. I used an example to get this far. The error is at the “entity_1” in the “ur” custom field. Error is “ButtonCardJSTemplateError: ReferenceError: entity_1 is not defined in ‘return ` …’”
decluttering_templates:
template_1:
default: null
card:
type: 'custom:button-card'
name: '[[name]]'
icon: 'mdi:[[icon]]'
entity_1: '[[entity_1]]'
entity_2: '[[entity_2]]'
entity_3: '[[entity_3]]'
entity_4: '[[entity_4]]'
aspect_ratio: 1/1
show_state: true
styles:
card:
- border-radius: 10%
- padding: 10%
- font-size: 30px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
grid:
- grid-template-areas: '"i ur" "n n" "one one" "two two" "three three"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-weight: bold
- font-size: 60px
- align-self: middle
- justify-self: start
- padding-bottom: 4px
img_cell:
- justify-content: start
- align-items: start
- margin: none
icon:
- width: 100%
- margin-top: '-10%'
custom_fields:
ur:
- align-self: start
- justify-self: end
one:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
two:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
three:
- align-self: middle
- justify-self: start
custom_fields:
ur: |
[[[
return `<ha-icon
icon="mdi:server"
style="width: 50px; height: 50px">
</ha-icon><span>${entity_1.state}°C</span>`
]]]
one: |
[[[
return `<ha-icon
icon="mdi:server"
style="width: 30px; height: 30px">
</ha-icon><span>ABC: <span>${states['input_select.hue_scene_selector'].state}</span></span>`
]]]
two: |
[[[
return `<ha-icon
icon="mdi:memory"
style="width: 30px; height: 30px">
</ha-icon><span>RAM: <span style="color: var(--text-color-sensor);">${states['input_select.hue_scene_selector'].state}</span></span>`
]]]
three: |
[[[
return `<ha-icon
icon="mdi:harddisk"
style="width: 30px; height: 30px">
</ha-icon><span>SD: <span style="color: var(--text-color-sensor);">${states['switch.office_light_2'].state}</span></span>`
]]]
views:
- title: iPad Main
path: ipad-main
panel: false
badges: []
cards:
- type: 'custom:decluttering-card'
template: template_1
variables:
- name: Name
- icon: arrow-up
- entity_1: input_select.hue_scene_selector
- entity_2: input_select.hue_scene_selector
- entity_3: input_select.hue_scene_selector
- entity_4: input_select.hue_scene_selector