Lovelace: Multiple entity row

I love this card for my main (large screen) dashboard, and have been trying to adapt to tablet/mobile view. Is there any way to have just a row of toggles, with no icon and label on the left side - so more toggles will fit?
toggles

Row one - 4 columns
Row two - 5 columns
Row three - 6 columns
Row four - 6 columns (blank name, blank icon)
Row five - 7 columns (blank name, blank icon)
Row six - 7 columns (blank name, removed icon)

But removing the main icon may not help - depends on “3 or 4 columns of cards are displayed”.

image

type: entities
entities:
  - type: 'custom:multiple-entity-row'
    entity: sun.sun
    entities:
      - entity: sun.sun
        styles:
          width: 50px
      - entity: sun.sun
        name: false
        icon: true
        styles:
          width: 30px
      - entity: sun.sun
        toggle: true
        styles:
          width: 50px
    name: ''
    show_state: true
    styles:
      width: 50px
  - type: 'custom:multiple-entity-row'
    entity: sun.sun
    entities:
      - entity: sun.sun
        styles:
          width: 50px
      - entity: sun.sun
        name: false
        icon: true
        styles:
          width: 30px
      - entity: sun.sun
        toggle: true
        styles:
          width: 50px
      - entity: sun.sun
        toggle: true
        styles:
          width: 50px
    name: ''
    show_state: true
    styles:
      width: 50px
  - type: 'custom:multiple-entity-row'
    entity: sun.sun
    entities:
      - entity: sun.sun
        styles:
          width: 50px
      - entity: sun.sun
        name: false
        icon: true
        styles:
          width: 30px
      - entity: sun.sun
        toggle: true
        styles:
          width: 50px
      - entity: sun.sun
        toggle: true
        styles:
          width: 50px
      - entity: sun.sun
        toggle: true
        styles:
          width: 50px
    name: ''
    show_state: true
    styles:
      width: 50px
  - type: 'custom:multiple-entity-row'
    entity: sun.sun
    entities:
      - entity: sun.sun
        styles:
          width: 50px
      - entity: sun.sun
        name: false
        icon: true
        styles:
          width: 30px
      - entity: sun.sun
        toggle: true
        styles:
          width: 50px
      - entity: sun.sun
        toggle: true
        styles:
          width: 50px
      - entity: sun.sun
        toggle: true
        styles:
          width: 50px
    name: ' '
    icon: 'mdi:blank'
    show_state: true
    styles:
      width: 50px
  - type: 'custom:multiple-entity-row'
    entity: sun.sun
    entities:
      - entity: sun.sun
        styles:
          width: 50px
      - entity: sun.sun
        name: false
        icon: true
        styles:
          width: 30px
      - entity: sun.sun
        toggle: true
        styles:
          width: 50px
      - entity: sun.sun
        toggle: true
        styles:
          width: 50px
      - entity: sun.sun
        toggle: true
        styles:
          width: 50px
      - entity: sun.sun
        toggle: true
        styles:
          width: 50px
    name: ' '
    icon: 'mdi:blank'
    show_state: true
    styles:
      width: 50px
  - type: 'custom:multiple-entity-row'
    entity: sun.sun
    style:
      hui-generic-entity-row:
        $: |
          state-badge {
            display: none;
          }
    entities:
      - entity: sun.sun
        styles:
          width: 50px
      - entity: sun.sun
        name: false
        icon: true
        styles:
          width: 30px
      - entity: sun.sun
        toggle: true
        styles:
          width: 50px
      - entity: sun.sun
        toggle: true
        styles:
          width: 50px
      - entity: sun.sun
        toggle: true
        styles:
          width: 50px
      - entity: sun.sun
        toggle: true
        styles:
          width: 50px
    name: ' '
    icon: 'mdi:blank'
    show_state: true
    styles:
      width: 50px
1 Like

Thanks for posting the examples, very helpful. Still having issues on mobile - it cuts off anything over 4 columns. So in this example, I can see Closet, Bath, Bedroom, and Motion - but the right two entities (Fan and All) get cut off.

type: entities
entities:
  - type: 'custom:multiple-entity-row'
    entity: light.master_suite_lights
    state_header: All
    toggle: true
    style:
      width: 50px
    entities:
      - entity: input_boolean.master_suite_pirs
        name: Motion
        toggle: true
        styles:
          width: 50px
      - entity: light.bedroom_lights
        name: Bedroom
        toggle: true
        styles:
          width: 50px
      - entity: light.master_bath
        name: Bath
        toggle: true
        styles:
          width: 50px
      - entity: light.master_closet
        name: Closet
        toggle: true
        styles:
          width: 50px
      - entity: light.bath_fan
        name: Fan
        toggle: true
        styles:
          width: 50px
    name: ' '
    icon: 'mdi:blank'
    show_state: true
    styles:
      width: 50px

