Decluttering card template with variable

Configuration
1

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
2

I figured it out. I’ll post solution soon

3

Hello @kwalkington, can you post the solution?

thanks.

4

I know it’s been a long time but @kwalkington can you post your solution? @rodrigorsdev did you by chance figure out the solution?

5

It has been awhile so I don’t remember all of it, and I’m away from my system now but I just copied some code which appears to be what you need. Create a variable in the custom button and then reference that variable.

var_icon_value_s: |
          [[[
            if ('[[entity_icon_value]]' == "")
              return "";
            else
              var var_icon_value_s = states['[[entity_icon_value]]'].state;
              if (states['[[entity_icon_value]]'].state == "off")
                return "";
              else              
                return var_icon_value_s;
          ]]]
1 Like
6

Thanks but I found a way to get it to work.

I was trying to pass a variable to the defaultTabIndex option of a custom:tabbed-card that was inside of a custom:mod-card that I was using to style it and all of it was inside of the custom:decluttering-card. I was basically trying to use an input_text helper for the value that set the default tab. Then I used a pop-up on the frontend to change it in order to avoid having to change the yaml. For some reason every time I tried the tabs would go blank.

After a couple days of trying different things and then finally going back to the basics, I realized a custom:stack-in-card' I was using was causing it. I have no idea why but when I used the custom:vertical-stack-in-cardeverything worked. I've noticed thecustom:tabbed-cardand thecustom:stack-in-card’ both sometimes behave weird when used with other cards.

I wish that some of these more popular cards on HAC would be integrated into HA as standard cards. Users make these great cards for HAC but then for whatever reason they become abandoned and no longer kept up-to-date. I understand it’s not the fault of the creators of HA but if a card is being used by a certain amount of HA users then maybe come up with some type of program that when it reaches a certain use the card becomes standard and maintained by HA with the originally creator maybe still somehow having access? Idk. It just seems advantageous to everyone. Maybe I’ll submit the idea.

Either way thanks for the help. I didn’t end up using a template like you did because it turned out to be easier than that after I found out what was causing the problem but I’m going to try it just to see how it works. Thanks again.

1 Like