Subviews, how do you make/safe/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