LIVE copy of a card across views or dashboards?

Feature Requests
1

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.

2

great idea, this would be great!

1 Like
3

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
2 Likes
4

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

5

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
6

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?

2 Likes
7

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.

2 Likes
8

Definitely should be a feature. Example common dashboards between mobiles

9

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.

1 Like
10

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

1 Like
11

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:

2 Likes
12

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…

3 Likes
13

Bumping this, while copy-pasting code across several identical cards :slight_smile:

1 Like
14

I came here looking for exactly that.

I like using UI for dashboard creation/edits - these are the graphical elements, that’s only natural to edit them in GUI :slight_smile:

Still, however, I have one main admin-only dashboard, which contains everything, and other, desktop and mobile, users dashboards.
Whenever I change one element, i.e. added new device to certain room, copying it elsewhere is a chore, even though I do that by copying yamls (still in web ui)

+1 for a feature allowing to link to dsahboard cards on other dashboard, i.e.:

  1. Assign some kind of unique ID to each card on the dashboard
  2. Assign unique ID to dashboard (we actually have this - doasboard address path
  3. Allow to !include the card from other dashboard by using i.e.:
!include /dashboards/dsahboardname/card_id
1 Like
15

I use yaml to edit dashboard. Use “!include” to include a yaml file is no problem. But I don’t know whether it works the same in UI mode.

cards:
  - !include /config/repeat_card.yaml

the repeat_card.yaml contains one card to be reused.
At least, I only need to include the card in each of the views, don’t need to copy the card several times. Once I update the sub.yaml, all referred view also get updated.