Subviews, how do you make/save/link/show them?

[Mariusthvdb (Marius)]

Some weeks into the existence of Subviews, I am still not comfortable with them. Using Yaml mode, I have to create a ‘fake’ dashboard to collect the subviews (which essentially are Views) to collect them in a ‘repository’ and link to them from all other dashboards, like:

# need this 'fake' view to be able to list them in a 'repository of subviews, and link to
# them from other subviews in YAML mode
lovelace:
  dashboards:
    ui-sub-views:
      mode: yaml
      filename: dashboard/dashboards/ui-sub-views.yaml
      title: Sub views
      icon: mdi:subtitles
      require_admin: true
      show_in_sidebar: false

and then the actual view:

views: #!include_dir_merge_list ui-sub-views

  - !include ui-sub-views/subview_energieprijzen.yaml
  - !include ui-sub-views/subview_hue_scenes.yaml
  - !include ui-sub-views/subview_all_lights.yaml

(note the include_dir_merge_list doesnt work, like it does on regular views, so we have to sell them out verbosely, which is a pain really…

Within that folder I save them like:

then, calling the subview in a custom button-card ‘Chip’:

  - type: horizontal-stack
    cards:
      - type: custom:button-card
        template: chip
        tooltip: Hue scenes
        tap_action:
          action: navigate
          navigation_path: /ui-sub-views/hue_scenes
        label: 🚥

      - type: custom:button-card
        template: chip
        tooltip: All lights
        tap_action:
          action: navigate
          navigation_path: /ui-sub-views/all_lights
        label: 💡

Shows like:

Wondering what you all do to show the Subview links, do you use a dedicated button, or maybe some other placeholder for the navigation.

Thanks for any comment or example, Id be glad to consume those
Cheers

[Mariusthvdb (Marius)]

made the buttons to the subviews into something more consistent with my other (square) buttons in the main dashboard. Since I use grid with 4 columns all over, devices to half that into 8, with full size images.

tooltips
in dark theme

in lighter theme

config:

  - type: grid
    columns: 8
    cards:

      - type: custom:button-card
        template: subview
        variables:
          tooltip: Hue scenes
          picture: /local/hue_scenes/hue.jpg
          path: /ui-sub-views/hue_scenes

      - type: custom:button-card
        template: subview
        variables:
          tooltip: All lights
          path: /ui-sub-views/all_lights
          picture: /local/lights/light_bulbs.png

with button_card_template:

subview:
  template:
    - styles_tooltip
  show_entity_picture: true
  size: 100%
  tooltip: >
    [[[ return variables.tooltip; ]]]
  tap_action:
    action: navigate
    navigation_path: >
      [[[ return variables.path; ]]]
  entity_picture: >
    [[[ return variables.picture; ]]]
  styles:
    card:
      - padding: 0px

[Crickus (Dimka)]

Hi Marius
you are probably the only person using subviews with yaml)

I’m trying to go over your tutorial and facing one issue.

It doesn’t matter how many pages I’m including to the subview yaml file.

In both cases the first element from the subview file is opened.

Any other prerequisites should be done maybe?

[Ildar_Gabdullin]

With “!include”, do not place several views into 1 file. One (sub)view = 1 file.

[Mariusthvdb (Marius)]

sorry but I cant really see what you’re doing, because of the huge black blob…

I just checked and I still do what I did back then…

write/save all my subviews (which are essentially regular views, so no difference in the architecture there except for the subview: true) in a dedicated folder.

list them in the ui-sub-views.yaml (so not use the !include_dir_merge_list ui-sub-views):

button_card_templates: !include_dir_merge_named ../button_card_templates
decluttering_templates: !include_dir_named ../decluttering_templates
kiosk_mode: !include ../kiosk-mode/kiosk-mode.yaml
custom_more_info: !include ../custom_more_info/custom_more_info.yaml

views: #!include_dir_merge_list ui-sub-views

  - !include ui-sub-views/subview_alarm_instellingen.yaml
  - !include ui-sub-views/subview_alle_lampen.yaml
  - !include ui-sub-views/subview_aqi.yaml
  - !include ui-sub-views/subview_air_quality.yaml
  - !include ui-sub-views/subview_awtrix.yaml
  - !include ui-sub-views/subview_batterijen.yaml
  - !include ui-sub-views/subview_bluetooth.yaml
  - !include ui-sub-views/subview_boilers.yaml
  - !include ui-sub-views/subview_buienradar.yaml
  - !include ui-sub-views/subview_cloud_remote.yaml
etcetcetc

and call them anywhere you want with a regular action: navigate , also described in the opening post. I use custom:button-card mostly, but you can use any element supporting that action option.

which can look like this, styled according to individual preferences/settings/dynamics: