Add custom filtered attributes (was: Fix More-info)

[Mariusthvdb]

when HA Lovelace changed the more-info dropdown, we managed to adapt custom-ui to act upon attributes panel expansion:

custom-ui/custom-ui.js

Line 86 in 14e7bcb

// New for HA 2021.6: the logic only gets triggered when the ha attributes panel is expanded, but not when it gets closed.

            updateMoreInfo(ev) {
                if (!ev.detail.expanded) {
                    return;
                }

custom-ui can set the customization:

hide_attributes:
  - templates

to not show the templates, this can however have an ugly side effect, if and when no attribute is left to show.

in Lovelace core, there's a filter that selects which attributes to show (see: https://github.com/home-assistant/frontend/blob/2d5ae78521c4e3f8a8af410aef347b2eebe4d032/src/components/ha-attributes.ts#L47 and https://github.com/home-assistant/frontend/blob/7bc27082595f943d15ca35ae948c766184a93eed/src/util/hass-attributes-util.ts#L87) and if the list is empty, doesnt show the dropdown. Ideally custom-ui should be able to add eg templates to that list, so Lovelace itself calculates the dropdown box to show or not.

Still looking for a way to achieve this, so, if you have any thoughts, please check in and help?

below should be helpful, but I can not make the queryselector find the correct path

const jouwFilters = "attribute1, attribute2, attribute3"
const haAttributes = querySelector("ha-attributes");
haAttributes.extraFilters = haAttributes.extraFilters + (haAttributes.extraFilters.length ? "," : "") + jouwFilters;

thanks!

[Mariusthvdb]

see https://github.com/Mariusthvdb/custom-more-info and https://github.com/Mariusthvdb/custom-attributes