Problem creating multiples Lovelace Dashboards

dubbfredda · November 11, 2022, 12:31pm

Hi,
I try to create multiples dashboards in lovelace.
Today I have a yaml dashboard and would like to change to a main UI dashboard with additional yaml dashboards.
According to the example from the manual you should be able to do that.

But I can’t get it to work.
I have following code in the configuration.yaml file.

The syntax seems to be right, no error.
But it don’t seems to read my yaml-files. If I change the files, nothing changes.
And I can’t use the “Edit Dashboard” menu. Get following error

Do anyone see what I’m doing wrong ?

Heinz · November 11, 2022, 1:04pm

Maybe the path to your yaml-files is wrong. Did you try it (for testing purpose) with file(s) located directly in config-folder?

HasQT · November 11, 2022, 1:27pm

Is that error coming up when you try to edit your main dashboard or a yaml dashboard?

That image you linked says you can also use yaml dashboards.

It doesn’t say you can edit the yaml dashboards via the UI editor…

Why not just make UI dashboards via settings > dashboards?

dubbfredda · November 11, 2022, 2:09pm

Well the only message I get is the last picture I attached.
Saying that I have yaml mode activated which I believed I hade deactivated in the configuration.yaml file.
I don’t what to edit my yaml dashboad via the UI editor. I only would like to edit my main UI dashboard with the editor. And the yaml dashboard will I continue to edit in a text editor.

HasQT · November 11, 2022, 3:02pm

This works for me.
I can edit the main dash
The switches dash gives the edit UI is not available in yaml mode.
Did you try a restart after changing yaml mode to storage on the main dash.

lovelace:
  mode: storage
  dashboards:
    lovelace-switches:
      mode: yaml
      title: Switches
      icon: mdi:dip-switch
      show_in_sidebar: true
      filename: /config/lovelace_views/lovelace-switches.yaml

dubbfredda · November 12, 2022, 3:49pm

@HasQT now I haven’t try to restart, will do that!
One other question. Do I need a ui-lovelace.yaml file, main file in the config-folder.
If I do, what should it include.
I would like to split my other yaml-files into different files in a seperate folder, lovelace_views.

HasQT · November 12, 2022, 4:09pm

You mean an !include ?

!include file_for_lovelace.yaml

So that this wouldn’t be in configuration.yaml?

lovelace:
  mode: storage
  dashboards:
    lovelace-switches:
      mode: yaml
      title: Switches
      icon: mdi:dip-switch
      show_in_sidebar: true
      filename: /config/lovelace_views/lovelace-switches.yaml

Or do you mean a separate file for switches dash and sauna? It will currently be a separate file the way you have it set it. lovelace-sauna.yaml

dubbfredda · November 14, 2022, 7:48am

I started with one yaml-file, ui-lovelace.yaml in my config folder.
All my lovelace configuration in that file.
But now I would like to have the main dashboard as UI and my additional dashboard as yaml. And the additional dashboards would I all like to slip into different files.
Now the question is what I should do with my old ui-lovelace.yaml file?
If I don’t split the yaml configuration in to separate files, should the yaml dashboard be in the ui-lovelace.yaml file?
And what happens with the ui-lovelace.yaml file when I split the yaml-configurations into separate files?

HasQT · November 14, 2022, 9:15am

Make a backup of your current setup.

Your old lovelace file should have been converted to UI and stored in the .storage as json

/config/.storage/lovelace

It would be best to confirm that.

That should make your existing ui-lovelace.yaml redundant. So you can delete that file.
It would be best to check and have a backup for that…

The way you are setting it up currently is for splitting into separate files into lovelace_views folder

dubbfredda · November 14, 2022, 10:04am

I don’t have “/config/.starage/lovelace”.
See picture

But I did a local copy of the ui-lovelace.yaml file.
Now I the main UI dashboard is working.

Not configured yet…but working
I can edit the dashboard by the “Edit dashboard” menu.

Moved my yaml dashboard (lovelace-switches.yaml) to the main config folder, see picture above from the configuration.yaml file.
But the yaml dashboard want show up in the sidebar or the top menu.
Does lovelace-switches.yaml have the correct syntax ?

HasQT · November 14, 2022, 10:45am

You haven’t made it visible.

.storage is a hidden directory
It is also easy to break HA if you mess around in .storage

Capture

