Using Variables in Custom Button Cards

JeremyJvR · June 24, 2023, 10:05am

Good day All,

I have the following code for a custom button card and would like to know if there is a way to define and use variables for the switches, binary sensors and icons? As the idea is to create a few of these buttons.

show_label: true`
type: custom:button-card
entity: switch.front_door1_bypass_home

  
icon: |
  [[[
    if (states['binary_sensor.front_door1_home'].state == 'off' &&
        states['switch.front_door1_bypass_home'].state == 'off')
      return 'mdi:door-closed-lock';
    else if (states['binary_sensor.front_door1_home'].state == 'on')
      return 'mdi:door-open';
    else if (states['switch.front_door1_bypass_home'].state == 'on')
      return 'mdi:door-closed-lock';
    else
      return null;
  ]]]
  
label: |
  [[[
    if (states['binary_sensor.front_door1_home'].state == 'off' &&
        states['switch.front_door1_bypass_home'].state == 'off')
      return 'Ready';
    else if (states['binary_sensor.front_door1_home'].state == 'on')
      return 'Not Ready';
    else if (states['switch.front_door1_bypass_home'].state == 'on')
      return 'Bypassed';
    else
      return null;
  ]]]
  
name: Fr Door

styles:
  card:
    - width: 100px
    - width: 100px
    
  icon:
    - color: |
        [[[
          if (states['binary_sensor.front_door1_home'].state == 'off' &&
              states['switch.front_door1_bypass_home'].state == 'off')
            return 'green';
          else if (states['binary_sensor.front_door1_home'].state == 'on')
            return 'red';
          else if (states['switch.front_door1_bypass_home'].state == 'on')
            return 'blue';
          else
            return 'black';
        ]]]
    - width: 35%
    
  name:
    - font-size: 13px
    - text-transform: capitalize
    - color: "black"
    
  label:
    - font-size: 10px
    - color: |
        [[[
          if (states['binary_sensor.front_door1_home'].state == 'off' &&
              states['switch.front_door1_bypass_home'].state == 'off')
            return 'green';
          else if (states['binary_sensor.front_door1_home'].state == 'on')
            return 'red';
          else if (states['switch.front_door1_bypass_home'].state == 'on')
            return 'blue';
          else
            return null;
        ]]]```

Thanks

jchh · June 24, 2023, 10:15am

Would you mind formatting the code by using 3 back-ticks (```) on the line above and 3 back-ticks on the line below your code? This makes it so much easier for us to read and understand.

Thanks!

Edit:
By the way, I create my ‘standard’ buttons by putting the custom:button-card inside a custom:decluttering-card and using those variables (works both inside and outside the javascript). Happy to share an example if you are interested.

JeremyJvR · June 24, 2023, 10:29am

Thanks I hope the edit is correct, sorry I am very new to HA and JS coding.

I would really appreciate it if you can share the code, that will help a hell of a lot.

jchh · June 24, 2023, 10:33am

perfect and no need to apologise.

jchh · June 24, 2023, 10:41am

OK, here’s an example of a custom:button-card within a decluttering_template called 'info_button. The yaml file it sits in is called "info_button" because my templates are defined by the following line which is above (and at the same level as views:`:

decluttering_templates: !include_dir_named decluttering_templates/

Note I used a bunch of defaults so I don’t have to define every variable every time I use the card. I use this to make it easy to define a theme for my dashboard as changing this template changes them all.

default:
  - show_name: true
  - name:
  - show_icon: true
  - icon:
  - colour: yellow
  - attribute: false
  - on_value: 'on'
  - on_operator: '=='
  - on_icon:
  - on_label:
  - off_value: 'off'
  - off_operator: '=='
  - off_icon:
  - off_label:
  - action: none

card:  
  type: custom:button-card
  entity: "[[entity]]"
  show_name: '[[show_name]]'
  name: '[[name]]'
  show_icon: '[[show_icon]]'
  icon: '[[icon]]'
  size: 30px
  color: auto
  show_state: '[[show_state]]'    # no clue why I can;t use a template here
  show_label: "[[[ if ( [[attribute]] != false ) return 'true'; ]]]"
  label: "[[[ return entity.attributes.[[attribute]] ]]]"
  styles:
    card:
      - font-size: 15px
      - color: grey
    name:
      - color: grey
    icon:
      - color: grey
    state:
      - color: '[[colour]]'
    label:
      - color: '[[colour]]'
  state:
    - value: '[[on_value]]'
      operator: '[[on_operator]]'
      icon: '[[on_icon]]'
      label: '[[on_label]]'
      styles:
        state:
          - color: '[[on_colour]]'
        icon:
          - color: '[[on_colour]]'
        label:
          - color: '[[on_colour]]'        
    - value: '[[med_value]]'
      styles:
        state:
          - color: Orange
        icon:
          - color: Orange
    - value: '[[off_value]]'
      operator: '[[off_operator]]'
      icon: '[[off_icon]]'
      label: '[[off_label]]'
      styles:
        state:
          - color: '[[off_colour]]'
        icon:
          - color: '[[off_colour]]'
        label:
          - color: '[[off_colour]]'        
     
  tap_action:
    action: "[[action]]"
    navigation_path: "[[navigation_path]]"

  hold_action:: none
  double_tap_action: none

Here are a couple of examples calling that template.

- type: custom:decluttering-card
  template: info_button
  variables:
    - entity: sensor.weather_temp
    - name: Temp is
    - icon: mdi:thermometer
    - colour: white

- type: custom:decluttering-card
  template: info_button
  variables:
    - entity: binary_sensor.hive_hub_status
    - name: Hub is
    - show_icon: false
    - on_value: 'on'
    - on_colour: green
    - off_value: 'off'

Hope this helps.

[edited for typos]

JeremyJvR · June 24, 2023, 10:49am

Awesome, thank you so much.

So the way I read this is that the code I posted earlier would become a “Template” then when calling the template I will define the variables an viola it should work? Now my big question, where and how would I create the template?

jchh · June 24, 2023, 11:02am

yes!

Well, you can see from my example that the template is 90% just the custom:button-card, so take a look at it and read up on custom:decluttering-card. Pop back if you have questions after that.

JeremyJvR · June 24, 2023, 11:14am

Thanks, let me try

arganto · June 24, 2023, 4:27pm

Did you check the docs from the card? Config templates and variables are build in functions already.

JeremyJvR · June 25, 2023, 10:39am

I did yes, maybe I am just stupid or don’t understand. But it makes no sense to me. I really don’t understand how or where to configure these templates.

jbrande · September 11, 2024, 4:00pm

How did you managed to have decluttering template in a split config?

jchh · September 11, 2024, 4:27pm

My dashboards are in yaml mode and my ui-lovelace.yaml looks like this:

kiosk_mode:
  user_settings:
    - users:
        - "Admin"
      ignore_entity_settings: true
  entity_settings:
    - entity:
        input_boolean.kiosk_mode: "on"
      kiosk: true

decluttering_templates: !include_dir_named JCHH/dashboards/decluttering_templates/
views:                  !include_dir_list JCHH/dashboards/-dashboard/

Then jchh/dashboards/-deshboard/ has a file for every view. The header looks like this:

title: Overview
path: home
icon: mdi:monitor-dashboard

type: custom:grid-layout
layout: !include ../layout/layout-3.yaml
cards:
[...]

The same is true for JCHH/dashboards/decluttering_templates. Each file is a decluttering template and looks like the once I posted above.

[edited for typos]