Splitting a dashboard file into several using include statement or similar

Configuration Frontend
1

I have an enormous dashboard file and want to split it using !include statements or similar, partly to make it more structured and readable, but partly because I have a lot of panel yaml code that is identical on each page (top main menu button grid + code for warnings and notifications etc).

This simple task turned really hard. Obviously the RAW dashboard file editor in the dashboard GUI editor do not support adding or managing new files that can be !included from the main dashboard file.

I then tried to SSH into the file system, and it took me a long time to work out the dashboard configurations are in the .storage folder, that is hidden in the default HA file editor.

I finally managed to edit the dashboard files using the Nano editor in the SSH shell (and to create new empty files to be included later on). I now realized the dashboard configurations in .storage are in JSON format and not YAML like the raw dashboard editor.

Firstly, I dont dare to touch the JSON files in .storage as I don’t know if that will break the auto-conversion to YAML that apparently appears to be happening for the RAW dashboard editor. Secondly, I have not been able to find information on JSON files having an !include statement or similar.

So, what is the easiest way to break a huge dashboard configuration file (that appears as YAML in the raw dashboard editor and as JSON in .storage), so I can split it to serve filers and “include” children files into the “parent” file?

2

There isn’t.

Indeed, you shouldn’t touch anything in .storage/ - the system manages everything in there and you risk breaking it all.

If you want to use YAML and include statements then you need to use a YAML dashboard, not a UI managed one.

3

So, for an enduser friendly way to split huge dashboard configurations into several files, where code that is duplicated in serval panels (eg common top meny bar button list etc) can be refactored out into a single file that is included from several places, I need to file a feature request? sure I will do that.

4

There is an integration that can do this.
I will post it once I get back to my computer in about 1 hour.

1 Like
5

Or use YAML…

3 Likes
6

If you already seem to be mostly editing your UI manually anyway why not just switch to yaml mode and be done with it?

The UI editor is for (generally basic) users who want to edit things thru the UI and rarely if ever edit things manually.

It seems you’ve moved past that “basic user” level.

1 Like
7

Sorry for the little late answer.
I know I had an integration or frontend module that could do exactly that, but at the moment I can only find Linked-Lovelace, which is not precisely the one you need.

I will keep searching, because now it bugs me. :slight_smile:

8

There it was:

I have not used it myself yet, so no idea how it works, but with Thomas Loven as a developer, it should be good. :slight_smile:

9

thanks, yes but I would prefer GUI editing if it was powerful enough. not sure about the YAML mode, I need to read more about it. The RAW dashboard GUI editor is YAML, but I understand it as there is a pure YAML mode that disables the GUI editing altogether. I will have to study this a bit more. Thanks anyway!

10

Thanks! I will read more about it!

11

Best you can do is work in yaml-mode.
configuration.yaml → 

  dashboards:
    cl-home-km:
      mode: yaml
      title: churchlane KM
      icon: mdi:view-grid
      show_in_sidebar: true
      filename: churchlane/dashboards/ui-cl-km.yaml

(In my config km stands for kioskmode)
The ui-cl-km-yaml → 

base_theme: default
icon: mdi:desktop-classic
mode: dark

kiosk_mode:
  kiosk: true
  hide_header: false
  hide_sidebar: true
  
views:
  - !include /config/churchlane/navigate/woonkamer.yaml
  - !include /config/churchlane/navigate/keuken.yaml
  - !include /config/churchlane/navigate/beneden.yaml
  - !include /config/churchlane/navigate/boven.yaml
  - !include /config/churchlane/navigate/zonnepanelen.yaml
  - !include /config/churchlane/navigate/energy.yaml
  - !include /config/churchlane/navigate/verwarming.yaml
  - !include /config/churchlane/navigate/remotecontrol.yaml

Example remote control.yaml → 

type: custom:layout-card
title: RemoteControl
layout_type: grid
layout:
  mediaquery:
    "(max-width: 851px)":
      grid-template-columns: 100%
      grid-template-areas: |
        "menu"
        "main"
    "(min-width: 851px)":
      grid-template-columns: 50% 50%
      grid-template-areas: |
        "menu main"

