lovelace: split ui-lovelace into multiple files

To enable the lovely user interface of hass.io named Lovelace I had to alter my configuration.yaml and create a file named ui-lovelace.yaml in the config directory.

In configuration.yaml I added

lovelace:
  mode: yaml

Example of a very simple ui-lovelace.yaml that just states the heading of the Lovelace view

title: My Lovelace Heading

To make the changes take effect I had to reboot my system.

After some weeks of development I realized that my ui-lovelace.yaml started to be hard to maintain as it had grown to many hundred lines of code. I therefore decided to split the ui-lovelace.yaml into multiple files, one for each view (tab) I had in my user interface.

Figure 1. hass.io user interface with six views.

This is how I did it.

I created a ui-lovelace folder in the config directory. Inside the ui-lovelace folder I created the yaml-files I wanted to distribute my current ui-lovelace.yaml onto, one for each view.

ui-lovelace-dashboard.yaml
ui-lovelace-scenes.yaml
ui-lovelace-lamps.yaml
ui-lovelace-graphs.yaml
ui-lovelace-forecast.yaml
ui-lovelace-automation.yaml

To connect the yaml files in the ui-lovelace folder to my current ui-lovelace.yaml file I added the following code in ui-lovelace.yaml.

views:
  - !include /config/ui-lovelace/ui-lovelace-dashboard.yaml
  - !include /config/ui-lovelace/ui-lovelace-lamps.yaml
  - !include /config/ui-lovelace/ui-lovelace-graphs.yaml
  - !include /config/ui-lovelace/ui-lovelace-forecast.yaml
  - !include /config/ui-lovelace/ui-lovelace-scenes.yaml
  - !include /config/ui-lovelace/ui-lovelace-automation.yaml

The final part is to get the syntax right in the yaml files. For example this is how my ui-lovelace-graphs.yaml looks like.

title: graphs
icon: mdi:chart-bell-curve-cumulative

cards:
  - type: history-graph
    title: 'Indoor Temperature'
    entities:
      - sensor.lounge_temperature
      - sensor.tyra_temperature
      - sensor.aeon_labs_zw100_multisensor_6_temperature
    hours_to_show: 80

  - type: history-graph
    title: 'Indoor Humidity'
    entities:
      - sensor.lounge_humidity
      - sensor.tyra_humidity
      - sensor.aeon_labs_zw100_multisensor_6_relative_humidity
    hours_to_show: 80

  - type: history-graph
    title: 'Outdoor Temperature'
    entities:
      - sensor.forrad_temperature
      - entity: sensor.forecast0_temperature
        name: Utomhus
    hours_to_show: 80

  - type: history-graph
    title: 'Outdoor Humidity'
    entities:
      - sensor.forrad_humidity
    hours_to_show: 80

I now have much better control of my Lovelace code.

Please let me know in the comments field if you have any questions or comments.