Can I do an 'include:' for a yaml lovelace component on numerous dashboards?

Configuration
1

Hi all,

I have a floorplan laid out (using picture-elements) as a custom card to control core parts of the house. However, I want to use this on multiple different dashboards.

Currently I am duplicating the floorplan code in 3 different places. Is there a way to simplify this duplication?

I am hoping to have something like one version in a separate lovelace.yaml and some sort of include: function to include that in the other dashboards? I tried this using iframe cards, but it was a bit slow to load.

Thanks for any advice.

2

If you’re using YAML mode, yes, !include works fine. I use it for my own config.

3

I was hoping to re-use a specific card rather than a full ‘view’. Something more like this:

  cards:
    - !include floorplan.yaml

Any suggestions, or is a ‘webpage card’ the only real option for this?

edit
When I try this approach to call a card from a separate file, I get this error. It’s a ‘no card type configured’ even though the error is clearly showing it’s picked up all the right content.

No card type configured.
- type: picture-elements
  image: /local/images/floorplan/Floorplan_day_white_sm.jpg
  theme: ios-dark-mode
  height: 100%
  elements:
    - entity: sun.sun
      type: image
      state_image:
        above_horizon: /local/images/floorplan/transparent.png
        below_horizon: /local/images/floorplan/Night_01.jpg
4

Keep in mind that changes to files included from ui-lovelace.yaml won’t be recognized unless you also change/touch ui-lovelace.yaml. Because of this quirk, I generally avoid using !includes for anything that changes regularly. I’ve used it successfully for less than a full view - what indentation does your included file have? In my case, I think I had something like cards: !include cards.yaml, and that’s different from what you’re doing.

5

Ok, that helped me solve it. It seems to work with “cards:” but not “card:”.

So to include in a conditional card, I had to add a horizontal-stack which then allows me to use cards:

  - type: conditional
    conditions:
      - entity: input_boolean.floorplan_control_display
        state: "on"
    card: 
        type: horizontal-stack
        cards: !include test.yaml

Thanks for the heads up on the refresh thing. I didn’t understand what you meant until I got it working and found it had cached the old include: card content and wouldn’t update unless I edited the main lovelace.yaml. Suddenly the penny dropped.

6

Glad it’s working now. Yeah, I spent quite a long time puzzling over why my changes weren’t reflected in the UI and eventually found a forum post about it. I could probably set up a macro or something in VSCode to automate the “touch”, but I just generally avoid includes for Lovelace.

Another gotcha with includes is that YAML anchors are file-scope, so if you try to collect a bunch of YAML anchors in a separate file for instantiation elsewhere, it won’t work.

7

Given the limitations I think I’ll only use it for the floorplan, as that is over 1000 does lines and was duplicated twice in my main dashboard (small view and selectable large view) and again on other dashboards for specific devices.

Thanks for the help!