Help with dynamic warning card for one or more entities (or: How do you combine filter + declutter + template + button cards)?

Hi Folks,

I am having trouble getting together a card that will serve as a notification for certain events that could result from changes in zero, one or multiple entities meeting certain criteria:

  • If no entities match the criteria, the card should not show.
  • In the event that a single entity meets the criteria, I want the warning card to show the specific entity with the issue.
  • In the event of multiple, it should display a aggregate message, for example “3 doors are opened”.

Working example (WIP from a design/look POV):
Screen Shot 2023-01-16 at 9.41.51 PM

I have a almost working example, but even though it looks like it works, I get continuous javascript errors in the console. It looks like the template-card is assuming the entities are a template. The javascript error is:

Uncaught (in promise) TypeError: template.includes is not a function
    _evaluateTemplate config-template-card.js:883

The lines near the code that cause the error:

evaluateTemplate(template) {
        if (!template.includes('${')) {
            return template;
        }

Debugging the above error, it shows that the entities I pass in as a list is getting into this code-flow. Obviously the sensor entity does not have an includes method, which is why the error shows up.

Below is my current relevant lovelace config for the de-clutter template and button-card templates. A key thing to point out, in case it’s not obvious, I always want either a single card or no card showing up, regardless of how many entities are in the category. Some example of what I want to use this card for are: “Door locks with less than X% battery”, “Open doors greater than 5 mins”, etc.

OK, my config that is working functionally, but has errors in the console is:

decluttering_templates:
  notify_card:
    default:
      - card_color_hex: '#FF8A65'
      - title: My notification
    card:
      type: entity-filter
      state_filter:
        - operator: '[[filter_op]]'
          value: '[[filter_value]]'
      entities: '[[entities]]'
      show_header_toggle: false
      show_empty: false
      card:
        type: custom:config-template-card
        variables:
          entity_cnt: |
            _ => {
              return this.___config.entities.length;
            }
          button_template: |
            _ => {
              let entity_cnt = this.___config.entities.length;
              return entity_cnt == 1 ? 'notify_single_entity' : 'notify_multiple_count';
            }
          entity: |
            _ => {
              return this.___config.entities[0].entity;
            }
        card:
          type: custom:button-card
          entity: ${ entity() }
          template: ${ button_template() }
          label: '[[title]]'
          variables:
            card_color: '[[card_color_hex]]'
            name_regex_remove: '[[name_regex_remove]]'
button_card_templates:
  base_notify:
    variables:
      bg_hex_opacity: dd
    color: '#ff9d0a'
    show_state: true
    show_label: true
    styles:
      name:
        - color: white
      state:
        - color: white
      icon:
        - color: white
      label:
        - font-weight: 500
        - font-size: 22px
      card:
        - background-color: '[[[ return variables.card_color + variables.bg_hex_opacity ]]]'
        - border-radius: 10px
        - '--mdc-ripple-color': whitesmoke
  notify_single_entity:
    template:
      - base_notify
    name: |
      [[[
        let name = entity.attributes.friendly_name;

        if (variables.name_regex_remove) {
          name = name.replace(new RegExp(variables.name_regex_remove, 'i'), '');
        }
        return name;
      ]]]
    styles:
      grid:
        - grid-template-areas: |
            "i s"
            "n n"
            "l l"
        - grid-template-columns: 1fr 1fr
        - grid-template-rows: 1fr 1fr
      icon:
        - width: 34px
      state:
        - font-weight: 500
      name:
        - font-size: 14px

And example card instance using above template:

type: custom:decluttering-card
template: notify_card
variables:
  - filter_op: <=
  - filter_value: '60'
  - title: Low Battery
  - name_regex_remove: \\s*Battery level
  - entities:
      - sensor.garage_door_battery_level
      - sensor.backdoor_battery_level
      - sensor.frontdoor_battery_level
      - sensor.laundry_door_battery_level

Some other notes:

  • This seems to work with no errors–if I don’t use decluttering templates–but obviously I want many of these possible warning cards to show up, so am looking to be as DRY as possible.
  • I have tried using auto-entities instead of entity-filter, but get the same error.
  • I am aware that the documentation doesn’t really suggest that the declutter-card supports arrays, but it does seem to work pretty close (besides the code somehow thinking the entities are templates).
  • As I said, the card works functionally - but I am very wary of having this error show up on every entity update in the console.
1 Like

I have temporarily removed the error by making the below modification to the config-template-card javascript, but it will be wiped when template-config-card is updated via HACS.
Would prefer an alternative by anyone else here!