Views

A View is a tab inside a dashboard. To display cards on the UI you have to define them in views.

You can add a view to your user interface, by clicking the menu (three dots at the top right of the screen) and then Edit Dashboard. Click the + button in the top menu bar.

Use titles and icons to describe the content of views.

Path

You can link to one view from a card in another view when using cards that support navigation (navigation_path). The string supplied here will be appended to the string /lovelace/ to create the path to the view. Do not use special characters in paths. Do not begin a path with a number. This will cause the parser to read your path as a view index.

Example

View configuration:

- title: Living room
  # the final path is /lovelace/living_room
  path: living_room

Picture card configuration:

- type: picture
  image: /local/living_room.png
  tap_action:
    action: navigate
    navigation_path: /lovelace/living_room

View icon

If you define a view icon, the icon instead of the title will be displayed, the title will then be used as a tool-tip.

Example

- title: Garden
  icon: mdi:flower

Visible

You can specify the visibility of views as a whole or per-user. (Note: This is only for the display of the tabs. The URL path is still accessible)

Example

views:
  - title: Ian
    visible:
      - user: 581fca7fdc014b8b894519cc531f9a04
    cards:
      ...
  - title: Chelsea
    visible:
      - user: 6e690cc4e40242d2ab14cf38f1882ee6
    cards:
      ...
  - title: Admin
    visible: db34e025e5c84b70968f6530823b117f
    cards:
      ...

Options For Visible

If you define visible as objects instead of a boolean to specify conditions for displaying the view tab:

Type

You can change the layout of a view by using a different view type. The default is masonry.

Example

- title: Map
  type: panel
  cards:
    - type: map
      entities:
        - device_tracker.demo_paulus
        - zone.home

Theme

Set a separate theme for the view and its cards.

Example

- title: Home
  theme: happy

Background

You can style the background of your views with a theme. You can use the CSS variable lovelace-background. For wallpapers you probably want to use the example below, more options can be found here.

Example

# Example configuration.yaml entry
frontend:
  themes:
    example:
      lovelace-background: center / cover no-repeat url("/local/background.png") fixed

Subview

A “View” can be marked as “Subview”. Subviews won’t show up in the navigation bar on top of the sidebar. Subviews can, for instance, be used to show detailed information; you could link to this subview from a page with a clean look with only basic information (by using cards that support the navigate action). Think of a view with a few thermostats and a subview with status information on the heating/cooling device.

When on the subview, the navigation bar only shows the name of the subview and a back button (no icon is shown). By default, clicking on back button will navigate to the previous view but a custom back path (back_path) can be set.

You can access subviews from other parts of your dashboard by using cards that support the navigate action.

Example

Simple subview:

- title: Map
  subview: true

Subview with custom back path:

- title: Map
  subview: true
  back_path: /lovelace/home

Example

View configuration:

- title: Living room
  badges:
    - device_tracker.demo_paulus
    - entity: light.ceiling_lights
      name: Ceiling Lights
      icon: mdi:bulb
    - entity: switch.decorative_lights
      image: /local/lights.png

Subview configuration:

- title: "Energieprijzen"
  path: "energieprijzen"
  subview: true
  back_path: "/ui-data/climate"

  cards:
    - type: entities
      entities:
        - sensor.today_avg_price