Configuration

This Strategy has a sensible base 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.

Strategy Options
References

Strategy Options

Click for Configuration Options

option	description	type	required	default	example
global	global grid config that gets merged with every entry in grids to easily define options that are the same on every grid Only partial config required (global + grids need to satisfy all required fields!)	Reference	no	base config	global: minCardWith: 400 filter: exclude: - type: integration value: mqtt
grids	list of grids to be shown on the dashboard config here and global grid config needs to satisfy every required field You can specify "incomplete" configs to override existing grid configs by specifying gridId instead of id. Those two grid configs will then be merged.	Array	yes	base config	grids: - id: test title: Test filter: include: - type: domain value: alarm_control_panel sort: - type: integration comparator: descending card: type: tile entity: $entity - id: test_2 title: Test2 minCardWith: 500 filter: include: - type: domain value: media_player card: type: custom:mushroom-media-player-card entity: $entity - gridId: test id: newId minCardWith: 400
gridMergeStrategy	how to merge base config and user config	Reference	yes	base config	gridMergeStrategy: add
main	tabs shown in main area	Array	yes	base config	main: - label: Test icon: mdi:test match: ^test_.*$
navigation	navigation area for selecting view Will not get merged with global! Must have an navigation path that navigates to "$area#main" for strategy to work correctly!	Reference	yes	base config	navigation: id: area card: type: area area: $area navigation_path: $area#main
topCards	Slot for cards above navigation	Array	no	-	topCards: - type: entity entities: - button.test - button.test2
extraViews	You can pass any extra views you want on the dashboard.	Array	no	-	extraViews: - strategy: type: custom:grid-view-strategy config: ... icon: mdi:test path: test title: Test

So valid YAML for this could look like this:

Click for full example

---
strategy:
    type: custom:area-dashboard-strategy
    config:
        global:
            minCardWith: 400
            filter:
                exclude:
                -   type: integration
                    value: mqtt
        grids:
        -   id: test
            title: Test
            filter:
                include:
                -   type: domain
                    value: alarm_control_panel
            sort:
            -   type: integration
                comparator: descending
            card:
                type: tile
                entity: "$entity"
        -   id: test_2
            title: Test2
            minCardWith: 500
            filter:
                include:
                -   type: domain
                    value: media_player
            card:
                type: custom:mushroom-media-player-card
                entity: "$entity"
        -   gridId: test
            id: newId
            minCardWith: 400
        gridMergeStrategy: add
        main:
        -   label: Test
            icon: mdi:test
            match: "^test_.*$"
        navigation:
            id: area
            card:
                type: area
                area: "$area"
                navigation_path: "$area#main"
        topCards:
        -   type: entity
            entities:
            - button.test
            - button.test2
        extraViews:
        -   strategy:
                type: custom:grid-view-strategy
                config: "..."
            icon: mdi:test
            path: test
            title: Test

I used all available options in this example. You don`t need to do this! Take a look at the required fields for what you need!

References

The cards displayed in the navigation section are generated like any other grid. Instead of the “$entity”-string, this section replaces the “$area”-string Additionally, an extra variable, $currArea, holds the currently active view/area.

Main

The tabs displayed in the main section containing the grids defined in “grids”. You can control which grids appear using the “match” key, which accepts a regular expression.

The tab will only appear in the view if it contains content (at least one grid with at least one card).

Click for Configuration Options

option	description	type	required	example
title	title shown in the tab	string	yes	title: Test
icon	icon shown in the tab	string	yes	icon: mdi:test
match	Which grids should be shown in this tab. Match the id of the grids with regexp. Regexp can be tested here	string	yes	match: ^control_.*$

So valid YAML for this could look like this:

Click for full example

---
title: Test
icon: mdi:test
match: "^control_.*$"

I used all available options in this example. You don`t need to do this! Take a look at the required fields for what you need!

Grid Merge Strategy

The Merge Strategy controls how the “grids”-key gets merged if both the base config of a strategy and the user config contain it.

Click for Configuration Options

option	description	example
add	Add new grids to existing configuration. Edit existing configuration options by specifying gridId instead of id.	gridMergeStrategy: add
reset	Reset existing configuration when specifying own grids.	gridMergeStrategy: reset

Grid

Every Grid consists the Grid with all the cards for the entities itself and an (optional) title. The row is defined by:

Click for Configuration Options

