Cards on Multiple Views and Dashboards

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.

2 Likes

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

1 Like

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

Lovelacefrontend

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.

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.

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

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

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.

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.

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 …

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!

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