Lovelace: Multiple entity row

According to the documents, the hide_if should work for both the main entity as well as the secondary.

See this link to the main entity documentation:

And this link to the secondary documentation:

Wrong, the 1st link is for secondary entities, the 2nd is for “secondary_info” for the main entity.

1 Like

OK. Well, that isn’t stated explictly, but I’ll take this for true. I’ll move on and use another way to filter entities. :slight_smile:

This is what I ended up with, cleanly:

type: entity-filter
entities:
  - entity: sun.sun
    name: Zon op
    state_filter:
      - below_horizon
    type: custom:multiple-entity-row
    attribute: next_rising
    format: relative
    icon: mdi:weather-sunset-up
  - entity: sun.sun
    name: Zon onder
    state_filter:
      - above_horizon
    type: custom:multiple-entity-row
    attribute: next_setting
    format: relative
    icon: mdi:weather-sunset-down

Did you ever found a solution for this? I have the same problem…

If I have more entities they will be on the right side and not seen… I would like to center all these entities. Is that possible?

My code:

entity: sensor.nordpool_kwh_se3_sek_3_095_0
icon: none
type: custom:multiple-entity-row
name: false
state_header: Spotpris
format: precision2
unit: sek/kWh
entities:
  - entity: sensor.pool_heater_power
    format: precision0
    name: Förbr/nu
    unit: watt
  - entity: sensor.daily_energy_peak
    format: precision2
    name: Förbr/idag
  - entity: sensor.monthly_energy_peak
    format: precision2
    name: Förbr/mån

Probably with some card-mod magic. @ Ildar_Gabdullin is your first go to expert for that :slight_smile: Probably there already is an example for that.

1 Like

For example:

type: entities
entities:
  - type: custom:multiple-entity-row
    entity: sun.sun
    name: ''
    entities: &ref_0
      - entity: sensor.memory_free
        name: free
      - entity: sensor.memory_use
        name: use
      - entity: sensor.memory_total
        name: total
  - type: custom:multiple-entity-row
    entity: sun.sun
    name: ''
    entities: *ref_0
    card_mod:
      style:
        hui-generic-entity-row $: |
          state-badge,
          .info {
            display: none;
          }
        .: |
          hui-generic-entity-row {
            justify-content: center;
          }
  - type: custom:multiple-entity-row
    entity: sun.sun
    name: ''
    entities: *ref_0
    card_mod:
      style:
        hui-generic-entity-row $: |
          state-badge,
          .info {
            display: none;
          }
        .: |
          hui-generic-entity-row {
            justify-content: center;
          }
          .entities-row .entity {
            margin-right: 12px !important;
            margin-left: 12px !important;
          }

image
Next tune it up by yourself…

3 Likes

Great, thanks! You should link that post in your collection (multiple-entity-row) so people will find it again easily.

Was done already )))
image

1 Like

Is it possible to have an input_select in a multiple-entity-row that behaves like it should? For example, a normal input_select in an entities card has this behavior (simply click and select from the menu):
image

But when I put it into a multiple-entity-row card, when I click on it, it brings up a popup menu here:
image
where I then I have to select the time and close out of it. A lot more clicks than the normal behavior for an input_select. Just curious if it’s possible, or if not, if there’s a way it could be added? Thanks

Create an issue on GitHub, ask the Dev to implement a support of input_select.
Otherwise think about using something like custom:stack-in-card.

Is it possible to hide the icon and the space of the icon but still display the name of the sensor? Your example from above from april this year does not work for me.
What I want is, on the left side the name (ex.: Livingroom), blank space and on the right side all the entities of i choose to add.

Post a picture from MS Paint or smth similar as a draft.

Which example exactly?

Thank you for your fast reply! This is a picture d05f8e9c8156a88b9a1fa1ad943a5e8e1ec5ac88

This reply from april 21 Lovelace: Multiple entity row - #129 by Ildar_Gabdullin (I don’t know how to link to a different reply inside a reply).

That example still valid:

Yes, you are right, I am sorry. It did not work for me, because my style looks like this

  - entity: sun.sun
    type: custom:multiple-entity-row
    name: Küche
    state_header: null
    secondary_info: null
    style: |
      :host .entity {
          color: #bf0056
        }
          div.entity:nth-child(1) state-badge {
            color: red;
        }
          div.entity:nth-child(2) state-badge {
            color: red;
        }
          div.entity:nth-child(3) state-badge {
            color: red;
        }
          div.entity:nth-child(4) state-badge {
            color: red;
        }

How do I add the state-bade thing here?

  1. There is no need to use card-mod to set a static color for secondary entities (i.e. entities on the right side of the row). Use “styles” option with a required style.
  2. Wrong indentation in your code. Check card-mod examples for a correct indentation.

So, first remove useless and wrong code. Then come back to add that “state-badge thing”.

  1. I do not have card-mod in my example, or do I miss something?
  2. Do you mean the space before div.entity…? I corrected it, but if was working like this.

I don’t know what you mean by useless code. I need the div.entity… stuff for further entities. This is a working example:

type: entities
title: null
entities:
  - entity: sun.sun
    icon: hass:none
    type: custom:multiple-entity-row
    name: Wohnzimmer
    state_header: null
    secondary_info: null
    style: |
      :host .entity {
          color: #bf0056
        }
        div.entity:nth-child(1) state-badge {
            color: red;
        }
        div.entity:nth-child(2) state-badge {
            color: red;
        }
        div.entity:nth-child(3) state-badge {
            color: red;
        }
        div.entity:nth-child(4) state-badge {
            color: red;
        }
    entities:
      - entity: sun.sun
        icon: mdi:weather-sunny
        name: false
        hide_if: 'off'

The problem is, that I don’t know how to combine the style: | with your state-badge thing, which does not have a | after style:. If I omit the |, I get the error message “can not read a block mapping entry; a multi line key may not be an implicit key”.

Card-mod code starts with “style”.
You should at least read card-mod docs on GitHub.
Indentation problem also remains.
Also, read about a “styles” option for multiple-entity-row.

I see, I thought you meant the exact card_mod: line. I did read the GitHub docs for card-mod, but the wiki there leads to a nice, extensive post from you.

I olny reduced my card to this example with a single color, so it is easier to read. My original card has 10 different colors depending on a temperature sensor. Here is a simple example.

type: entities
title: null
entities:
  - entity: sun.sun
    icon: hass:none
    type: custom:multiple-entity-row
    name: Wohnzimmer
    state_header: null
    secondary_info: null
    style: |
      :host 
        .entity {
          color:   
              {% if is_state('sun.sun', 'above_horizon') %}
                #bf0056
              {% elif is_state('sun.sun', 'below_horizon') %}
                #268bd2
              {% endif %};
        }
        div.entity:nth-child(1) state-badge {
            color: red;
        }
        div.entity:nth-child(2) state-badge {
            color: red;
        }
        div.entity:nth-child(3) state-badge {
            color: red;
        }
        div.entity:nth-child(4) state-badge {
            color: red;
        }
    entities:
      - entity: sun.sun
        icon: mdi:weather-sunny
        name: false
        hide_if: 'off'

Screenshot_20220216_115836

And there I still want to get rid of the space before “Wohnzimmer”.

I still don’t know what you mean by “indentation problem”. My code is working for me.

Edit:
Changed the above code to the hopefully correct identation.

First - let’s call the “left” entity as the “main entity” (for which we may display a state on the last right column), all right entities - “secondary entities”.

  1. You got ONE secondary entity - but you specified card-mod styles for FOUR secondary entities.

  2. For secondary entities you may use a “styles” option (no card-mod required) to set a color and some other CSS properties:

    entities:
      - entity: sensor.xxxxxxx
        styles:
          width: 80px
          text-align: left
          color: red

or

        styles:
          --paper-item-icon-color: red

This is a good choice if styles (colors etc) are static. If they are dynamic (depend on some conditions) then you should either place the whole row inside config-template-card (supports JS) or use card-mod (supports jinjia2).

  1. If you need to color the main entity’s state you may use the “styles” option:
  - type: entities
    entities:
      - type: custom:multiple-entity-row
        entity: sensor.cleargrass_1_co2
        entities: &ref_entities
          - entity: sun.sun
          - entity: sun.sun
        name: Colored state
        show_state: true
        state_header: CO2
        styles:
          color: magenta
          --secondary-text-color: cyan
      - type: custom:multiple-entity-row
        entity: sensor.cleargrass_1_co2
        entities: *ref_entities
        name: Colored state
        show_state: true
        styles:
          color: magenta

image

Or card-mod:

type: entities
entities:
  - type: custom:multiple-entity-row
    entity: sensor.cleargrass_1_co2
    card_mod:
      style: |
        .state.entity {
          color: magenta;
        }
        .state.entity span {
          color: cyan;
        }
    entities: &ref_entities
      - entity: sun.sun
      - entity: sun.sun
    name: Colored state
    show_state: true
    state_header: CO2
  - type: custom:multiple-entity-row
    entity: sensor.cleargrass_1_co2
    card_mod:
      style: |
        .state.entity {
          color: magenta;
        }
    entities: *ref_entities
    name: Colored state
    show_state: true

image

  1. As for indentation - check other card-mod examples, see the basic rules.

  2. The "hide_if" is meaningless here:

      - entity: sun.sun
        icon: mdi:weather-sunny
        name: false
        hide_if: 'off'

since states('sun.sun') is never off.

  1. This code may cause errors:
          color:   
              {% if is_state('sun.sun', 'above_horizon') %}
                #bf0056
              {% elif is_state('sun.sun', 'below_horizon') %}
                #268bd2
              {% endif %};

since you have not provided a “default path” (no “else” is provided).

  1. The minimal code is (“styles” for a state & secondary entity’s icon, “card-mod” to hide the main entity’s icon):
  - type: entities
    entities:
      - type: custom:multiple-entity-row
        card_mod:
          style:
            hui-generic-entity-row:
              $: |
                state-badge {
                  display: none;
                }
        entity: sensor.cleargrass_1_co2
        entities:
          - entity: sun.sun
            name: false
            icon: true
            styles:
              --paper-item-icon-color: red
        name: xxxxxxxxx
        show_state: true
        styles:
          color: magenta

image