mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-07-09 18:36:51 +00:00
Moving Lovelace Dashboards to Views page (#12707)
* add dashboards Based on this issue - https://github.com/home-assistant/home-assistant.io/issues/12462 As dashboards are not limited to YAML mode, it makes the information on them hard to find when it's a part of Lovelace YAML mode page. I propose to add informatin about dashboards' configuration to the page about Views and rename it accordingly. * move dashboards to views * add link to dashboards * dashes instead of underscores * change link to Dashboards & Views * add /lovelace/views
This commit is contained in:
parent
4bfcad1e28
commit
c369cb84a4
@ -16,7 +16,7 @@
|
||||
<li>{% active_link /lovelace/how-it-works/ How it works %}</li>
|
||||
<li>{% active_link /lovelace/header-footer/ Headers & Footers %}</li>
|
||||
<li>{% active_link /lovelace/yaml-mode/ YAML mode %}</li>
|
||||
<li>{% active_link /lovelace/views/ Views %}</li>
|
||||
<li>{% active_link /lovelace/dashboards-and-views/ Dashboards & Views %}</li>
|
||||
<li>{% active_link /lovelace/actions/ Actions %}</li>
|
||||
<li><a href='https://developers.home-assistant.io/docs/en/lovelace_custom_card.html'>Developing Custom Cards <i icon='icon-external-link'></i></a></li>
|
||||
</ul>
|
||||
|
@ -2088,3 +2088,4 @@
|
||||
|
||||
# Lovelace documentation
|
||||
/lovelace/entity-button /lovelace/button
|
||||
/lovelace/views /lovelace/dashboards-and-views
|
||||
|
@ -1,8 +1,175 @@
|
||||
---
|
||||
title: "Views"
|
||||
title: "Dashboards and Views"
|
||||
description: "The Lovelace UI is a powerful and configurable interface for Home Assistant."
|
||||
---
|
||||
|
||||
### 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 (`-`).
|
||||
|
||||
```yaml
|
||||
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:
|
||||
```yaml
|
||||
lovelace:
|
||||
mode: storage
|
||||
# Add yaml dashboards
|
||||
dashboards:
|
||||
lovelace-yaml:
|
||||
mode: yaml
|
||||
title: YAML
|
||||
icon: mdi:script
|
||||
show_in_sidebar: true
|
||||
filename: lovelace.yaml
|
||||
```
|
||||
|
||||
{% configuration Lovelace %}
|
||||
mode:
|
||||
required: true
|
||||
description: "In what mode should the main Lovelace panel be, `yaml` or `storage` (UI managed)."
|
||||
type: string
|
||||
resources:
|
||||
required: false
|
||||
description: "List of resources that should be loaded when you use Lovelace. Only use this when mode is `yaml`."
|
||||
type: list
|
||||
keys:
|
||||
url:
|
||||
required: true
|
||||
description: The URL of the resource to load.
|
||||
type: string
|
||||
type:
|
||||
required: true
|
||||
description: "The type of resource, this should be either `module` for a JavaScript module or `css` for a StyleSheet."
|
||||
type: string
|
||||
dashboards:
|
||||
required: false
|
||||
description: Additional Lovelace YAML dashboards. The key is used for the URL and should contain a hyphen (`-`)
|
||||
type: map
|
||||
keys:
|
||||
mode:
|
||||
required: true
|
||||
description: "The mode of the dashboard, this should always be `yaml`. Dashboards in `storage` mode can be created in the Lovelace configuration panel."
|
||||
type: string
|
||||
filename:
|
||||
required: true
|
||||
description: "The file in your `config` directory where the Lovelace configuration for this panel is."
|
||||
type: string
|
||||
title:
|
||||
required: true
|
||||
description: "The title of the dashboard, will be used in the sidebar."
|
||||
type: string
|
||||
icon:
|
||||
required: false
|
||||
description: The icon to show in the sidebar.
|
||||
type: string
|
||||
show_in_sidebar:
|
||||
required: false
|
||||
description: Should this view be shown in the sidebar.
|
||||
type: boolean
|
||||
default: true
|
||||
require_admin:
|
||||
required: false
|
||||
description: Should this view be only accessible for admin users.
|
||||
type: boolean
|
||||
default: false
|
||||
{% endconfiguration %}
|
||||
|
||||
As a super minimal example of a Lovelace dashboard config, here's the bare minimum you will need for it to work:
|
||||
|
||||
```yaml
|
||||
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:
|
||||
|
||||
```yaml
|
||||
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.
|
||||
|
||||
<p class="img">
|
@ -25,165 +25,4 @@ To revert back to using the UI to edit your Lovelace interface, remove the `love
|
||||
|
||||
### Advanced configuration
|
||||
|
||||
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 (`-`).
|
||||
|
||||
```yaml
|
||||
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:
|
||||
```yaml
|
||||
lovelace:
|
||||
mode: storage
|
||||
# Add yaml dashboards
|
||||
dashboards:
|
||||
lovelace-yaml:
|
||||
mode: yaml
|
||||
title: YAML
|
||||
icon: mdi:script
|
||||
show_in_sidebar: true
|
||||
filename: lovelace.yaml
|
||||
```
|
||||
|
||||
{% configuration Lovelace %}
|
||||
mode:
|
||||
required: true
|
||||
description: "In what mode should the main Lovelace panel be, `yaml` or `storage` (UI managed)."
|
||||
type: string
|
||||
resources:
|
||||
required: false
|
||||
description: "List of resources that should be loaded when you use Lovelace. Only use this when mode is `yaml`."
|
||||
type: list
|
||||
keys:
|
||||
url:
|
||||
required: true
|
||||
description: The URL of the resource to load.
|
||||
type: string
|
||||
type:
|
||||
required: true
|
||||
description: "The type of resource, this should be either `module` for a JavaScript module or `css` for a StyleSheet."
|
||||
type: string
|
||||
dashboards:
|
||||
required: false
|
||||
description: Additional Lovelace YAML dashboards. The key is used for the URL and should contain a hyphen (`-`)
|
||||
type: map
|
||||
keys:
|
||||
mode:
|
||||
required: true
|
||||
description: "The mode of the dashboard, this should always be `yaml`. Dashboards in `storage` mode can be created in the Lovelace configuration panel."
|
||||
type: string
|
||||
filename:
|
||||
required: true
|
||||
description: "The file in your `config` directory where the Lovelace configuration for this panel is."
|
||||
type: string
|
||||
title:
|
||||
required: true
|
||||
description: "The title of the dashboard, will be used in the sidebar."
|
||||
type: string
|
||||
icon:
|
||||
required: false
|
||||
description: The icon to show in the sidebar.
|
||||
type: string
|
||||
show_in_sidebar:
|
||||
required: false
|
||||
description: Should this view be shown in the sidebar.
|
||||
type: boolean
|
||||
default: true
|
||||
require_admin:
|
||||
required: false
|
||||
description: Should this view be only accessible for admin users.
|
||||
type: boolean
|
||||
default: false
|
||||
{% endconfiguration %}
|
||||
|
||||
As a super minimal example of a Lovelace dashboard config, here's the bare minimum you will need for it to work:
|
||||
|
||||
```yaml
|
||||
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:
|
||||
|
||||
```yaml
|
||||
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**.
|
||||
```
|
||||
You can define multiple dashboards that all have their own YAML file, and add custom resources that are shared by all dashboards. For more details refer to [this](/lovelace/dashboards-and-views.markdown) page.
|
||||
|
Loading…
x
Reference in New Issue
Block a user