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.
+ button in the top menu bar.
Use titles and icons to describe the content of views.
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.
- 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
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.
- title: Garden icon: mdi:flower
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)
views: - title: Ian visible: - user: 581fca7fdc014b8b894519cc531f9a04 cards: ... - title: Chelsea visible: - user: 6e690cc4e40242d2ab14cf38f1882ee6 cards: ... - title: Admin visible: db34e025e5c84b70968f6530823b117f cards: ...
If you define
visible as objects instead of a boolean to specify conditions for displaying the view tab:
You can change the layout of a view by using a different view type. The default is
- title: Map type: panel cards: - type: map entities: - device_tracker.demo_paulus - zone.home
Set a separate theme for the view and its cards.
- title: Home theme: happy
# Example configuration.yaml entry frontend: themes: example: lovelace-background: center / cover no-repeat url("/local/background.png") fixed
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
- title: Map subview: true
Subview with custom back path:
- title: Map subview: true back_path: /lovelace/home
A list of view configurations.
List of entities IDs or
badge objects to display as badges. Note that badges do not show when view is in panel mode.
Icon-name from Material Design Icons. You can use any icon from Material Design Icons. Prefix the icon name with
mdi:home. Only for “View”, not for “Subview”.
Hide/show the view tab from all users or a list of individual
- 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
- title: "Energieprijzen" path: "energieprijzen" subview: true back_path: "/ui-data/climate" cards: - type: entities entities: - sensor.today_avg_price