LIVE copy of a card across views or dashboards?

Hey everyone,

I was wondering if it is possible to create an automatically updating card that is always identical to a “primary” card?

I have a main dashboard that i use on my pc that as you know i am constantly tweaking.
Those cards are copied to different views and dashboards across HA (for tab and mobile views)
I would like this updates to be automatically be transferred to the copies of the cards without me having to go change the code everywhere.

Is this functionality possible somehow?
Could it be integrated as a core functionality or as a custom component?

I hope i am clear.
Thanks in advance.

great idea, this would be great!

1 Like

You can already do this with the !include statement.

My entire UI is based on !includes. Most of the elements and cards are shared between my desktop, tablet (kiosk), and mobile dashboards so I only have to maintain one copy of them.

Here’s my main home page view for example.

Laptop Home View
###############################################################################
## Home View
###############################################################################
title: "Home"
icon: mdi:home-account
path: home
type: custom:vertical-layout
layout:
  max_cols: 4
cards:
  - type: horizontal-stack
    cards:
      - !include /config/ui/button/presence/occupancy_mode_button.yaml
      - !include /config/ui/button/alarm/master_alarm_button.yaml
      - !include /config/ui/button/presence/presence_button_jason.yaml

      - type: conditional
        conditions:
          - entity: input_boolean.guest_home
            state: "on"
        card: !include /config/ui/button/presence/guest_presence_button.yaml

  - !include /config/ui/card/alarm/alarm_alert_card.yaml

  - type: grid
    columns: 5
    square: true
    cards:
      - !include /config/ui/button/other/lock_button.yaml
      - !include /config/ui/button/garage/garage_door_button.yaml
      - !include /config/ui/button/sensor/door_button.yaml
      - !include /config/ui/button/sensor/window_button.yaml
      - !include /config/ui/button/sensor/motion_button.yaml
      - !include /config/ui/button/alarm/camera_button.yaml

      - !include /config/ui/button/other/thermostat_button.yaml
      - !include /config/ui/button/garage/garage_thermostat_button.yaml
      - !include /config/ui/button/other/fireplace_button.yaml
      - !include /config/ui/button/other/fan_button.yaml
      - !include /config/ui/button/sensor/dishwasher_button.yaml
      - !include /config/ui/button/sensor/refrigerator_button.yaml

      - !include /config/ui/button/other/light_button.yaml
      - !include /config/ui/button/scene/scene_movie_button.yaml
      - !include /config/ui/button/scene/scene_company_button.yaml
      - !include /config/ui/button/scene/scene_chill_button.yaml
      - !include /config/ui/button/scene/scene_shower_button.yaml
      - !include /config/ui/button/sensor/power_use_button.yaml

      - !include /config/ui/button/schedule/work_schedule_button.yaml
      - !include /config/ui/button/schedule/waketime_button.yaml
      - !include /config/ui/button/schedule/bedtime_button.yaml
      - !include /config/ui/button/schedule/waste_button.yaml

      - !include /config/ui/button/sensor/smoke_detector_button.yaml
      - !include /config/ui/button/other/charlie_button.yaml

      - !include /config/ui/button/sensor/leak_button.yaml
      - !include /config/ui/button/sensor/indoor_sump_button.yaml
      - !include /config/ui/button/sensor/outdoor_sump_button.yaml
      - !include /config/ui/button/other/sprinkler_button.yaml
      - !include /config/ui/button/other/hot_tub_button.yaml
      - !include /config/ui/button/other/hass_button.yaml

  - !include /config/ui/menu/home_menu.yaml
  - !include /config/ui/card/schedule/schedule_timers.yaml
  - !include /config/ui/card/scene/scene_timers.yaml

  - type: custom:layout-break

  - !include /config/ui/card/media/media_buttons.yaml

  - type: custom:state-switch
    entity: template
    default: "off"
    template: "{{ iif(is_state('binary_sensor.media_active','on'),'media','players') }}"
    states:
      media: !include /config/ui/card/media/media_launcher.yaml
      players: !include /config/ui/card/media/media_player/media_players_device.yaml

  - type: custom:layout-break

  - !include /config/ui/card/weather/weather_forecast.yaml

  - type: custom:layout-break

  - !include /config/ui/card/camera/camera_swipe.yaml
1 Like

Is there a tutorial on how to use the !include statement?
I am new to Home Assistant have so far only used the built in editor for creating dashboard.
Thanks

Sorry, I forget that a lot of people use the UI for dashboards. You’re not going to be able to use it if you’re using the UI as far as I know.

If you really want to dig into YAML for your dashboards there are a lot of info and tutorials for YAML here on the forums.

This one is pretty old but I think it’s all still relevant.

http://thomasloven.com/blog/2018/08/YAML-For-Nonprogrammers/

1 Like

Hey there!
I know this is doable with yaml mode, but i find the ui editor offers a lot of usability, especially when editing something while not on a full sized pc/laptop.
The idea is to at least allow !include while the ui editor is enabled.
Or IDK, maybe assign an id to a card and then call that id from a card that’s someplace else in HA?

1 Like

This would be really useful. I have a number of dashboards and views with cards that are common across them. Being able to define a card in one place but use in multiple views would be a nice time saver. It also helps ensure the cards are actually displaying the same entities etc.

1 Like

Definitely should be a feature. Example common dashboards between mobiles

This is on the very top of my personal wish list. My frontend has gotten quite expansive and it has become quite a chore to change the navigation element that lives on top of each view.

can attest this would be a lifesavere. Making separate dashboards for phones, tablet-kiosks and laptop and they all use shared elements that require a lot of copy/pasting in raw yaml

Maybe if we could assign a unique ID to the source card through UI…
and then have a “copy card” where we would just enter the source card’s ID?
I dont know :slight_smile:

1 Like

Thats actually not a bad idea i.e.: card_id (like entity_id). Doing this would not only help towards copy of cards but you could add to that and “!include card_id” in other views and reduce duplicate cards on other views. I have a diag card I use on a lot of my views and updating it is a pain. Anyway card_id would be a good solution for this ‘copy’ issue but also for ‘!include’ of cards in other views. But… would take some infrastructure…

2 Likes