Lovelace - is it possible to import yaml?

Configuration Frontend
1

Greetings,

I upgraded Home Assistant yesterday and I am in the process of migrating my config to Lovelace. I am playing around with my Roborock vacuum cleaner card and you can really do awesome stuff with Lovelace. But I also noticed that it gets really long, when you add a couple of elements and sensors. So right now the card for my robot card takes up more than 200 lines and is still not finished.

Is it possible, that I can put the yaml of the card in an dedicated file and just import it in ui-lovelace.yaml? That would make everything a lot cleaner.

Also: If I have many repeating Lovelace UI elements; is it somehow possible to define a template and just create an instance of it, just feeding the few attributes to it which differ from one element to another (e.g. x,y coordinates, the exact sensor, instead of defining all the mostly same stuff all the time?

Thank you for your help

2

For importing, just cut and paste from a file into the lovelace GUI editor.

Size reduction using anchors:

Or the Decluttering card:

3

If you use yaml mode for lovelace you can use the !include directive to add the contents of a file at the location of the !include command.

I use it for splitting up my lovelace config on a view basis and it looks like this:

 resources: 
  ## https://github.com/custom-cards/aftership-card
  - url: /community_plugin/aftership-card/aftership-card.js
    type: module
    
  ## https://github.com/atomic7777/atomic_calendar
  - url: /community_plugin/atomic_calendar/atomic_calendar.js
    type: module
    
  # ETC, ETC

cch:
  voice: hide
  conditional_styles:
    - entity: switch.debug_view
      condition:
        state: 'off'
      tab:
        'Debug':
          hide: true
  # #hide_tabs: '4,5,6,7,8'
  options: clock
  swipe: true
  swipe_animate: swipe
  swipe_amount: 30
    
title: Home Assistant
background: var(--lovelace-background)
views:
  - !include '/config/lovelace_views/lovelace_main_view.yaml'
  - !include '/config/lovelace_views/lovelace_environment_view.yaml'
  - !include '/config/lovelace_views/lovelace_automations_view.yaml'
  - !include '/config/lovelace_views/lovelace_media_view.yaml'
  - !include '/config/lovelace_views/lovelace_system_view.yaml'
  - !include '/config/lovelace_views/lovelace_zwave_view.yaml'
  - !include '/config/lovelace_views/lovelace_zigbee_view.yaml'
  - !include '/config/lovelace_views/lovelace_security_view.yaml'
  #- !include '/config/lovelace_views/lovelace_space_view.yaml'
  - !include '/config/lovelace_views/lovelace_test_view.yaml'
  - !include '/config/lovelace_views/lovelace_debug_view.yaml'
1 Like
5

The procedure I am going to list here is related to this post as I found a problem while trying to move to a new hardware setup and had to re-do all my HA stuff from scratch. For your old Lovelace UI (not Yaml), you can hit on the upper right corner the “Configure UI” and then again when is in config mode, you hit the three dots and click on “Raw config editor”, copy all and then on your new setup just paste this and all your tabs/cards will appear there. There is also a possibility of accessing a hidden folder but I find this much easier.

1 Like