🔹 fold-entity-row - Hide away stuff in entities cards

e-raser · August 6, 2021, 8:22pm

I´m looking for a similar thing:

Inside an entities card I use several fold-entitiy-row cards each containing one custom:auto-entities card. At the end I want to visualize all open devices, sorted by doors, windows, garage doors etc.

Example for one part:

  - type: custom:fold-entity-row
    head:
      type: section
      label: Fenster (Windows)
    padding: 0
    open: true
    group_config:
      state_color: true
    entities:
      - type: custom:auto-entities
        card:
          type: entities
          title: ''
          state_color: true
          show_header_toggle: false
        entities: []
        filter:
          include:
            - domain: binary_sensor
              attributes:
                device_class: window
              state: 'on'
              options:
                secondary_info: last-changed
        show_empty: false
        unique: true
        sort:
          method: state
          reverse: false

As you can see when there are no devices open, the fold-entity-row section takes a lot of space.

How to hide a fold-entity-row, if there´s currently no entity (delivered by custom:auto-entities) inside it to show?

Of course I could just nest all the custom:auto-entities cards inside one entities card and simply use the title option. BUT the title takes just too much space, while text size of the fold-entity-row header ist just perfect. And I try to avoid using card-mod/mod-card to hack title size. Any other idea or recommendation?

Update: I implemented my own idea () and replaced fold-entity-row by auto-entities, and modded auto-entities cards title with card-mod. So still 2 great @thomasloven frontend tools in use, I only lost the original fold feature of fold-entity-row of course - as I don´t need that here it´s okay. Final result and pretty happy with that:

Anyway / to sum up:

I´d strongly vote for a “hide header if there´s no content to show” option for fold-entity-row!

MrThiemann · August 25, 2021, 5:34am

Hey,
is there also a way I can integrate my logbook here?

type: logbook
entities:
  - script.justin_sleep_modus
  - script.justin_wach_modus
hours_to_show: 24

chris1601 · September 15, 2021, 10:59am

Hi there,
first off all I have to say that I love this card. Good work. Thank you.

Now I stumbled upon a small Problem. I have the following card set up:

type: entities
entities:
  - type: custom:fold-entity-row
    head: light.hue_haus
    open: false
    entities:
      - entity: light.hof_links
      - entity: light.hof_rechts
      - entity: light.hue_dach_einfahrt
title: Hausbeleuchtung

As you can see i have a general switch light.hue_haus which turns on all the entities listed below.
Is there any way to rename the switch in the header? it shows as “hue_haus” and I’d like to show it as “Hausbeleuchtung” like in the title.
Unfortunately I cant rename the entity due to my naming scheme.

any help would be appreciated. keep up the good work.

many thanks from Germany

Chris

p.s.:
i tried:

type: entities
entities:
  - type: custom:fold-entity-row
    head: light.hue_haus
      label: Haus
    open: false
    entities:
      - entity: light.hof_links
      - entity: light.hof_rechts
      - entity: light.hue_dach_einfahrt
title: Hausbeleuchtung

with no effect.

potts-mike · September 17, 2021, 2:30am

Is there a way to make the carrot that expands the row larger?

Ildar_Gabdullin · September 18, 2021, 10:14am

By using card-mod

draso · November 5, 2021, 8:10pm

Hi Thomas, this card is great! Thanks!
I was wondering if there is a way to “override” the tap_action? I am trying to acomplish a foldable menu. If i click on the header line (e.g. Ground Floor) it should navigate to view 1, but if I click on the expand button, it should unfold and show me the rooms in it which I can then also navigate to e.g. “1#kitchen”
The second part works, what I am not able to do, is trigger navigation by clicking on the label.
Any help would be much appreciated.
Cheers

jerrydiaz11 · December 15, 2021, 7:54pm

Hi All–

I’m not certain if this is even possible. I tried multiple configs and variations of the “- type: custom” per the Misc tricks Github link, but I think what I’m going for might be beyond the scope of what using “custom” will process.

