Thanks for the pro-tip. I probably would have struggled to figure out why my cards weren’t updating without this tidbit. Fortunately, I use Atom.io to edit my yaml.files so the workflow change should be painless.
i’m trying to use the template , picture below:
i replace the cpu, memory, temp with the my entities, here is the code:
- type: custom:button-card
entity: 'sensor.desktop_gmml6qq_intel_core_i5_3317u_temperatures_cpu_package'
icon: 'mdi:raspberry-pi'
aspect_ratio: 1/1
name: HassOS
styles:
card:
- background-color: '#000044'
- border-radius: 10%
- padding: 10%
- color: ivory
- font-size: 10px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
grid:
- grid-template-areas: '"i temp" "n n" "cpu cpu" "ram ram" "sd sd"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-weight: bold
- font-size: 13px
- color: white
- align-self: middle
- justify-self: start
- padding-bottom: 4px
img_cell:
- justify-content: start
- align-items: start
- margin: none
icon:
- color: >
[[[
if (entity.state < 60) return 'lime';
if (entity.state >= 60 && entity.state < 80) return 'orange';
else return 'red';
]]]
- width: 70%
- margin-top: -10%
custom_fields:
temp:
- align-self: start
- justify-self: end
cpu:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- --text-color-sensor: '[[[ if (states["sensor.desktop_gmml6qq_intel_core_i5_3317u_load_cpu_total"].state > 80) return "red"; ]]]'
ram:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- --text-color-sensor: '[[[ if (states["sensor.memory_use_percent"].state > 80) return "red"; ]]]'
sd:
- align-self: middle
- justify-self: start
- --text-color-sensor: '[[[ if (states["sensor.disk_use_percent_home"].state > 80) return "red"; ]]]'
custom_fields:
temp: >
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width: 12px; height: 12px; color: yellow;">
</ha-icon><span>${entity.state}°C</span>`
]]]
cpu: >
[[[
return `<ha-icon
icon="mdi:server"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>CPU: <span style="color: var(--text-color-sensor);">${states['sensor.desktop_gmml6qq_intel_core_i5_3317u_load_cpu_total'].state}%</span></span>`
]]]
ram: >
[[[
return `<ha-icon
icon="mdi:memory"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>RAM: <span style="color: var(--text-color-sensor);">${states['sensor.memory_use_percent'].state}%</span></span>`
]]]
sd: >
[[[
return `<ha-icon
icon="mdi:harddisk"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>SD: <span style="color: var(--text-color-sensor);">${states['sensor.disk_use_percent_home'].state}%</span></span>`
]]]
for some reason i’m getting no data, please see picture below:
Here are my entities below:
sensor.desktop_gmml6qq_intel_core_i5_3317u_temperatures_cpu_package
sensor.desktop_gmml6qq_intel_core_i5_3317u_load_cpu_total
sensor.memory_use_percent
sensor.disk_use_percent_home
what am i doing wrong? some has an idea what i need to do ?
I’ve really fallen in love with the new templating features but I need some more advice on how to achieve this.
My goal:
Add a custom_field on a button which has motion entity tied to it (binary_sensor.office_motion)
The custom_field should display the last time the sensor was triggered in HH:MM.
My problem
Since HA is displaying some background information in UTC, the time is off, as well as the last_changed value on an entity is displayed like yyy-mm.dd.hh.mm.ss
workaround
Creating a new template sensor in HA for all the entities, this works but is a real B*tch 
hall_motion_last_changed:
device_class: timestamp
value_template: "{{ as_timestamp(states.binary_sensor.office_motion.last_changed)|timestamp_custom('%H:%M') }}"
So I need to add the specific |timestamp_custom… to get it in the correct format.
I’ve been trying to mix these 2 codes together without success
My custom field looks like this right now:
[[[
return `<ha-icon
style="width: 12px; height: 12px; ">
</ha-icon><span><span style="color: grey ;">${states['sensor.hall_motion_last_changed].state}</span></span>`
]]]
Why not use just the show_last_changed: true? This will display the last changed properly and will update automatically.
It replaces the label field so you can apply CSS styles on it as you’d do with the label field.
Is that possible on a custom_field?
This is what my card looks like right now
That is one button-card?!
Your code is wrong BTW (you were missing a single quote in the brackets of the state object:
[[[
return `<ha-icon
style="width: 12px; height: 12px; ">
</ha-icon><span><span style="color: grey ;">${states['sensor.hall_motion_last_changed'].state}</span></span>`
]]]
Also why use <ha-icon> if you don’t specify an icon? You can just get rid of everything and just put:
'[[[ return `${states["sensor.hall_motion_last_changed"].state}` ]]]'
haha no that is a popup card with alot of button cards in it 
But as you can see on the sensors in the lower part I’m using custom_fields to show the timestamp in HH:MM format.
Thanks for the tip on skipping the templating bit for the icons, I just reused some code i found… (copy paste developer 
)
But that doesn’t solve the main issue, that’s just simplifying a few lines of code.
The main problem I have is getting that last_changed value in the correct timezone and format from my real entity
sensor.hall_motion_last_changed is a template sensor I created that just formats the time correctly from the entity binary_sensor.hall_rorelsesensor
Here’s the dev-state for a real motionsensor together with the template sensor I created
So i would like to get the template to get the last_changed value from binary_sensor.kontor_rorelsesensor without the need to create a value template sensor for that entity that displays the time correctly.
Then show_last_changed: true is the solution, it will give you this, in the correct timezone without the need to create any specific sensor:
There’s no need for a custom field, you can style it as you’d do with a custom field, it’s the label field.
If you want to display the time in your timezone instead of the “xx minutes ago”, you can do that:
[[[
var d = new Date(entity.last_changed);
return `${d.getHours()}:${d.getMinutes()}`
]]]
1 Like
Aah! Nice, the hard part was displaying the last_changed with a timestamp, not a relative time Thanks alot RomRider!
Hi Rom,
This is my current config to the button card:
- url: /customcards/github/custom-cards/button-card.js?track=true
type: module
This is the result :
When i change to :
- url: /local/custom_cards/button-card.js?v=abc
type: module
and reset browser CTRL+R , all the display changed :
if i change back to :
- url: /customcards/github/custom-cards/button-card.js?track=true
type: module
the view is back to normal but still the hassos entity is the same.
i downloaded the latest button.js from here: https://github.com/custom-cards/button-card/releases
i tried from firefox,
i’m using custom updater:
Any idea what do ?
We’re at version 2.0.5 not 1.11.1 
BTW, custom_updater is not maintained anymore I think. @ludeeus replaced it with HACS
1 Like
Are you sure this is still necessary, saving the UI-lovelace.yaml? I just hit the Refresh button in top right corner of the frontend, that seems to consistently work. Without saving ui-lovelace.yaml for every change.
Ah yes, Well I don’t use the gui and so I have hidden the header entirely with CCH. So I can not access that specific button you are talking about.
But no it is not necessary if you use that as it will reload lovelace and not just a simple refresh. If you use the standard browser refresh (F5) than you will need yo save the file first as your browser will otherwise load the cached version. I hope this made it a bit more clear.
Thank you, solved!
Need a second pair of eyes as I can’t figure out what I’m doing wrong here. I’m attempting to convert the button in the yaml below into a template, however, the end result is not what I expected and I cannot figure out what I’ve done wrong.
Existing YAML
- type: "custom:card-modder"
style:
border-radius: 10px
card:
type: "custom:button-card"
icon: mdi:toggle-switch
tap_action:
action: toggle
show_state: true
state:
- value: 'on'
color_type: icon
color: rgb(181, 142, 49)
- value: 'off'
icon: mdi:toggle-switch-off-outline
entity: light.hallway
name: "All Dimmers"
Resulting Button
New Yaml
Button Template
button_card_templates:
generic-button-settings:
state:
- value: 'on'
styles:
card:
- color_type: icon
- color: rgb(181, 142, 49)
- value: 'off'
icon: mdi:toggle-switch-off-outline
Decluttering Card
decluttering_templates:
dc_square_button_card:
card:
type: custom:button-card
show_state: true
template: generic-button-settings
entity_id: '[[entity]]'
name: '[[name]]'
styles:
card:
- border-radius: 10px
tap_action:
action: toggle
New Button Declaration
- type: custom:decluttering-card
template: dc_square_button_card
entity: light.hallway
name: Hallway
Resulting Button
1 Like
Wrong format
- type: custom:decluttering-card
template: dc_square_button_card
entity: light.hallway
variables:
- name: Hallway
1 Like
Is it possible to configure the tap_action service calls to call a template?
I’m trying to create buttons which changes the color_temp, but only for the lights that are on.
Here’s an automation that does it, but trying to add the last entity_id template to a tap_action service call doesnt work for me
- id: '1526499564809'
alias: Switch_BiR (Right) Cold Light
trigger:
- event_data:
click_type: single
entity_id: binary_sensor.wall_switch_right_158d0001f40a02
event_type: click
platform: event
condition:
- above: '230'
condition: numeric_state
entity_id: light.big_room_lamp_1_2
value_template: '{{ state.attributes.color_temp }}'
action:
- data_template:
color_temp: '175'
entity_id: >
{% set entities = states.group.all_light_big_room.attributes.entity_id %}
{% for entity in entities if states(entity) == 'on' -%}
{{ entity }}{{ ',' if not loop.last }}
{%- endfor %}
service: light.turn_on
Or is there a better way of doing this?
I’ve tried a bunch of different ways but nothing passes the lovelace_gen code check.
- type: "custom:button-card"
entity: '[[light]]'
show_icon: false
name: 'Varmt'
tap_action:
action: call-service
service_data:
data_template:
color_temp: '175'
entity_id: >
{% set entities = states.group.light_sovrum.attributes.entity_id %}
{% for entity in entities if states(entity) == 'on' -%}
{{ entity }}{{ ',' if not loop.last }}
{%- endfor %}
service: light.turn_on
The template is javascript, not jinja2. Please read the documentation.
Does your decluttering card interrupt the ratio ability inside horizontal stacks?