option	description	type	required	example
filter	Controls which entities/areas get displayed in the grid. Must match all include filters to be included. Needs to match only one exclude filter to be excluded.	Reference	no	filter: include: - type: domain value: binary_sensor - type: state value: on exclude: - type: entity value: sensor.test123 - type: state comparator: is_null - type: area value: living_room
sort	Controls the order of the entities in the grid	Array	no	sort: - type: integration - type: label config: label: ^sort_\d+$ comparator: descending - type: attribute config: key: device_class comparator: ascending
card	The config for the card that should be rendered for every entity in the grid. Insert the entity/area with the $entity/$area variable.	Reference	yes	card: type: tile entity: $entity iconColor: red
id	id used for referencing grid	string	yes	id: test
title	title shown over the grid	string	no	title: Test
position	position of the grid in the list of grids. 0 if not specified. lower numbers come first	number	no	position: 1
minCardWidth	minimal card width in the grid	number	yes	minCardWidth: 300
replace	You can set a card to be used for a specific entity/area. Overrides grid card config	Reference	no	replace: button.test: type: entity entities: - $entity

So valid YAML for this could look like this:

Click for full example

---
filter:
    include:
    -   type: domain
        value: binary_sensor
    -   type: state
        value: true
    exclude:
    -   type: entity
        value: sensor.test123
    -   type: state
        comparator: is_null
    -   type: area
        value: living_room
sort:
-   type: integration
-   type: label
    config:
        label: "^sort_\\d+$"
    comparator: descending
-   type: attribute
    config:
        key: device_class
    comparator: ascending
card:
    type: tile
    entity: "$entity"
    iconColor: red
id: test
title: Test
position: 1
minCardWidth: 300
replace:
    button.test:
        type: entity
        entities:
        - "$entity"

I used all available options in this example. You don`t need to do this! Take a look at the required fields for what you need!

Grid Overrides

You can reference grids and override every option easily with gridId overrides.

Click for Configuration Options

option	description	type	required	example
filter	Controls which entities/areas get displayed in the grid. Must match all include filters to be included. Needs to match only one exclude filter to be excluded.	Reference	no	filter: include: - type: domain value: binary_sensor - type: state value: on exclude: - type: entity value: sensor.test123 - type: state comparator: is_null - type: area value: living_room
sort	Controls the order of the entities in the grid	Array	no	sort: - type: integration - type: label config: label: ^sort_\d+$ comparator: descending - type: attribute config: key: device_class comparator: ascending
card	The config for the card that should be rendered for every entity in the grid. Insert the entity/area with the $entity/$area variable.	Reference	no	card: type: tile entity: $entity iconColor: red
id	id used for referencing grid	string	no	id: test
title	title shown over the grid	string	no	title: Test
position	position of the grid in the list of grids. 0 if not specified. lower numbers come first	number	no	position: 1
minCardWidth	minimal card width in the grid	number	no	minCardWidth: 300
replace	You can set a card to be used for a specific entity/area. Overrides grid card config	Reference	no	replace: button.test: type: entity entities: - $entity
gridId	reference to existing grid Use this id in gridId for overwriting grid!	string	yes	gridId: test

So valid YAML for this could look like this:

Click for full example

---
filter:
    include:
    -   type: domain
        value: binary_sensor
    -   type: state
        value: true
    exclude:
    -   type: entity
        value: sensor.test123
    -   type: state
        comparator: is_null
    -   type: area
        value: living_room
sort:
-   type: integration
-   type: label
    config:
        label: "^sort_\\d+$"
    comparator: descending
-   type: attribute
    config:
        key: device_class
    comparator: ascending
card:
    type: tile
    entity: "$entity"
    iconColor: red
id: test
title: Test
position: 1
minCardWidth: 300
replace:
    button.test:
        type: entity
        entities:
        - "$entity"
gridId: test

I used all available options in this example. You don`t need to do this! Take a look at the required fields for what you need!

Filter

Filters can be defined for fine-grained control which entities should be matched. You can use both include and exclude as keys. Both are optional.

filter:
  include:
    - ...
  exclude:
    - ...

Both accept the same types and syntax.

An entity needs to match all include filters to be included but it needs only to match one of the exclude filters to be excluded!

The filter object looks like this.

Click for Configuration Options

