Cards on Multiple Views and Dashboards

John.McDowell · October 18, 2020, 2:40pm

I am not sure if this will require a new feature request to accomplish or if there is a way to do it in hte frontend YAML files. My desire is to stay with the standard frontend rather than a custom frontend.

I currently use Views to logically group cards for areas of my house. I have a “navigation” glance card that lets the user select which room they want to control and the UI navigates to that view. Each view has a copy of the navigation card on it, so all views can navigate easily to all other views without having to scroll across the top bar. The challenge is maintaining the “navigation” card is a pain since there are multiple copies of it. Each time I make a change, I have to recopy the card to all views. I would be nice if there was a way to link a card on a view to a card in another view such that I only have to maintain the card in one location.

Similar to this, with the advent of user and dashboards, I would like to setup dashboards for each user so they only see the areas that they should. I would like to be able to either link to either cards or views in other dashboards to avoid having to maintain in multiple locations similar to the view challenge above.

An alternative might be to use dashboards for each room and do all navigation on the left hand menu. This way I could limit what dashboards are shown on the left hand menu for each user in their profile. I am not sure if this method of navigation will be acceptable to my other half. Any thoughts or comments would be welcome.

Dolores · October 18, 2020, 3:46pm

I know that you said no custom, but with the custom button card, you could define one template that you use everywhere. The navigation card on each view would then just be three lines that are the same everywhere.

If you’re using the ui mode you may have to define a new template for each dashboard, but you may need to do that per user anyways given your desired user based functions (although those could be templated too…).

lonebaggie · October 18, 2020, 4:05pm

I use a combination of Menu and glance cards . My config is on Github

Lovelacefrontend

John.McDowell · October 18, 2020, 4:10pm

Thanks @lonebaggie, my primary use case for control is on a phone which is why the view menu falls short (11 views requires scrolling across the screen to get to the ones on the right hand side). That is why I use a glance card for navigation with tap action to go to the desired view. It works well, biggest challenge is maintenance on the navigation glance card gets tiresome since I have to change it on every view.

John.McDowell · October 18, 2020, 4:11pm

Thanks, I will take a look. I was trying to avoid the custom cards just due to the rate of improvements in HA and Lovelace and having to take on additional work with breaking fixes, but this may still be the best way to go.

lonebaggie · October 18, 2020, 4:23pm

You can hide the view menu. I have 27 views . If you split each screen into a separate yaml . You can call them from the glance card and hide them in the menu

title: Home
views:
  - !include '/config/lovelace/alert.yaml'
  - !include '/config/lovelace/home.yaml'
  - !include '/config/lovelace/octopus.yaml'
  - !include '/config/lovelace/car.yaml'
  - !include '/config/lovelace/weather.yaml'
  - !include '/config/lovelace/alexa.yaml'
  - !include '/config/lovelace/all.yaml'  
  - !include '/config/lovelace/sandbox.yaml'
  - !include '/config/lovelace/battery.yaml'
  - !include '/config/lovelace/input.yaml'
  - !include '/config/lovelace/switches.yaml'
  - !include '/config/lovelace/lights.yaml'
  - !include '/config/lovelace/media.yaml'
  - !include '/config/lovelace/sensors.yaml'
  - !include '/config/lovelace/bsensors.yaml'
  - !include '/config/lovelace/livingroom.yaml'
  - !include '/config/lovelace/kitchen.yaml'
  - !include '/config/lovelace/utility.yaml'
  - !include '/config/lovelace/hall.yaml'
  - !include '/config/lovelace/frontroom.yaml'
  - !include '/config/lovelace/outside.yaml'
  - !include '/config/lovelace/landing.yaml'
  - !include '/config/lovelace/study.yaml'
  - !include '/config/lovelace/masterbedroom.yaml'
  - !include '/config/lovelace/bathroom.yaml'
  - !include '/config/lovelace/francis.yaml'
  - !include '/config/lovelace/maddy.yaml'
  - !include '/config/lovelace/currentlocation.yaml'
  - !include '/config/lovelace/timers.yaml'

