A view is a tab inside a dashboard. For example, the screenshot below shows a separate view for lights on the Overview dashboard.
A lights view tab on the Overview dashboard
Views control the layout.
The three basic view layouts: panel, sidebar, and masonry
There are four different view types:
- Panel: Displays one card in full width. For example a map or an image.
- Sidebar: Arranges cards in 2 columns, a wide one and a smaller one on the right.
- Masonry (default): Arranges cards in columns based on their card size.
- Sections (experimental): Arranges cards in a grid system and lets you group them in sections.
It is currently not possible to migrate your dashboard from one view type into another. For example, if you have a dashboard in masonry view, and want it in sections view, you need to create a new view.
Adding a view to a dashboard
To add a view to your user interface, in the top right corner, select the pencil icon.
Select the
+
button in the top menu bar.Define the view settings:
- If you want a view title, enter the Title.
- If you want to see an icon, select the icon.
- Note: If an icon is defined, the title text only shows as a tooltip.
- We use Material icons.
- Select the view type.
On the Badges tab, add badges, if any.
- Note that the sidebar and panel views do not support badges.
If this view should not be visible for some users, on the Visibility tab, disable the view for those users.
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 objects
If you define visible
as objects instead of a boolean to specify conditions for displaying the view tab:
Configuration Variables
user string Required
User ID that can see the view tab (unique hex value found on the Users configuration page).
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 entryfrontend: 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
Configuration Variables
views list Required
A list of view configurations.
type string (Optional, default: masonry)
The type of the view.
title string Required
The title or name.
badges list (Optional)
List of entities IDs or badge
objects to display as badges. Note that badges do not show when view is in panel mode.
cards list (Optional)
Cards to display in this view.
path string (Optional, default: view index)
Paths are used in the URL.
icon string (Optional)
Icon-name from Material Design Icons. You can use any icon from Material Design Icons. Prefix the icon name with mdi:
, ie mdi:home
. Only for “View”, not for “Subview”.
background string (Optional)
Style the background using CSS.
theme string (Optional)
Themes view and cards.
visible boolean | list (Optional, default: true)
Hide/show the view tab from all users or a list of individual visible
objects.
subview boolean (Optional, default: false)
Mark the view as “Subview”.
back_path string (Optional)
Only for “Subview”. Path to navigate when clicking on back button.
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
Related topics
Help us to improve our documentation
Suggest an edit to this page, or provide/view feedback for this page.