diff --git a/source/_dashboards/sections.markdown b/source/_dashboards/sections.markdown index fa7aced53b5..14cbdff54d1 100644 --- a/source/_dashboards/sections.markdown +++ b/source/_dashboards/sections.markdown @@ -34,17 +34,36 @@ You can group cards without using horizontal or vertical stack cards. ## Creating a sections view 1. If you have multiple dashboards, in the left sidebar, select the dashboard to which you want to add the sections view. -2. [Add a new view](/dashboards/views/#adding-a-view-to-a-dashboard) and under **View type**, select **Sections**. -3. Select the number of columns you want to see in the new view. Select **Save**. -4. To add a card, select the **Add card** button. +2. Follow the steps on [adding a new view](/dashboards/views/#adding-a-view-to-a-dashboard). + - Under **View type**, select **Sections (experimental)**. +3. Select the maximum number of columns you want to see in the new sections view. +4. When you are done, select **Save**. + - You are now presented with a new, empty view. + - If you chose a background image, the page is filled with that image. + +## Adding sections and cards to a sections view + +Once you have created a sections view, you can populate it with sections and cards. The new section comes with one section to which you can directly add a card. + +1. To add a card, select the **Add card** button. - Follow the [steps on adding cards](/dashboards/cards/#adding-cards-to-your-dashboard). ![Add Section button](/images/dashboards/sections_view_add-card-or-section.png) -5. To add a section, select the **Create section** button. -6. To edit the section title, select the Edit icon button. +2. To add a new section, select the **Create section** button. +3. To edit the section title, select the Edit icon button. - If you leave the section title empty, this line will be hidden. -7. To delete a section, select the Delete icon button. +4. If you want this section to be visible only to specific users or under a certain condition, you can define those conditions: + - On the **Visibility** tab, select **Add condition**. + - Select the type of condition, and enter the parameters. + - If you define multiple conditions, the section is only shown when all conditions are met. + - If you did not define any conditions, the section is always shown, to all users. + +## Deleting a section + +1. To delete a section, go to the dashboard and in the top right corner, select the pencil icon. +2. Open the view with the section you want to delete. +3. Select the Delete icon button. ## Rearranging sections and cards diff --git a/source/dashboards/views.markdown b/source/dashboards/views.markdown index 7ca8f3ef4e0..ed976b66cf7 100644 --- a/source/dashboards/views.markdown +++ b/source/dashboards/views.markdown @@ -14,6 +14,8 @@ related: title: About dashboards - docs: /dashboards/cards/#adding-cards-to-your-dashboard title: Adding cards to a view + - docs: /common-tasks/os/#configuring-access-to-files + title: Configure access to files --- A view is a tab inside a dashboard. For example, the screenshot below shows a separate view for lights on the Overview dashboard. @@ -41,25 +43,33 @@ It is currently not possible to migrate your dashboard from one view type into a ## Adding a view to a dashboard -1. To add a view to your user interface, in the top right corner, select the pencil icon. +1. To add a view to your dashboard, in the top right corner, select the pencil icon. 2. Select the `+` button in the top menu bar. ![Views toolbar](/images/dashboards/views.png) 3. 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. + - If you want to see an icon, select the [view icon](#view-icon). + - If an icon is defined, only the icon is shown. The text only shows as a tooltip. - We use [Material icons](https://pictogrammers.com/library/mdi/). - - Select the view type. + - If you want to link to another view, define the [URL](#url-of-a-view). + - If you want to use a previously defined theme, select the [theme](/integrations/frontend/#themes). + - Select the [view type](#view-type). + - If this view is meant to be used as a [subview](#subview) only, enable the **Subview** toggle. ![The create new view configuration dialog](/images/dashboards/dashboard_view_configuration_01.png) -4. On the **Badges** tab, add badges, if any. - - Note that the sidebar and panel views do not support badges. -5. If this view should not be visible for some users, on the **Visibility** tab, disable the view for those users. +4. To use a background image, on the **Background** tab, select an image. + - **Upload picture** lets you pick an image from the system used to show your Home Assistant UI. + - **Local path** lets you pick an image stored on Home Assistant. For example: `/homeassistant/images/lights_view_background_image.jpg`. + - To store an image on Home Assistant, you need to [configure access to files](/common-tasks/os/#configuring-access-to-files), for example via [Samba](/common-tasks/os/#installing-and-using-the-samba-add-on) or the [Studio Code Server](/common-tasks/os/#installing-and-using-the-visual-studio-code-vsc-add-on) add-on. + - **web URL** let you pick an image from the web. For example `https://www.home-assistant.io/images/frontpage/assist_wake_word.png`. +5. On the **Badges** tab, select the entities you want to be represented by a badge. + - Sidebar and panel views do not support badges. +6. By default, the new section is visible to all users. On the **Visibility** tab, you can disable the view for users. -## Path +## URL of a view 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. @@ -129,7 +139,7 @@ user: type: string {% endconfiguration %} -## Type +## View type You can change the layout of a view by using a different view type. The default is [`masonry`](/dashboards/masonry). diff --git a/source/images/dashboards/dashboard_view_configuration_01.png b/source/images/dashboards/dashboard_view_configuration_01.png index 075fe1bf470..0a23ff9a542 100644 Binary files a/source/images/dashboards/dashboard_view_configuration_01.png and b/source/images/dashboards/dashboard_view_configuration_01.png differ