Hard to say if your syntax is correct.
You would need to post your code in codeblock </> or backticks ```

Try that and go from there.

title: Home
views:
  - path: default_view
    title: Home
    cards:
      - type: entities
        entities:
          - person.bob
      - type: grid
        square: false
        columns: 1
        cards:
          - type: media-control
            entity: media_player.family_room
          - type: media-control
            entity: media_player.home_group
      - type: weather-forecast
        entity: weather.forecast_home
        show_forecast: false
  - theme: Backend-selected

dubbfredda · November 14, 2022, 11:48am

Can’t see switches or sauna dashboards
This is who my configuration.yaml file looks like

# Lovelace frontend
lovelace:
  # mode: yaml
  mode: storage
  dashboards:
    lovelace-switches:
      mode: yaml
      title: Switches
      icon: mdi:dip-switch
      show_in_sidebar: true
      filename: lovelace-switches.yaml

    lovelace-sauna:
      mode: yaml
      title: Sauna
      icon: mdi:dip-switch
      show_in_sidebar: true
      filename: lovelace-sauna_view.yaml

lovelace-switches.yaml

#########################################
####        Switches view            ####
#########################################

title: Switches
views:
  - icon: mdi:light-switch
    #id: switch
    title: Switches
    cards:
      - type: vertical-stack
        cards:
          - type: entities
            title: Wall plugs 433MHz
            show_header_toggle: true
            entities:
              - entity: switch.ac_1877bfe_16
                name: Livingroom window light (wall plug1)
                icon: mdi:power-socket-eu
                state_color: true
              - entity: switch.ac_1877bfe_15
                name: Livingroom window light (wall plug2)
                icon: mdi:power-socket-eu
                state_color: true
              - entity: switch.ac_1877bfe_14
                name: Alva window light (wall plug3)
                icon: mdi:power-socket-eu
                state_color: true
              - entity: switch.ac_1877bfe_13
                name: TV light (wall plug4)
                icon: mdi:power-socket-eu
                state_color: true
              - entity: switch.ac_1ababfe_16
                name: Meja window light (wall plug5)
                icon: mdi:power-socket-eu
                state_color: true
              - entity: switch.ac_1ababfe_15
                name: Alva mirror light (wall plug6)
                icon: mdi:power-socket-eu
                state_color: true
              - entity: switch.ac_1ababfe_14
                name: Meja mirror light (wall plug7)
                icon: mdi:power-socket-eu
                state_color: true
              - entity: switch.ac_1ababfe_13
                name: Wall plug 8
                icon: mdi:power-socket-eu
              - entity: switch.ac_1646b2e_16
                name: Wall plug 9
                state_color: true
                icon: mdi:power-socket-eu
              - entity: switch.ac_1646b2e_15
                name: Wall plug 10
                icon: mdi:power-socket-eu
                state_color: true
              - entity: switch.ac_1646b2e_14
                name: Wall plug 11
                icon: mdi:power-socket-eu
                state_color: true
              - entity: switch.ac_1f5e6f6_3
                name: Wall plug out 1
                icon: mdi:power-socket-eu
                state_color: true

      - type: vertical-stack
        cards:
          - type: entities
            title: Switches Zwave
            show_header_toggle: true
            entities:
              - entity: switch.flush_2_relay_3
                icon: mdi:track-light
                state_color: true
              - entity: switch.flush_2_relay_4
                icon: mdi:track-light
                state_color: true
              # - entity: switch.fibaro_system_fgs223_double_relay_switch
              #   icon: mdi:track-light
              #   state_color: true
              # - entity: switch.fibaro_system_fgs223_double_relay_switch_2
              #   icon: mdi:track-light
              #   state_color: true
              # - entity: switch.fibaro_system_fgs223_double_relay_switch_3
              #   icon: mdi:outdoor-lamp
              #   state_color: true
              # - entity: switch.fibaro_system_fgs223_double_relay_switch_4
              #   icon: mdi:track-light
              #   state_color: true
              # - entity: switch.fibaro_system_fgs223_double_relay_switch_6
              #   icon: mdi:track-light
              #   state_color: true
              # - entity: switch.fibaro_system_fgs223_double_relay_switch_9
              #   icon: mdi:track-light
              #   state_color: true

          - type: entities
            title: Wall plugs Zwave
            show_header_toggle: true
            entities:
              - entity: switch.fibaro_system_fgwpe_f_wall_plug_switch
                name: Computer wall plug
                icon: mdi:power-socket-eu
                state_color: true
              - entity: sensor.fibaro_system_fgwpe_f_wall_plug_power
              - entity: sensor.fibaro_system_fgwpe_f_wall_plug_energy
              - entity: sensor.fibaro_system_fgwpe_f_wall_plug_exporting

          - type: entities
            title: Wall plugs Zigbee
            show_header_toggle: true
            entities:
              - entity: switch.tvligtht_tradfrioutlet1
                name: TV light (Zigbee wall plug1)
                icon: mdi:power-socket-eu
                state_color: true

      - type: vertical-stack
        cards:
          - type: entities
            title: Enable Automation
            show_header_toggle: false
            entities:
              - entity: input_boolean.switch_at_home
              - entity: input_boolean.switch_kitchen_win_light_en
              - entity: input_boolean.switch_facade_light_en
              - entity: input_boolean.switch_hallway_win_light_en
              - entity: input_boolean.switch_stairs_win_light_en
              - entity: input_boolean.switch_dining_win_light_en
              - entity: input_boolean.switch_alva_win_light_en
              - entity: input_boolean.switch_tv_light_en
              - entity: input_boolean.switch_meja_win_light_en
              - entity: input_boolean.switch_alva_mirror_light_en
              - entity: input_boolean.switch_meja_mirror_light_en
              - entity: input_boolean.switch_wallplug8_en
              - entity: input_boolean.switch_wallplug9_en
              - entity: input_boolean.switch_wallplug10_en
              - entity: input_boolean.switch_wallplug11_en
              - entity: input_boolean.switch_wallplug_out1_en

lovelace-sauna_view.yaml

title: Sauna
views:
  - icon: mdi:light-switch
    title: Sauna
    cards:
      - type: horizontal-stack
        cards:
          - type: vertical-stack
            card:
            type: entities
            title: Sauna lights
            show_header_toggle: false
            entities:
              - entity: switch.flush_2_relay_2_2

            card:
            type: entities
            title: LED-light
            show_header_toggle: false
            entities:
              - light.rgbw_controller
              - light.rgbw_controller_2
              - light.rgbw_controller_2_2
              - light.rgbw_controller_3
              - light.rgbw_controller_4
              - light.rgbw_controller_5

          - type: vertical-stack
            card:
            type: entities
            title: Sauna control
            show_header_toggle: false
            entities:
              - entity: input_boolean.switch_sauna_on_off
              - entity: switch.flush_2_relay
              - entity: switch.flush_2_relay_2
              - entity: input_boolean.switch_sauna_auto_en
              - entity: input_number.slider_sauna_hour
              - entity: input_number.slider_sauna_minutes

            card:
            type: gauge
            title: Sauna Temp
            entity: sensor.flush_2_relay_air_temperature
            min: 10
            max: 100
            theme: default
            severity:
              green: 0
              yellow: 30
              red: 50

dubbfredda · November 14, 2022, 11:59am

My mistake
I can’t edit the dashboard from the “Edit dashboard” menu.
Get this message when I try to edit the dashboard

I guess this mean that I don’t have the right configuration to enable the main UI dashboard.

HasQT · November 14, 2022, 12:01pm

Have you done a restart since you added this?

# Lovelace frontend
lovelace:
  # mode: yaml
  mode: storage
  dashboards:
    lovelace-switches:
      mode: yaml
      title: Switches
      icon: mdi:dip-switch
      show_in_sidebar: true
      filename: lovelace-switches.yaml

    lovelace-sauna:
      mode: yaml
      title: Sauna
      icon: mdi:dip-switch
      show_in_sidebar: true
      filename: lovelace-sauna_view.yaml

This had some errors.
lovelace-sauna_view.yaml - fixed

title: Sauna
views:
  - icon: mdi:light-switch
    title: Sauna
    cards:
      - type: horizontal-stack
        cards:
          - type: vertical-stack
            cards:
            - type: entities
              title: Sauna lights
              show_header_toggle: false
              entities:
                - entity: switch.flush_2_relay_2_2

            
            - type: entities
              title: LED-light
              show_header_toggle: false
              entities:
                - light.rgbw_controller
                - light.rgbw_controller_2
                - light.rgbw_controller_2_2
                - light.rgbw_controller_3
                - light.rgbw_controller_4
                - light.rgbw_controller_5

          - type: vertical-stack
            cards:
            - type: entities
              title: Sauna control
              show_header_toggle: false
              entities:
                - entity: input_boolean.switch_sauna_on_off
                - entity: switch.flush_2_relay
                - entity: switch.flush_2_relay_2
                - entity: input_boolean.switch_sauna_auto_en
                - entity: input_number.slider_sauna_hour
                - entity: input_number.slider_sauna_minutes

            
            - type: gauge
              title: Sauna Temp
              entity: sensor.flush_2_relay_air_temperature
              min: 10
              max: 100
              theme: default
              severity:
                green: 0
                yellow: 30
                red: 50

dubbfredda · November 14, 2022, 12:15pm

Okay, thanks.
That made some changes…
But unfortunately can I still not edit the UI dashboard, receive following message

I only restarted the HA, is that enough?
Or do I need to restart the PC as well

HasQT · November 14, 2022, 12:17pm

you can’t edit yaml dashboards in the ui.

you can have a UI main dashboard and yaml extra dashboards, only the UI one will be ui editable

dubbfredda · November 14, 2022, 12:23pm

I see, I hade the wrong dashboard selected when I tried

One other thing.
I can now see my extra dashboard in the sidebar, as I configured.
But I can still see my old dashboard in the header.

How can I remove this headers and add my new extra dashboard to the header?

HasQT · November 14, 2022, 12:26pm

Click the pencil on the view(not home, it will be on test in my image) and then delete view.

the 3 dots in the top right next to DONE and the ? will let you view the raw config… which is yaml…

dubbfredda · November 14, 2022, 12:39pm

Okay, good now I managed to delete the old headings.
But how do I add my new yaml dashboard to the headings?
The ones I have in the sidebar

One other thing.
Before when I have made a changes to my yaml dashboard I just select refresh and then the new changes will be reloaded but now I can see that the refresh option is not available any more.
Is there any other way to load the yaml changes or do I need to restart the HA?

dubbfredda · November 14, 2022, 12:43pm

I got it, just select the yaml dashboard then the refresh option is there…