Help organizing the lovelace UI

Configuration
1

I’ve been on a massive clean up / update effort with HA lately. I just bought a house and before I move I want my install all nice and shiny. That being said I need some guidance on UI organization.

My primary goal is to split admin vs normal user functionality. As the primary user and admin I currently have all rooms/areas with top level views. Everything associated to that room/area is in that view. This includes scenes, scripts, automations, etc. I don’t need users mucking about with things like scenes and scripts. I already have a problem with my girlfriend turning lamps on and off with the physical switch. I also have a couple tabs like Weather and Batteries that aren’t needed by any user other than admin to check if they are working correctly. These are just template sensors for the most part used in advanced scripts.

So far from my research it isnt possible to hide individual cards on a per user/device basis. I found the CCH add on that allows me to hide tabs on a use/device basis tho. With CCH it appears the best approach would be duplicating most of my tabs. For example Kitchen would have a simplified normal user tab and I would also need Kitchen Admin which includes everything in it.

Right now my “Home” view is where all the new and unused stuff dumps into. It’s so much stuff now that the UI is getting twitchy and I must deal with it. So how are others with large setups separating admin functionality from normal user stuff?

2
3

What helped me to organize my huge lovelace config was split it.
You can do it like this in ui-lovelace.yaml:

views:
  - !include ui-lovelace/010_view_home.yaml
  - !include ui-lovelace/020_view_weather.yaml
  - !include ui-lovelace/030_view_alarm.yaml

And so on…
The individual files are inside a folder /homeassistant/.homeassistant/ui-lovelace

Also this approach can prevent you to duplicate a tab. You just have to mention the same file again in views.

4

@andrewdolphin - thanks for that. Not sure why it didnt come up in my searches. I have it installed and will hopefully be using it shortly.

@FunkyBoT - Didn’t know you could do that with the lovelace UI. My entire config is split up as much as it can be already so this will work nicely. I used the ui editor to quickly move things around and get my views created and when i checked out the raw config it was close to 1000 lines long and a bit daunting. Won’t be so bad if each view is a separate file.

5

The only hiccup I’ve run into thus far is I had to nuke the .storage/lovelace file and bounce the docker before the yaml mode would take effect. Other than that this is working out nicely so far. Oh and I had nginx blocking external access to the /local path because I had tileboard configured without authentication but that was my own stupid fault. Got a little more granular with the location configs and all is working again.

title: Home Assistant
resources:
  - url: /local/plugins/lovelace-card-tools/card-tools.js?v=04
    type: js
  - url: /local/plugins/lovelace-state-switch/state-switch.js?v=1
views:
  - !include /config/ui-lovelace/views/010_home.yaml
  - !include /config/ui-lovelace/views/020_security.yaml

Not sure if i will need the sub directory for views but why not have it and not need it then have to change a bunch of stuff later