Change how entity is displayed on a card (popup → toggle)

Configuration Frontend
1

I have a z-wave lock that I’d like to make the card display a simple on/off switch rather than the popup Enable/Disable…

Currently defaults to look like…

Screen Shot 2025-01-24 at 11.56.24 AM

type: entities
entities:
  - entity: lock.touchscreen_deadbolt_z_wave_plus
  - entity: select.touchscreen_deadbolt_z_wave_plus_vacation_mode
    icon: mdi:shield-sun
    name: Vacation Mode
    secondary_info: none
state_color: true

But would like it to look like this…

after

2

You have a select entity, but seems you would like a switch entity.

You can’t change how a select displays, but you can make a duplicate template switch entity that changes the value of the select when it is turned on/off.

3

Thank you, I’ll take a look.

4

I got started making Vacation Mode select popup into a switch using Templates in the visual editor. It mostly works…

Screen Shot 2025-01-24 at 7.10.42 PM

Flipping the Vacation mode switch changes the mode, BUT then moves the switch back to off (even though the lock vacation mode has been changed and stays ON). The switch state isn’t sticky.

Screen Shot 2025-01-24 at 7.10.37 PM

I have value template as…

{{ is_state(‘select.touchscreen_deadbolt_z_wave_plus_vacation_mode’, ‘enabled’) }}

5

Is it enable or enabled?

6

Nice catch, thank you! I’ve looked at this so much today my eyes are bugging out. It acutally had to be ‘Enable’. Case matters apparently?

1 Like
7

Thanks for the credit, but I would mark @karwosts’ reply as the solution that put you on the right path. :slight_smile:

Yes, case matters, and in this case you were missing a d. When in doubt, check the actual state value under the dev tools.

8

So I’m trying to create another version, using YAML this time (not the graphical editor) to better understand how it all works. Displays fine, but is not actually changing the vacation mode state of the doorlock. The card using this template reflects the state. but clicking the switch just toggles the state briefly. Which isn’t surprising, as I don’t see how the code is actually changing the value…

#vacation_mode_v2
switch:
  - platform: template
    switches:
      vacation_mode_switch_v2:
        friendly_name: "Vacation Mode v2"
        value_template: "{{ is_state('select.touchscreen_deadbolt_z_wave_plus_vacation_mode', 'Enable') }}"
        turn_on:
          action: switch.turn_on
          target:
            entity_id: select.touchscreen_deadbolt_z_wave_plus_vacation_mode
        turn_off:
          action: switch.turn_off
          target:
            entity_id: select.touchscreen_deadbolt_z_wave_plus_vacation_mode
        icon_template: >-
          {% if is_state('select.touchscreen_deadbolt_z_wave_plus_vacation_mode', 'Enable') %}
            mdi:lock
          {% else %}
            mdi:lock-open
          {% endif %}
9

Added …

   action: select.select_next

to turn_on/off, and that seems to make it all work now…

switch:
  - platform: template
    switches:
      vacation_mode_switch_v2:
        friendly_name: "Vacation Mode v2"
        value_template: "{{ is_state('select.touchscreen_deadbolt_z_wave_plus_vacation_mode', 'Enable') }}"
        turn_on:
          action: select.select_next
          target:
            entity_id: select.touchscreen_deadbolt_z_wave_plus_vacation_mode
        turn_off:
          action: select.select_next 
          target:
            entity_id: select.touchscreen_deadbolt_z_wave_plus_vacation_mode
        icon_template: >-
          {% if is_state('select.touchscreen_deadbolt_z_wave_plus_vacation_mode', 'Enable') %}
            mdi:lock
          {% else %}
            mdi:lock-open
          {% endif %}