Dashboards and Views


Dashboards

You can define multiple dashboards that all have their own YAML file, and add custom resources that are shared by all dashboards.

The key of the dashboard is used as the URL, this needs to contain a hyphen (-).

lovelace:
  mode: yaml
  # Include external resources only add when mode is yaml, otherwise manage in the resources in the lovelace configuration panel.
  resources:
    - url: /local/my-custom-card.js
      type: module
    - url: /local/my-webfont.css
      type: css
  # Add more dashboards
  dashboards:
    lovelace-generated: # Needs to contain a hyphen (-)
      mode: yaml
      filename: notexist.yaml
      title: Generated
      icon: mdi:tools
      show_in_sidebar: true
      require_admin: true
    lovelace-hidden:
      mode: yaml
      title: hidden
      show_in_sidebar: false
      filename: hidden.yaml

You can also add YAML dashboards when your main dashboard is UI configurated:

lovelace:
  mode: storage
  # Add yaml dashboards
  dashboards:
    lovelace-yaml:
      mode: yaml
      title: YAML
      icon: mdi:script
      show_in_sidebar: true
      filename: lovelace.yaml

Configuration Variables

mode

(string)(Required)

In what mode should the main Lovelace panel be, yaml or storage (UI managed).

resources

(list)(Optional)

List of resources that should be loaded when you use Lovelace. Only use this when mode is yaml.

url

(string)(Required)

The URL of the resource to load.

type

(string)(Required)

The type of resource, this should be either module for a JavaScript module or css for a StyleSheet.

dashboards

(map)(Optional)

Additional Lovelace YAML dashboards. The key is used for the URL and should contain a hyphen (-)

mode

(string)(Required)

The mode of the dashboard, this should always be yaml. Dashboards in storage mode can be created in the Lovelace configuration panel.

filename

(string)(Required)

The file in your config directory where the Lovelace configuration for this panel is.

title

(string)(Required)

The title of the dashboard, will be used in the sidebar.

icon

(string)(Optional)

The icon to show in the sidebar.

show_in_sidebar

(boolean)(Optional)

Should this view be shown in the sidebar.

Default value:

true

require_admin

(boolean)(Optional)

Should this view be only accessible for admin users.

Default value:

false

As a super minimal example of a Lovelace dashboard config, here’s the bare minimum you will need for it to work:

title: My Awesome Home
views:
    # View tab title.
  - title: Example
    cards:
        # The markdown card will render markdown text.
      - type: markdown
        title: Lovelace
        content: >
          Welcome to your **Lovelace UI**.

A slightly more advanced example:

title: My Awesome Home
views:
    # View tab title.
  - title: Example
    # Unique path for direct access /lovelace/${path}
    path: example
    # Each view can have a different theme applied. Theme should be defined in the frontend.
    theme: dark-mode
    # The cards to show on this view.
    cards:
        # The filter card will filter entities for their state
      - type: entity-filter
        entities:
          - device_tracker.paulus
          - device_tracker.anne_there
        state_filter:
          - 'home'
        card:
          type: glance
          title: People that are home

        # The picture entity card will represent an entity with a picture
      - type: picture-entity
        image: https://www.home-assistant.io/images/default-social.png
        entity: light.bed_light

    # Specify a tab icon if you want the view tab to be an icon.
  - icon: mdi:home-assistant
    # Title of the view. Will be used as the tooltip for tab icon
    title: Second view
    cards:
        # Entities card will take a list of entities and show their state.
      - type: entities
        # Title of the entities card
        title: Example
        # The entities here will be shown in the same order as specified.
        # Each entry is an entity ID or a map with extra options.
        entities:
          - light.kitchen
          - switch.ac
          - entity: light.living_room
            # Override the name to use
            name: LR Lights

        # The markdown card will render markdown text.
      - type: markdown
        title: Lovelace
        content: >
          Welcome to your **Lovelace UI**.

Views

To display cards on the UI you have to define them in views. Views sort cards in columns based on their card size. If you want to group some cards you have to use stack cards.

Views toolbar Use titles and icons to describe the content of views.

Configuration Variables

views

(list)(Required)

A list of view configurations.

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)

Paths are used in the URL, more info below.

Default value:

view index

icon

(string)(Optional)

Icon-name from Material Design Icons.

panel

(boolean)(Optional)

Renders the view in panel mode, more info below.

Default value:

false

background

(string)(Optional)

Style the background using CSS, more info below.

theme

(string)(Optional)

Themes view and cards, more info below.

visible

(boolean | list)(Optional)

Hide/show the view tab from all users or a list of individual visible objects.

Default value:

true

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

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

Icon

If you define an icon the title will 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:

Configuration Variables

user

(string)(Required)

User id that can see the view tab (unique hex value found on the Users configuration page).

Panel

Setting panel true sets the view to panel mode. In this mode the first card is rendered full-width, other cards in the view will not be rendered. This mode is good when using cards like map, stack or picture-elements. Note that badges will not appear in Panel Mode.

Example

- title: Map
  panel: true
  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

Badges

State Label Badge

The State Label badge allows you to dislay a state badge