Separate issue, but are state icons work here? I tried the below, but no change

        state:
          - value: 'on'
            color: green
            icon: 'mdi:motion-sensor'
          - value: 'off'
            color: red
            icon: 'mdi:motion-sensor-off'
        tap_action:
          action: toggle

Do not work.
Use another options.

Yo may use a smaller font.

1 Like

Been playing with this for a while and had a look but can’t see any obvious solutions, any advice appriciated.

Trying to move everything to the left.

Screenshot 2021-06-04 at 9.53.20 am

type: entities
entities:
  - type: 'custom:multiple-entity-row'
    entity: sensor.weatherlink_wind_direction
    style:
      hui-generic-entity-row:
        $: |
          state-badge {
            display: none;
          }
    entities:
      - entity: sensor.weatherlink_wind_direction
        name: Dir
        styles:
          width: 20px
      - entity: sensor.vantage_wind_speed_last
        name: Speed
        styles:
          width: 20px
      - entity: sensor.vantage_wind_speed_gust_last_10_min
        name: gust
        styles:
          width: 20px
    name: ' '
    icon: 'mdi:blank'
    show_state: false
    styles:
      width: 200px

My best guess is that the 20px is way too small. On my screen that is about 1 cm and you are trying to put “1.2 kts” into it, which leads it to wrap the line
Try with something large like 100px(i am using 90px for similar things) and then reducee it.

Hi there,
I am struggeling getting a slider shown inline within a multiple-entity-row. It’s not showing for whatever reason…

Code is here:

     cards:
        - type: horizontal-stack
          style: |
            ha-card {margin-top: -15px; }
          cards:
            - type: entities
              entities:
                - type: custom:multiple-entity-row
                  # style:
                  #   hui-generic-entity-row:
                  #     $: |
                  #       state-badge { display: none !important; }
                  entity: binary_sensor.irrigation_unlimited_c2_z1
                  show_state: false
                  secondary_info: last-changed
                  entities:
                    - icon: mdi:toggle-switch-outline
                      name: Aktivierung Zone
                      state_color: true
                      tap_action:
                        action: call-service
                        service: irrigation_unlimited.toggle
                        service_data:
                          entity_id: binary_sensor.irrigation_unlimited_c2_z1
                    - type: custom:secondaryinfo-entity-row
                      entity: input_number.iu_zone_1_run_time
                      secondary_info: true

I also tried the slider-entity-row custom lovelace element instead of secondaryinfo-entity-row. Again with no luck.

If I move the slider one level up (outside the multiple-entity-row) it shows in the next line… but I would like to have it inside the row shown above…
Any help on that would be highly appreciated…
Cheers, Hauke

I do not want the card to show the state of my covers (screens) because they don’t have any. The state is always unkown. It does need to show me the buttons to move the cover up or down. How do I do that?

type: entities
entities:

* entity: cover.opslagkamer
type: custom:multiple-entity-row
entities:
  * entity: sensor.screen_sensor_opslagkamer
name: false

see: secondary_info removes slider from main entity input_number · Issue #96 · benct/lovelace-multiple-entity-row · GitHub

you can use the slider only with secondary info-entity-row

      - type: custom:secondaryinfo-entity-row
        entity: input_number.home_theater_lux
        secondary_info: >
          Mean living secondary info: {{states('sensor.mean_living_lux')}} lx

or even better with card-mod:

      - type: custom:slider-entity-row
        entity: input_number.home_theater_lux
        secondary_info: true
        card_mod:
          style:
            hui-generic-entity-row$: |
              .secondary::after {
                content: "Mean living: {{states('sensor.mean_living_lux')}} lx"
                }

this is what I do:

  - type: entities
    title: Screen Keuken
    <<: *header
    entities:
      - entity: cover.screen_keuken
        name: Keuken
        secondary_info: last-updated
      - type: custom:slider-entity-row
        entity: cover.screen_keuken
        hide_state: false
        full_row: true

however, for use with an rts motor (2 to be precise) I set it up like this:

  - type: entities
    title: Lamellen Garage
    card_mod:
      style: |
        .card-header {
          background-color: var(--background-color-off);
          color: var(--text-color-off);
          font-weight: bold;
          margin: 0px 0px 8px 0px;
        }
        .header-footer.footer {
          --mdc-icon-size: 30px;
          padding-bottom: 10px;
          font-weight: bold;
          font-size: 20px;
          color: orange;
        }
    entities:
      - entity: cover.lamellen_garage
        name: Lamellen
        secondary_info: last-updated