cards: 
  - !include /config/churchlane/cards/card/stack-in/menu/menu.yaml
  - !include /config/churchlane/cards/card/stack-in/remotecontrol/menu.yaml

The menu/menu.yaml is a static menu that appears on every page I created → 

type: custom:stack-in-card
mode: vertical
card_mod:
  style: !include /config/churchlane/css/v4.0/vertical-stack-in-card-menu.css

cards:  
  - type: custom:layout-card
    layout_type: grid
    layout:
      grid-template-columns: calc(100% /6) calc(100% /6) calc(100% /6) calc(100% /6) calc(100% /6) calc((100% - 5px) /6) 
      grid-template-rows:    calc((100vh - 10px) / 8) calc((100vh - 10px) / 8) calc((100vh - 10px) / 8) calc((100vh - 10px) / 8) calc((100vh - 10px) / 8) calc((100vh - 10px) / 8) calc((100vh - 10px) / 8) calc((100vh - 10px) / 8)
    cards:

      - !include /config/churchlane/cards/card/weather/weather_1.yaml
      - !include /config/churchlane/cards/card/graph/energyprice.yaml      

      - !include /config/churchlane/cards/card/analog-clock/analog-clock.yaml
      - !include /config/churchlane/cards/card/button/menu/toggle_zonnepanelen.yaml

      - !include /config/churchlane/cards/card/button/menu/toggle_woonkamer.yaml
      - !include /config/churchlane/cards/card/button/automatisering/licht_aan_beneden.yaml
      
      - !include /config/churchlane/cards/card/button/menu/toggle_keuken.yaml
      - !include /config/churchlane/cards/card/button/automatisering/licht_uit_beneden.yaml
      
      - !include /config/churchlane/cards/card/button/afdekkingen/woonkamer/open.yaml
      - !include /config/churchlane/cards/card/button/afdekkingen/woonkamer/stop.yaml
      - !include /config/churchlane/cards/card/button/afdekkingen/woonkamer/sluiten.yaml 
            
      - !include /config/churchlane/cards/card/button/menu/geen.yaml
      - !include /config/churchlane/cards/card/button/menu/toggle_beneden.yaml
      - !include /config/churchlane/cards/card/button/automatisering/welterusten.yaml
            
            
      - !include /config/churchlane/cards/card/button/afdekkingen/keuken/open.yaml
      - !include /config/churchlane/cards/card/button/afdekkingen/keuken/stop.yaml
      - !include /config/churchlane/cards/card/button/afdekkingen/keuken/sluiten.yaml  
      
      - !include /config/churchlane/cards/card/button/menu/geen.yaml
      - !include /config/churchlane/cards/card/button/menu/toggle_boven.yaml
      - !include /config/churchlane/cards/card/button/menu/geen.yaml      
 
      - !include /config/churchlane/cards/card/button/afdekkingen/tuin/open.yaml
      - !include /config/churchlane/cards/card/button/afdekkingen/tuin/stop.yaml
      - !include /config/churchlane/cards/card/button/afdekkingen/tuin/sluiten.yaml  

      - !include /config/churchlane/cards/card/button/menu/geen.yaml
      - !include /config/churchlane/cards/card/button/menu/toggle_energy.yaml
      - !include /config/churchlane/cards/card/button/menu/refresh.yaml
      
      - !include /config/churchlane/cards/card/button/afdekkingen/slaapkamer/open.yaml
      - !include /config/churchlane/cards/card/button/afdekkingen/slaapkamer/stop.yaml
      - !include /config/churchlane/cards/card/button/afdekkingen/slaapkamer/dicht.yaml
    
      - !include /config/churchlane/cards/card/button/menu/geen.yaml
      - !include /config/churchlane/cards/card/button/menu/toggle_remotecontrol.yaml
      - !include /config/churchlane/cards/card/button/menu/beheer.yaml

Styling that repeated many times, I always include just one for one purpose. So you have to maintain only 1 file. And not every card on every dashboard.