So I can hide the kitchen view from the menu

title: Kitchen
  visible: false
  path: kitchen
  icon: 'mdi:food-variant'
  badges: []
  cards:
    - type: horizontal-stack
      title: Kitchen
      cards:
        - type: glance
          entities:
            - entity: light.kitchen
              name: Kitchen
              tap_action:
                action: toggle
            - entity: media_player.k_dot
              name: Echo Dot
        - type: glance
          entities:
            - entity: sensor.household_waste
              name: Household 
            - entity: sensor.food_waste
              name: Food

Then you can call the views from the glance card.

title: Home
path: home
icon: 'mdi:home-assistant'
badges: []
cards:
  - type: vertical-stack
    title: Downstairs
    cards:
      - type: glance 
        columns: 4
        entities:
          - entity: input_boolean.icon
            name: Living Room
            show_state: false
            icon: mdi:sofa
            tap_action: 
              action: navigate
              navigation_path: /lovelace/livingroom
            hold_action:
              action: none
          - entity: input_boolean.icon
            name: Hall
            icon: mdi:clock
            show_state: false
            tap_action: 
              action: navigate
              navigation_path: /lovelace/hall
            hold_action:
              action: none
          - entity: input_boolean.icon
            name: Kitchen
            show_state: false
            icon: mdi:food-variant
            tap_action: 
              action: navigate
              navigation_path: /lovelace/kitchen
            hold_action:
              action: none
          - entity: input_boolean.icon
            name: Utility
            show_state: false
            icon: mdi:washing-machine
            tap_action: 
              action: navigate
              navigation_path: /lovelace/utility
            hold_action:
              action: none
          - entity: input_boolean.icon
            name: Front Room
            icon: mdi:sofa
            show_state: false
            tap_action: 
              action: navigate
              navigation_path: /lovelace/frontroom
            hold_action:
              action: none
          - entity: input_boolean.icon
            name: Outside
            show_state: false
            icon: mdi:flower
            tap_action: 
              action: navigate
              navigation_path: /lovelace/outside
            hold_action:
              action: none
  - type: vertical-stack
    title: Upstairs
    cards:      
      - type: glance
        columns: 4
        entities:
          - entity: input_boolean.icon
            name: Landing
            icon: mdi:airport
            show_state: false
            tap_action: 
              action: navigate
              navigation_path: /lovelace/landing
            hold_action:
              action: none
          - entity: input_boolean.icon
            name: Master Bedroom
            icon: mdi:bunk-bed
            show_state: false
            tap_action: 
              action: navigate
              navigation_path: /lovelace/masterbedroom
            hold_action:
              action: none
          - entity: input_boolean.icon
            name: Study
            icon: mdi:desk-lamp
            show_state: false
            tap_action: 
              action: navigate
              navigation_path: /lovelace/study
            hold_action:
              action: none
          - entity: input_boolean.icon
            name: Francis
            icon: mdi:bed
            show_state: false
            tap_action: 
              action: navigate
              navigation_path: /lovelace/francis
            hold_action:
              action: none
          - entity: input_boolean.icon
            name: Maddy
            icon: mdi:bed
            show_state: false
            tap_action: 
              action: navigate
              navigation_path: /lovelace/maddy
            hold_action:
              action: none
          - entity: input_boolean.icon
            name: Bathroom
            icon: mdi:human-male-female
            show_state: false
            tap_action: 
              action: navigate
              navigation_path: /lovelace/bathroom
            hold_action:
              action: none

Dolores · October 18, 2020, 5:15pm

To go even further in the duration that you don’t want, you could use the browser mod integration to make a popup.

I mention this because the popup consists of cards, and on mobile the cards look essentially like a view. You then navigate back to “home” by just pressing the x in the upper left corner, so there’s no replication of the navigation feature, it would only exist in the only view.

not_a_coder · April 18, 2021, 6:19pm

