Area Dashboard Strategy

Fully configurabe Dashboard with View per Area and auto-populating entities ordered in Grids.

Area Strategy

The dashboard was designed to be fully responsive! You can absolutely use this also on tablets or phones!

Area Strategy Responsive

The Dashboard contains all entities assigned to the Area selected in the Navigation (either via device or entity itself) that are not hidden or disabled.

Internally it uses a Filtering System many of the Strategies use to seek out the desired entities. The filter it uses would look like this:

include:
  - type: area
    value: your area_id
  - type: domain
    value: your_domain (for example light)
exclude:
  - type: disabled_by
    comparator: match
    value: ".*"
  - type: hidden_by
    comparator: match
    value: ".*"

You can add to this base-filter by adding a filter to your configuration. More is explained in the Configuration Page.

This Dashboard Strategy generates multiple Views. One per Area configured in your Home Assistant instance.

You may not be able to tell it generates multiple Views because all but one are made invisible in the top menu.

Top Menu

This is because the navigation is meant to be made with the left-sided navigation menu.

Usage

You need to create a new empty Dashboard for this Strategy Dashboard.

Dashboard -> Edit Dashboard -> Kebap Menu -> Raw Configuration Editor -> Paste the following

strategy:
  type: custom:area-dashboard-strategy
  config: #Your Config here

This Strategy has a sensible default configuration, which is the one i myself use!

You can start without configuring anything. If you want to change something take a look at the Configuration Documentation.

Modifications are possible to:

  • the left-sided navigation menu (modifications to the area-card)
  • the tabs in the main area (number of tabs, their names, icons, etc.)
  • the content of the tabs (number of grids, titles, cards in the grids, etc.)

If you’re looking to add a single row or tab without changing the whole default configuration, you can do it like this!

strategy:
  type: custom:area-dashboard-strategy
  config:
    tabs:
      - title: Control
        icon: mdi:button-pointer
        rows:
            - title: Lights
              filter:
                  include:
                      - type: domain
                        value: light
              card:
                  type: tile
                  entity: $entity
            - ~Cover
            - ~Media
      - ~Control
      - ~Camera

You can reference Tab and Row entries from the default config by just writing ‘~’ + title of Row/Tab. With that you can easily change a single Tab/Row while just referencing the others. No need to copy everthing anymore!

Table of contents