What I’d like to do is insert a few Conditional Cards within fold-entity-row(s) (essentially, replacing the list of “entities:”). The bottom section of the attached screenshot contains controllers for automatic door answering for deliveries. I don’t have the system on all the time but I do utilize the top section’s controllers regularly. In the interest of both aesthetics and preventing an accidental trigger, I’d like to hide these settings as the default.

The reasoning for Conditional Cards is:

Received should only display when Scheduled is not off,
both Scheduled and Received should be hidden if Auto-Buzz is turned off.
Scheduled alternates between an input-select and an input-number because I have settings for “Unlimited”, “Auto-Welcome” and off … it flips to the numeric instance when I select “Custom” from the dropdown (which makes for a cleaner interface that doesn’t have a hard limit on the schedule and allows for more reliable incrementing/decrementing).

Am I wishing for the impossible or might there be a way to achieve this with fold-entity-rows?
Thanks for any guidance you may be able to offer.

sirfrogman · January 1, 2022, 6:14pm

Great capability. Thank you. The same thing happened to me as with “dressoir_all” image. The examples provided show this structure, so it’s easy to see how someone could think that the first line is required. After futzing around, I noticed this post.

jerrydiaz11 · January 11, 2022, 9:54pm

Would someone please at least tell me if it is indeed possible or not to do what I’m asking so that I may figure out an alternative plan? My heart is really set on what I described but if it’s not possible for folding entities to contain conditional cards, I’ll move on. Thank you.

Mariusthvdb · January 11, 2022, 11:06pm

sure, a fold can contain anything you can regularly show on a row, what that you tried didn’t work?

the options are endless. you could even template the whole card config, or use state-switch, or, as a last resort (more bare bones than the other options), the core conditional card

Alesoft73 · March 7, 2022, 10:15am

Hi all…
Do you have any idea why I risk changing the color of the LABEL in firefox, but in chrome it doesn’t work?

Thanks!

      - type: custom:fold-entity-row
        head: 
          type: section
          label: "Show Settings"
          style: |
            .label {
              margin-left: 0px;
              color: red;
              }

jeremypsl · March 7, 2022, 10:28am

Just to say i love this mod !

Ildar_Gabdullin · March 8, 2022, 10:06pm

Because styles should not be used by “just copy-paste” method.
Always use Code Inspector and see if the style is applied or not.
In your particular case - use !important.

pimp1310 · March 24, 2022, 6:32pm

hello,

is it possible to align the card in the fold card the same side left?

type: entities
card_mod:
  style: |
    ha-card {
      margin: 0px 0px 0px 0px;
      background: none;
      border: none!important;
      
    } 
entities:
  - type: custom:fold-entity-row
    head:
      type: section
      label: Alle Lampen
    entities:
      - type: custom:auto-entities
        show_empty: true
        card:
          type: entities
        filter:
          include:
            - group: group.active_lights

EDIT

okay, who can read is at an advantage

padding: 0px

does the job

ygeffens · March 28, 2022, 8:31am

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

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.

Mariusthvdb · March 28, 2022, 8:48am

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.

ygeffens · March 28, 2022, 9:32am

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

alpacalypse · March 31, 2022, 4:50pm

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

Ildar_Gabdullin · March 31, 2022, 7:07pm

Possible with config-template-card

Ildar_Gabdullin · April 4, 2022, 10:00pm

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:

When the chevron is not hidden it can be used to fold/unfold items:
When the chevron is hidden it cannot be used:
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):

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

How it works:

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).

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:

github.com/thomasloven/lovelace-fold-entity-row

hide the exband-button

opened 07:43PM - 01 Apr 22 UTC

YvesZH

enhancement

I have new idea (workarround) about the placement of the "exband-button"(future… request #119 1. the future request "expand&close by a other entity" is being expected (future request #173 ) 2. the user can make a input_bolean 3. the user can set an icon with the [paper-buttons-row](https://github.com/jcwillox/lovelace-paper-buttons-row) on the left on the toggles-switch (or everywhere he like in the lovelace panel) 4. the only thing that is additionally expected: the option to hide the exband-button **Config example:** ``` type: entities entities: - type: custom:fold-entity-row open: entity condition_entity: input_boolean.exband condition_state: "on" hide_exband_button: true entities: - light.bed_light` ```