option	description	type	required	default	example
type	The type of filter to determine the value from the entity/area.	Reference	yes	-	type: state
config	Extra configuration options for the filter type. Only required and applied for label/attribute!	Reference	no	-	config: key: device_class
comparator	Compare method for value 1 (extracted from entity/area) and value 2 (specified by user)	Reference	no	equal	comparator: equal
value	The user specified value Not needed for is_numeric and is_null	unknown	no	-	value: on

So valid YAML for this could look like this:

Click for full example

---
type: state
config:
    key: device_class
comparator: equal
value: true

I used all available options in this example. You don`t need to do this! Take a look at the required fields for what you need!

Filter Comparator

Click for Configuration Options

option	description	example
equal	Check if the selected type value of the entity and the passed value are equal.	- type: state comparator: equal value: on
match	Check if the selected type value of the entity matches against the passed regexp value. Regexp can be tested here	- type: entity comparator: match value: ^.*_occupancy$
in	Check if the selected type value of the entity is in the list of defined values. value needs to be an array!	- type: state comparator: in value: - on - off
greater_than	Check if the selected type value of the entity is greater than the defined value. Works only on numeric type values and defined values!	- type: state comparator: greater_than value: 5
lower_than	Check if the selected type value of the entity is lower than the defined value. Works only on numeric type values and defined values!	- type: state comparator: lower_than value: 5
is_null	Check if the selected type value of the entity is null. Does not need a value defined! Exception is type: attribute as it needs key for attribute name!	- type: state comparator: is_null
is_numeric	Check if the selected type value of the entity is numeric. Does not need a value defined! Exception is type: attribute as it needs key for attribute name!	- type: attribute comparator: is_numeric value: key: volume

Sort

Sort can can be defined for fine-grained control in which order the entities should be in the grid.

sort:
  - ...

The sort object looks like this.

Click for Configuration Options

option	description	type	required	default	example
type	The type of filter to determine the value from the entity/area.	Reference	yes	-	type: state
config	Extra configuration options for the filter type. Only required and applied for label/attribute!	Reference	no	-	config: key: device_class
comparator	Compare method used for sorting all entities/areas by their respective extracted values	Reference	no	ascending	comparator: ascending

So valid YAML for this could look like this:

Click for full example

---
type: state
config:
    key: device_class
comparator: ascending

I used all available options in this example. You don`t need to do this! Take a look at the required fields for what you need!

Sort Comparator

Click for Configuration Options

option	description	example
ascending	Sort the grid ascending.	- type: integration comparator: ascending
descending	Sort the grid descending.	- type: label config: label: ^sort_\d+$ comparator: descending

Value Type

The value type is used to extract a value from the entity/area.

Click for Configuration Options

option	description	example
entity	Filter on the entity_id of the entity. entity_id not Entity Name or Display Name! Some ways to find it explained here	- type: entity comparator: equal value: sensor.test123
domain	Filter on the domain of the entity.	- type: domain comparator: equal value: sensor
device	Filter on the parent device_id of the entity. device_id not Device Name or Display Name! Some ways to find it explained here	- type: device comparator: equal value: 98b750a482bbf28ea959269981813219
area	Filter on the area_id of the entity. area_id not Area Name or Display Name! Find at "https://YourHA/config/areas/dashboard". Edit Area = shows area_id	- type: area comparator: equal value: living_room
floor	Filter on the floor_id of the area. floor_id not Floor Name or Floor Name! Find at "https://YourHA/config/areas/dashboard". Edit Floor = shows floor_id	- type: floor comparator: equal value: first_floor
integration	Filter on the integration of the entity. Needs to be the id of the integration not the name! More on how to find it here	- type: integration comparator: equal value: mqtt
label	Filter on the label of the entity. Needs to be the id of the label not the name! More on how to find it here	- type: label config: label: ^sort_\d+$ comparator: equal value: sort_1
state	Filter on the state of the entity.	- type: state comparator: equal value: on
attribute	Filter on an attribute of the entity. Needs a special value structure with another object with key + value, where key is the desired attribute	- type: attribute comparator: equal config: key: volume value: 100
disabled_by	Filter on the disabled_by state of the entity. Possible Disablers here	- type: disabled_by comparator: match value: .*
hidden_by	Filter on the hidden_by state of the entity. Possible Hiders here	- type: hidden_by comparator: match value: .*
entity_category	Filter on the category of the entity.	- type: entity_category comparator: equal value: diagnostic

Configuration

Strategy Options

References

Navigation

Main

Grid Merge Strategy

Grid

Grid Overrides

Filter

Filter Comparator

Sort

Sort Comparator

Value Type