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
Configuration Variables
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:
, ie mdi:home
. Only for “View”, not for “Subview”.
Hide/show the view tab from all users or a list of individual visible
objects.
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