#      - entity: script.garage_lamellen_my
#        name: Set Lamellen Garage
#        action_name: My
      - type: divider
      - entity: cover.lamel_links
        name: Lamel links
        secondary_info: last-updated
      - entity: cover.lamel_rechts
        name: Lamel rechts
        secondary_info: last-updated
    footer:
      type: buttons
      entities:
      - entity: script.garage_lamellen_open
        icon: mdi:arrow-up
#        name: Open
      - entity: script.garage_lamellen_my
        name: My
        show_icon: false
      - entity: script.garage_lamellen_close
        icon: mdi:arrow-down
#        name: Close

as you can see, these are Somfy screens with a pre-programmed ‘My’ position. Which I call in the script in the footer :wink:

Could someone let me know what is wrong with the code below? I would like either (a) confirmation to toggle switch on tap or (b) deliberate hold action to toggle switch.

What currently happens below is that the hold_action does not respond at all. When I change to tap_action the switch toggles, but I receive no confirmation.

Is it even possible to have a confirmation after a hold action ?

              - type: custom:multiple-entity-row
                entity: group.garage_doors
                show_state: false
                state_color: true
                secondary_info: last-changed
                entities:
                  - entity: switch.gdora
                    name: Left
                    icon: true
                    state_color: true
                    hold_action:
                      action: toggle
                    confirmation:
                      text: Toggle garage door?
                  - entity: switch.gdock
                    name: Right
                    icon: true
                    state_color: true
                    hold_action:
                      action: toggle
                    confirmation:
                      text: Toggle garage door?

How to hide a header for some entity?
Usually we use "name: false" option.
Now see the difference:
image

type: entities
entities:
  - type: custom:multiple-entity-row
    entity: sun.sun
    entities:
      - entity: sun.sun
        name: xxx
        styles:
          width: 100px
      - entity: sun.sun
        name: "\u2003"
        styles:
          width: 100px
    name: ''
    show_state: false
  - type: section
  - type: custom:multiple-entity-row
    entity: sun.sun
    entities:
      - entity: sun.sun
        name: xxx
        styles:
          width: 100px
      - entity: sun.sun
        name: false
        styles:
          width: 100px
    name: ''
    show_state: false

We need to use the “\u2003” special character (wide space).

P.S. You may use transparent font color & card-mod as well (a longer way).

I will share my version of the card
image

Animated consumption card

type: entities
title: 'Living Room: Energy Monitoring'
entities:
  - entity: sensor.gostinaia_rozetka_dlia_konditsionera_current
    type: custom:multiple-entity-row
    name: Current strength
    show_state: false
    entities:
      - entity: sensor.gostinaia_rozetka_dlia_konditsionera_current
        name: Conditioner
        styles:
          width: 70px
      - entity: sensor.gostinaia_rozetka_dlia_umnogo_udlinitelia_current
        name: Smart filter
        styles:
          width: 90px
      - entity: sensor.gostinaia_rozetka_dlia_nas_current
        name: NAS
        styles:
          width: 60px
  - entity: sensor.gostinaia_rozetka_dlia_konditsionera_current
    type: custom:multiple-entity-row
    name: Total consumption
    show_state: false
    entities:
      - entity: sensor.gostinaia_rozetka_dlia_konditsionera_energy
        name: Conditioner
        styles:
          width: 75px
      - entity: sensor.gostinaia_rozetka_dlia_umnogo_udlinitelia_energy
        name: Smart filter
        styles:
          width: 85px
      - entity: sensor.gostinaia_rozetka_dlia_nas_energy
        name: NAS
        styles:
          width: 60px
  - entity: sensor.gostinaia_rozetka_dlia_konditsionera_current
    type: custom:multiple-entity-row
    name: Current consumption
    show_state: false
    entities:
      - entity: sensor.gostinaia_rozetka_dlia_konditsionera_power
        name: Conditioner
        styles:
          width: 75px
      - entity: sensor.gostinaia_rozetka_dlia_umnogo_udlinitelia_power
        name: Smart filter
        styles:
          width: 85px
      - entity: sensor.gostinaia_rozetka_dlia_nas_power
        name: NAS
        styles:
          width: 60px
Текст на русском (Text in Russian)

Поделюсь своим вариантом карточки

image

Анимированная карта потребления
New Custom UI card to show animated power consumption

