šŸ”¹ fold-entity-row - Hide away stuff in entities cards

In lovelace I have this:

  - type: entities
    show_header_toggle: false
    entities:
      - type: custom:fold-entity-row
        head: group.sensor_power_entities
        icon: mdi:power
        format: precision0

This is working, and simply results in
Schermafbeelding 2022-03-28 om 10.22.29

group.sensor_power_entities
is holding a series of sensors with the current power.

I also created a sensor to calculate the total power consumed by all these entities together.

sensor:
  - platform: template
    sensors:
      power_getotaliseerd:
        friendly_name: Power Plugs en Modules Total
        unit_of_measurement: W
        device_class: power
        icon_template: mdi:plus-box-outline
        value_template: >
          {{expand('group.sensor_power_entities')|map(attribute='state')|map('float')|sum|round(0)}}

Now, instead of ā€˜onbekendā€™ I would like to display the value of sensor.power_getotaliseerd

This makes sense, before unfolding I already see the total power.
But I canā€™t find a way how to show this because head is being used to populate the entities list after unfolding in this case, and not to define what to show on this particular line.

you could use the power sensor as head, and add the filter group option with auto-entities

like

  - type: custom:fold-entity-row
    head: sensor.power_getotaliseerd
    entities:
      - type: custom:auto-entities
        card:
          type: entities
        filter:
          include:
            - group: group.sensor_power_entities
              options:
                secondary_info: last-changed

I have that exact setup here:

  - type: custom:fold-entity-row
    <<: *scroll
    head: sensor.calculated_bruto_verbruik
    padding: 0
    entities:
      - type: custom:auto-entities
        card:
          type: entities
          card_mod: *mod
        filter:
          include:
            - group: group.switches_sensors_actueel
#              options:
#                secondary_info: last-changed
        sort:
          method: state
          numeric: true
          reverse: true

showing like:

though I do find the Sensor in the Head less appealing than the bolder section label tbh.

Thanks !
I only added this to the filter:

              exclude:
                - state: '< 1'
                - state: 'unavailable'

since my groups do have a lot of power-entities where the plug is not in use or not available.

Final result

1 Like

Iā€™m also wondering about using templating within this card. Iā€™m trying to make a fold-entity-row thatā€™s only open if an entity is ā€œonā€ ā€” is that possible? So far itā€™s not giving me errors, but itā€™s also opening the row regardless of the entityā€™s state:

type: custom:fold-entity-row
open: "{% if is_state('light.mainfloor', 'on') %} true {% else %} false {% endif %}"
head:
  entity: light.mainfloor
  name: Main Floor
  icon: mdi:sofa
entities:
  - type: custom:fold-entity-row
    head:
      entity: light.livingroom
      name: Living Room
      icon: mdi:sofa
    entities:
      - entity: light.livingroom_ceiling
        type: custom:slider-entity-row
        name: Ceiling Light
        state_color: false
        hide_when_off: true
        toggle: true
      - entity: light.brass_floor_lamp
        name: Floor Lamp
        type: custom:slider-entity-row
        state_color: false
        hide_when_off: true
        toggle: true
      - type: divider
  - type: custom:fold-entity-row
    head:
      entity: light.kitchen
      name: Kitchen
      icon: mdi:chef-hat
    entities:
      - entity: light.kitchen_sink
        type: custom:slider-entity-row
        name: Kitchen Sink
        state_color: false
        hide_when_off: true
        toggle: true
      - entity: light.breakfast
        type: custom:slider-entity-row
        name: Breakfast Table
        state_color: false
        hide_when_off: true
        toggle: true
      - type: divider
  - type: custom:slider-entity-row
    entity: light.chandelier
    name: Dining Room
    icon: mdi:silverware
    state_color: false
    hide_when_off: true
    toggle: true
  - type: custom:slider-entity-row
    entity: light.entry
    name: Entryway
    icon: mdi:door-open
    state_color: false
    hide_when_off: true
    toggle: true

Possible with config-template-card

Sometimes it could be great to allow / disallow to fold / unfold items.
This may be achieved by using card-mod.
The idea is to hide a chevron button:

type: entities
title: hidden chevron
entities:
  - entity: input_boolean.test_boolean
    name: lock unfold
  - type: custom:fold-entity-row
    card_mod:
      style: |
        div#head ha-icon {
          {% if is_state('input_boolean.test_boolean','on') %}
          display: none;
          {% endif %}
        }
    head:
      type: section
      label: More details...
      card_mod:
        style: |
          .label {
          {% if is_state('input_boolean.test_boolean','on') %}
          color: var(--disabled-text-color) !important;
          {% endif %}
          }
    padding: 15
    open: false
    clickable: false
    entities:
      - entity: sun.sun
      - entity: sun.sun

How it works:

  1. When the chevron is not hidden it can be used to fold/unfold items:
    image
    image

  2. When the chevron is hidden it cannot be used:
    image

  3. But there is a problem: if the items are unfolded and the chevron is hidden - then the items continue to be unfolded (which is wrong):
    image

Ideally when setting the ā€œlocking conditionā€ to ā€œonā€ we should unfold the items too. But I do not know any method to achieve this.

Surely we may use a config-template-card to set an ā€œopenā€ option dependingly on the same condition as described above. But then we have to list all entities in the ā€œentitiesā€ option of the config-template-card (which may be cumbersome).
Here is an example:

type: entities
title: hidden chevron
entities:
  - entity: input_boolean.test_boolean
    name: lock unfold
  - type: custom:config-template-card
    variables:
      OPEN: states['input_boolean.test_boolean']
    entities:
      - ${OPEN.entity_id}
      - sun.sun
    row:
      type: custom:mod-card
      card_mod:
        style:
          fold-entity-row $: |
            div#head ha-icon {
              {% if is_state('input_boolean.test_boolean','on') %}
              display: none;
              {% endif %}
            }
      card:
        type: custom:fold-entity-row
        head:
          type: section
          label: More details...
          card_mod:
            style: |
              .label {
              {% if is_state('input_boolean.test_boolean','on') %}
              color: var(--disabled-text-color) !important;
              {% endif %}
              }
        padding: 15
        open: '${OPEN.state === "on" ? false : true}'
        clickable: false
        entities:
          - entity: sun.sun
          - entity: sun.sun

image
image

How it works:

  1. If some condition is FALSE:
  • the chevron is visible and the items may be folded / unfolded;
  • the initial state is ā€œitems are unfoldedā€ (open: true).
  1. If some condition is TRUE:
  • the chevron is hidden and the items cannot be folded / unfolded;
  • the state is ā€œitems are foldedā€ (open: false).

A disadvantage of this method is ā€œitems should be unfolded by defaultā€.

Related issues:

Am I doing something wrong or can anyone tell me why I am getting spaces to the left of the auto-entities when included within the expand row?

Both sun entities are included in the fold. One is included via the auto-entities and one is just a plain old entity add. I seem to be getting padding on the left for any auto-entities.

I would expect with this example, both suns to be lined up since they are both part of the same fold with the same padding defined. Is this a bug? or operator error?

EDIT: Actually I see WHY. auto-entities is a card, not a row so its in the wrong place.

Suggestions on HOW to do this correctly?

Check this

Thanks but yes I tried that as well. The issue here is I am trying to combine a nested fold and then single entities. In the example the two suns really would be different entities.

This is the structure:

-> Fold 1    (correct padding)
--> Fold 2   (correct padding)
    \auto-entities\ (incorrect padding-left since this is a card and not a row)
--> entity1  (correct padding)
--> entity2  (correct padding)
--> entity3  (correct padding)

No matter how i attempt to structure the above, the left padding spacing is off for the Fold 2 since its a card and not a row. The card doesnā€™t honor the padding:0 and if auto-entities isnā€™t wrapped within a fold, it isnā€™t padded naturally.

THis is better picture of what is happening. The motion sensors are indented as if they are under the fold but they are not. The are a seperate set of entities (unfortunately contained in a dynamic card because of auto-entities. The spacing to the left of those motion entities is what should be pushed left to the same level as the ā€˜timersā€™ fold.

Have you checked that link?

Yes I checked the link. That wonā€™t work as it will do exactly the same thing.

if you use an auto-entities inside a fold use a card_mod to position the auto-entities:

  - type: custom:fold-entity-row
    card_mod: *scroll
    head:
     type: section
     label: Totaal verbruik daystart
     card_mod: *label
    padding: 0
    entities:
      - type: custom:auto-entities
        card:
          type: entities
          card_mod:
            style: |
              ha-card {
                box-shadow: none;
                margin: -16px -16px 0px -16px;
              }

btw, only using a single entity inside an auto-entities is not very usefulā€¦

1 Like

Then I do not see any horizontal padding:

type: entities
title: fold-entity-row + auto-entities
entities:
  - type: custom:auto-entities
    card:
      type: custom:fold-entity-row
      head:
        type: custom:template-entity-row
        name: Test
        icon: mdi:car
      padding: 0
      open: true
    filter:
      include:
        - entity_id: sun.*
        - entity_id: sun.*
  - sun.sun

ŠøŠ·Š¾Š±Ń€Š°Š¶ŠµŠ½ŠøŠµ

There is a bad-looking margin-top styling for the 1st folded row but this is another issueā€¦
This could be fixed by card-mod - if this issue is solved (see my comments for fold-entity-row).

P.S. Guess you are missing ā€œpadding: 0ā€ option.

That did it. Thanks a lot!

No it was an example. I have a ton of timers in the fold. Was just testing.

Youā€™re missing the outer fold. If a card (auto-entities here) is contained in the fold itā€™ll push left as you can see in my code. I have it fixed now though with card-mod.

Because the top-level fold-entity-row in your card is containing auto-entities - but you were advised to change it.
Of course, if fold-entity-row contains ā€œentities cardā€ you will have horizontal paddings, then card-mod is the only way.
Actually, in your position, with so many rows & many folded lists, I would choose a ā€œfold-entity-row contains an auto-entiiesā€ schema with card-mod (+scrollbars) too.

If I remove the top level fold then I canā€™t create two folds with different entities nested like in my example along with auto-entities.

Iā€™m not sure what that means. I understand the scrollbar mention but not what else you meant there.

It is possible, but with a help of vertical stack w/o margins.
Just place auto-generated 2-levels lists in a stack.
Here is an example of a list of groups:

        type: custom:auto-entities
        card:
          type: custom:fold-entity-row
          head:
            type: section
            label: All groups
          padding: 0
          open: true
        unique: true
        show_empty: true
        filter:
          include:
            - domain: group
              options:
                type: custom:auto-entities
                card:
                  type: custom:fold-entity-row
                  head:
                    entity: this.entity_id
                  padding: 0
                  open: false
                unique: true
                show_empty: true
                filter:
                  include:
                    - group: this.entity_id

Imagine that you have many similar lists placed in a stack (stack-in-card, for instance).

vertical-stack will give the same issue. The vertical stack canā€™t be placed under the fold-entity-row without something like custom:hui-element (if this is done, you have the same issue). If the vertical stack is placed at the top most level, you still need to nest the fold/auto-entities just the way I have them.

The end result should look like I have it now in the screenshot above. Do you have an example using vertical stack that produces that result?