How did you do that? I think that is all I need for my 9 views. I am limited in my skills and understanding on how I would go about the other recommendations in this thread and I assume what you did would be the easiest for me.

Haddood · July 1, 2021, 8:57am

I just solved this in a different way. first we need to install kiosk mode from HACS

for a whole page that appears in multiple dashboards:
create a dashboard that do not appear in the side view, with one page that has all the cards…
than in each dashboard that the page should appear, add a page set it to panel mode, add a single card with iframe that links to the single page dashboard with “?kiosk” at the end of the url. just browse to the page copy the url from browser abd add “?kiosk” similar to:
“http(s)://domain or ip:8123/lovelace-(dashboardname)/(page-name)?kiosk”.
for a one card that appears in multiple dashboards:
same steps just the dashboard will have one card. then the iframe in the host dashboard needs hight adjustment … only downside (kinda) the is an extra border around that card …

blackmore · August 18, 2022, 8:56am

Maybe it’s an offtopic question, but as it could solve my problem i’m going to aks it anyways:
Is it possible to include a yaml file of a single card the way you showed with inlcuding the views?

I tried:

title: Zuhause
views:
  - path: default_view
    title: Home
    badges: []
    cards:
      - !include '/config/defaultcards/shortcuts.yaml'

but i get an error parsing the yaml:

YAMLException: unknown tag !<!include> (7:55) 4 | ... 5 | ... 6 | ... 7 | ... ig/defaultcards/shortcuts.yaml' -----------------------------------------^ 8 | ... stack 9 | ...

Thanks for your help!

Ildar_Gabdullin · August 18, 2022, 3:50pm

Probably you are trying to use “!include” in “storage” mode - i.e. in HA Editor.
The “!include” must be used in “yaml” mode only.

filgy · September 5, 2024, 7:15am

Can you please elaborate a bit more on what you mean by “yaml mode only” in relation to Dashboards?

For my usecase, I would like to keep the same badges across multiple dashboards/views, so being able to use badges: !include "badges.yaml" or even for cards cards: !include "cards.yaml" would help a lot to declutter my dashboards.

Ildar_Gabdullin · September 5, 2024, 10:05am

Check docs.
In short - defining dashboards (views, cards) is done in yaml files, not in UI.

cofw2005 · December 10, 2024, 9:06pm

I just archieved something similar today.
My use case is, I have 4 views with Picture-Element card. There are couple of element cards which appear on each of the view, same place same content.
Before I copied/pasted about 600 lines in each view, if I need to adapt something in there, always need to modify 4 times.

In the elements of the view, there are also not only these repeated cards, but also some other specifc card on each view.
Here is the example for using !include:
In the main card:

- type: picture-elements
  image: /local/image.jpg
  elements:
    - !include /config/lovelace/card1.yaml
    - type: state-icon
      title: card2
    - type: state-icon
      title: card3

And in the included card for example:

type: state-badge
entity: sensor.xxx
title: card1
style:
  top: 72%
  left: 11.2%
  font-size: 10px

The way allows you to create one card (the state-badge here) to be reused. Wherever you want put this card, just use - !include /config/lovelace/card1.yaml

The !include must always after the list symbol -. And in the included card yaml, you need to remove the symble and the indent.
And this works only for one block / one card. If you have in parallel several cards in the “badges.yaml” it doesn’t work.

I guess you want to reuse a few cards/badges, not just one. But the yaml only allow to include one. Think about the way around, you just need to put them into one card. This is what I do.

I created a dummy conditional card:

type: conditional
conditions:
  - entity: binary_sensor.dummy_true
    state: "on"
elements:
  - type: state-badge
    title: card1
  - type: state-icon
    title: card2
  - type: state-icon
    title: card3
    ...

With this dummy condition card, all the elements are gathered under it, so now it is one card, and no matter how many sub cards you want under it.
Also I created a template binary_sensor which is always “on”, so the condition is always met.
With this work around I now can move my 600 lines to a separated yaml, and no longer need to modify them four times.