type: state-label
entity: light.living_room

Configuration Variables

type

(string)(Required)

entity-button

entity

(string)(Required)

Home Assistant entity ID.

name

(string)(Optional)

Overwrites friendly name.

Default value:

Name of Entity

icon

(string)(Optional)

Overwrites icon or entity picture.

Default value:

Entity Domain Icon

image

(string)(Optional)

The URL of an image.

show_name

(boolean)(Optional)

Show name.

Default value:

true

show_icon

(boolean)(Optional)

Show icon.

Default value:

true

tap_action

(map)(Optional)

Action to take on tap

action

(string)(Required)

Action to perform (more-info, toggle, call-service, navigate, url, none)

Default value:

toggle

navigation_path

(string)(Optional)

Path to navigate to (e.g., /lovelace/0/) when action defined as navigate

Default value:

none

url_path

(string)(Optional)

Path to navigate to (e.g., https://www.home-assistant.io) when action defined as url

Default value:

none

service

(string)(Optional)

Service to call (e.g., media_player.media_play_pause) when action defined as call-service

Default value:

none

service_data

(string)(Optional)

Service data to include (e.g., entity_id: media_player.bedroom) when action defined as call-service

Default value:

none

confirmation

(boolean | map)(Optional)

Present a confirmation dialog to confirm the action. See confirmation object below

Default value:

false

hold_action

(map)(Optional)

Action to take on tap-and-hold

action

(string)(Required)

Action to perform (more-info, toggle, call-service, navigate, url, none)

Default value:

more-info

navigation_path

(string)(Optional)

Path to navigate to (e.g., /lovelace/0/) when action defined as navigate

Default value:

none

url_path

(string)(Optional)

Path to navigate to (e.g., https://www.home-assistant.io) when action defined as url

Default value:

none

service

(string)(Optional)

Service to call (e.g., media_player.media_play_pause) when action defined as call-service

Default value:

none

service_data

(string)(Optional)

Service data to include (e.g., entity_id: media_player.bedroom) when action defined as call-service

Default value:

none

confirmation

(boolean | map)(Optional)

Present a confirmation dialog to confirm the action. See confirmation object below

Default value:

false

double_tap_action

(map)(Optional)

Action to take on double tap

action

(string)(Required)

Action to perform (more-info, toggle, call-service, navigate, url, none)

Default value:

more-info

navigation_path

(string)(Optional)

Path to navigate to (e.g., /lovelace/0/) when action defined as navigate

Default value:

none

url_path

(string)(Optional)

Path to navigate to (e.g., https://www.home-assistant.io) when action defined as url

Default value:

none

service

(string)(Optional)

Service to call (e.g., media_player.media_play_pause) when action defined as call-service

Default value:

none

service_data

(string)(Optional)

Service data to include (e.g., entity_id: media_player.bedroom) when action defined as call-service

Default value:

none

confirmation

(boolean | map)(Optional)

Present a confirmation dialog to confirm the action. See confirmation object below

Default value:

false

Options For Confirmation

If you define confirmation as an object instead of boolean, you can add more customization and configurations:

Configuration Variables

text

(string)(Optional)

Text to present in the confirmation dialog.

exemptions

(list)(Optional)

List of exemption objects. See below

Options For Exemptions

Configuration Variables

user

(string)(Required)

User id that can see the view tab.

Entity Filter Badge

This badge allows you to define a list of entities that you want to track only when in a certain state. Very useful for showing lights that you forgot to turn off or show a list of people only when they’re at home.

Configuration Variables

type

(string)(Required)

entity-filter

entities

(list)(Required)

A list of entity IDs or entity objects, see below.

state_filter

(list)(Required)

List of strings representing states or filter objects, see below.

Options For Entities

If you define entities as objects instead of strings (by adding entity: before entity ID), you can add more customization and configurations:

Configuration Variables

type

(string)(Optional)

Sets a custom badge type: custom:my-custom-badge

entity

(string)(Required)

Home Assistant entity ID.

name

(string)(Optional)

Overwrites friendly name.

icon

(string)(Optional)

Overwrites icon or entity picture.

image

(string)(Optional)

The URL of an image.

state_filter

(list)(Optional)

List of strings representing states or filter objects, see below.

Options For state_filter

If you define state_filter as objects instead of strings (by adding value: before your state value), you can add more customization to your filter:

Configuration Variables

value

(string)(Required)

String representing the state.

operator

(string)(Optional)

Operator to use in the comparison. Can be ==, <=, <, >=, >, != or regex.

attribute

(string)(Optional)

Attribute of the entity to use instead of the state.

Examples

Show only active switches or lights in the house

type: entity-filter
entities:
  - entity: light.bed_light
    name: Bed
  - light.kitchen_lights
  - light.ceiling_lights
state_filter:
  - "on"

Specify filter for a single entity

type: entity-filter
state_filter:
  - "on"
  - operator: ">"
    value: 90
entities:
  - sensor.water_leak
  - sensor.outside_temp
  - entity: sensor.humidity_and_temp
    state_filter:
      - operator: ">"
        value: 50
        attribute: humidity