type: entities
title: 'Гостиная: Энергомониторинг'
entities:
  - entity: sensor.gostinaia_rozetka_dlia_konditsionera_current
    type: custom:multiple-entity-row
    name: Сила тока
    show_state: false
    entities:
      - entity: sensor.gostinaia_rozetka_dlia_konditsionera_current
        name: Кондиционер
        styles:
          width: 70px
      - entity: sensor.gostinaia_rozetka_dlia_umnogo_udlinitelia_current
        name: Сетевой фильтр
        styles:
          width: 90px
      - entity: sensor.gostinaia_rozetka_dlia_nas_current
        name: NAS
        styles:
          width: 60px
  - entity: sensor.gostinaia_rozetka_dlia_konditsionera_current
    type: custom:multiple-entity-row
    name: Общее потребление
    show_state: false
    entities:
      - entity: sensor.gostinaia_rozetka_dlia_konditsionera_energy
        name: Кондиционер
        styles:
          width: 75px
      - entity: sensor.gostinaia_rozetka_dlia_umnogo_udlinitelia_energy
        name: Сетевой фильтр
        styles:
          width: 85px
      - entity: sensor.gostinaia_rozetka_dlia_nas_energy
        name: NAS
        styles:
          width: 60px
  - entity: sensor.gostinaia_rozetka_dlia_konditsionera_current
    type: custom:multiple-entity-row
    name: Текущее потребление
    show_state: false
    entities:
      - entity: sensor.gostinaia_rozetka_dlia_konditsionera_power
        name: Кондиционер
        styles:
          width: 75px
      - entity: sensor.gostinaia_rozetka_dlia_umnogo_udlinitelia_power
        name: Сетевой фильтр
        styles:
          width: 85px
      - entity: sensor.gostinaia_rozetka_dlia_nas_power
        name: NAS
        styles:
          width: 60px
2 Likes

I will share another option for combining two user integrations, and then there are few examples and it is difficult to assemble such panels, so I would like to have more ready-made options

image

To create such a panel in Lovelace, we will need two integrations

Configuration lovelace

type: entities
entities:
  - type: custom:fold-entity-row
    head:
      entity: sensor.ups_cyberpower_livingroom
      name: ИБП
      type: custom:multiple-entity-row
      secondary_info:
        attribute: Уровень заряда
        name: Батарея
        unit: '%'
      state_header: Статус
      entities:
        - entity: group.livingroom_ups
          name: Сенсоры
          icon: mdi:information-outline
        - entity: sensor.ups_load
          name: Нагрузка
        - entity: sensor.ups_load_watts
          name: Нагрузка
    entities:
      - entity: switch.ups_beeper
        secondary_info: last-changed
        icon: mdi:volume-high
      - entity: switch.ups_test_battery_quick
        secondary_info: last-changed
        icon: mdi:battery
      - entity: switch.ups_test_battery_deep
        secondary_info: last-changed
        icon: mdi:battery
Текст на русском (Text in Russian)

Поделюсь еще одним вариантом совмещения двух пользовательских интеграции, а то примеров то мало и сложно собирать такие панели, поэтому хотелось, чтобы было больше готовых вариантов

image

Для создание такой панели в Lovelace, нам понадобятся две интеграции

Конфигурация lovelace

type: entities
entities:
  - type: custom:fold-entity-row
    head:
      entity: sensor.ups_cyberpower_livingroom
      name: ИБП
      type: custom:multiple-entity-row
      secondary_info:
        attribute: Уровень заряда
        name: Батарея
        unit: '%'
      state_header: Статус
      entities:
        - entity: group.livingroom_ups
          name: Сенсоры
          icon: mdi:information-outline
        - entity: sensor.ups_load
          name: Нагрузка
        - entity: sensor.ups_load_watts
          name: Нагрузка
    entities:
      - entity: switch.ups_beeper
        secondary_info: last-changed
        icon: mdi:volume-high
      - entity: switch.ups_test_battery_quick
        secondary_info: last-changed
        icon: mdi:battery
      - entity: switch.ups_test_battery_deep
        secondary_info: last-changed
        icon: mdi:battery
1 Like

Is there a way to change the color of the entity based on it’s state?

something like this (this doesn’t work):

             - entity: sensor.main_roi
                type: custom:multiple-entity-row
                name: ROI
                unit: "$"
                icon: mdi:currency-usd
                state_header: ROI
                styles:
                  width: 275px
                  text-align: center 
                  color: >
                    {% if states('sensor.main_roi') < 0 %} red {% else %} green {% endif %}
1 Like

Also is there a way to hide the name? I tried name: false but it doesn’t work. The only thing that worked is name: " " but it keeps the tab of the name…

So card-mod does work, to change the text of the card:

                card_mod:
                  style: |
                    :host {
                      color: 
                        {%- set sensor = (states('sensor.main_roi')| float) %}
                        {%- if sensor < 0 %}red
                        {%- else %}green
                        {%- endif %}
                    }

Is anyone having trouble getting the extra entities to pop-up their more-info boxes when clicked?

I’m positive this used to work but no longer does.

1 Like

Do not confirm this.
2021.11.5, latest multiple-entity-row

1 Like