Very much needed changes to managing UI dash boards! Kudos to the work done here.
Hopefully it is possible to have nameless sections as not everyone needs to name things to recognize what they are for.
2 Likes
Does a sensor graph card only take up one tile, or is just me.
I would like it if it went across the entire span of a card width.
1 Like
I will congratulate the Nabu Casa team for this accomplishment, even though it’s not something I think I will ever use.
This is the cherry 
on the top of the cake … Wow… Thanks so much guys you are Wunderbar
haha good spot ive been there.
This is absolutely lovely!!! Can not wait for this! 
Maybe later on, resizing the elements could be a suggestion along with drag and drop. 
2 Likes
Really fantastic news. The prior mechanism and need for tons of custom elements was too tough to bother mastering, so my dashboards look messy today. Really looking forward to this huge leap forward in UX. Big thanks to the whole team for all the work!
Yes …Re sizing and maybe CSS customizing … Then … The Chery on the Chery on the top of the cake 
1 Like
Thank you for updating the dashboards. This looks very promising 
Does anybody know if the grid will be customizable, i.e. the user will be able to scale a card to be larger than one grid section?
There are cards like graphs (e.g. ApexCharts) that can be scaled to better show the relevant information.But this requires assignment to a multiple grid rows/columns.
Will this kind of grid usage (like in Thomas Loven’s mod) be part of the HA dashboard grid concept?
1 Like
I’m really looking forward to this - great job!
It might be good though, if cards could be configured to “stretch” in order to get all sections in a row to have equal height. In CSS-terms cards might need an area that is defined as “flex-grow” and thus would be allowed to stretch if a certain flag is set on the card by the user. A good example would be graphs, images and maps to adjust their height based on sibling sections, while having a default min-height applied.
Another cool thing would be if users would be able to configured the position of sections for each breakpoint (mobile, tablet, desktop). By using flexbox and the “order” CSS property, this might be doable.
edit: the cherry on top would be a “grid section” or view for expert users. So a section/view, which you can divide into n rows (and columns, defaulting to the default layout grid columns) while being able to freely merge cells. And components dragged into those cells would adjust their size accordingly (using @container CSS queries to detect if compact or wide layout should be used etc.).
In case of a grid view, breakpoints likely won’t work, but that’s probably fine as such dashboards are mostly targeted to desktop/tablet anyway.
1 Like
Hey design team, this looks awesome. Hey but would it be possible to solve the “remote control” issue everybody is facing creating a device control card for mediaplayers? > see my reaction on the previous grace post: What about Grace? Tune in to our special livestream next week! - #34 by HAuserSince2019
try with a vertical-stack-card in your column, and place the sensor-graph, and in worse case use - margins
This is Great!!! I’ve been playing with if for a couple hours. Seems very intuitive.
One thing I was trying to do is put “Home” and “Back” Button in the upper left corner since I use Subviews. If I create a section it takes up the whole column. If I put this in the first section, then it has the header name above it. It got me to thinking about header and footer section types. Any possibility to get this added?
Another possible solution: I see that the view (subview) has a back arrow to go back to where you came from, but it would be great to have a “Home” Button. But the header/footers would provide more flexibility.
Thanks again
4 Likes
Love this so far!!
Already on my wishlist for future updates as we move towards the first stable release.
- Sections with descriptions below the title
- Allow us to modify in the UI the existing
--grid-max-section-counton the sectioncontainer. 4 wide is too much for me, would love to set it to 3 for most screens. I know we can handle this via themes but makes sense to be UI based. - +1 to other people’s request to set the size of tiles within sections to be taller/wider
4 Likes
I just played with new dashboard and the most annoying thing is that Tile card doesn’t fill the whole Section width, only half of it.
?
I just made a view with 3 columns, so it’s doable
PS: Sorry for the quality, hard to stay within the limit of 3mb
This is really great. Thanks for this. Got my WTH post done now
Next improvements will be some ‘fixed’ sections like a ‘sidebar’ and ‘header’, then the sidebar-card can finally move away and everything is in HA itself. Great effort team, thanks a lot for it! Keep it goin 
2 Likes
Awesome update - only experienced one issue so far in that my one-and-only TODO list has vanished after a reboot (added an item to it just prior to reboot)
The ICS file still exists in .storage and the entry in core.entity_registry remains intact.
The integration reports one entity (correct) and the entity is listed under entities (it shows restored)
Here’s the lowdown - looks like an issue with TimeZones
This is the only line in the ics file that uses that DTSTART KEY - it looks a bit corrupted to me
DTSTART;TZID=PST:20240306T233236
BEGIN:VTODO
DTSTAMP:20240307T073236
UID:dec35afa-dc54-11ee-99df-dca63291b95e
CREATED:20240307T073236
DESCRIPTION:Be able to turn on the ringer on phone in emergencies
and at weekends
DTSTART;TZID=PST:20240306T233236
SEQUENCE:0
STATUS:NEEDS-ACTION
SUMMARY:phone ringer
END:VTODO
END:VCALENDAR
2024-03-06 23:39:37.665 ERROR (MainThread) [homeassistant.components.todo] Error while setting up local_todo platform for todo
Traceback (most recent call last):
File "/usr/local/lib/python3.12/site-packages/ical/component.py", line 139, in __init__
super().__init__(**data)
File "/usr/local/lib/python3.12/site-packages/pydantic/main.py", line 341, in __init__
raise validation_error
pydantic.error_wrappers.ValidationError: 1 validation error for Todo
__root__
Failed to validate: 20240306T233236, errors: (["Expected DATE-TIME TZID value 'PST' to be valid timezone", "Expected value to match DATE pattern: '20240306T233236'"]) (type=value_error)
The above exception was the direct cause of the following exception:
Traceback (most recent call last):
File "/usr/src/homeassistant/homeassistant/helpers/entity_platform.py", line 350, in _async_setup_platform
await asyncio.shield(awaitable)
File "/usr/src/homeassistant/homeassistant/components/local_todo/todo.py", line 71, in async_setup_entry
calendar = IcsCalendarStream.calendar_from_ics(ics)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/ical/calendar_stream.py", line 82, in calendar_from_ics
stream = cls.from_ics(content)
^^^^^^^^^^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/ical/calendar_stream.py", line 69, in from_ics
return cls(**result)
^^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/ical/component.py", line 139, in __init__
super().__init__(**data)
File "/usr/local/lib/python3.12/site-packages/pydantic/main.py", line 339, in __init__
values, fields_set, validation_error = validate_model(__pydantic_self__.__class__, data)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/pydantic/main.py", line 1076, in validate_model
v_, errors_ = field.validate(value, values, loc=field.alias, cls=cls_)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/pydantic/fields.py", line 895, in validate
v, errors = self._validate_sequence_like(v, values, loc, cls)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/pydantic/fields.py", line 928, in _validate_sequence_like
r, ee = self._validate_singleton(v_, values, v_loc, cls)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/pydantic/fields.py", line 1094, in _validate_singleton
value, error = field.validate(v, values, loc=loc, cls=cls)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/pydantic/fields.py", line 884, in validate
v, errors = self._validate_singleton(v, values, loc, cls)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/pydantic/fields.py", line 1101, in _validate_singleton
return self._apply_validators(v, values, loc, cls, self.validators)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/pydantic/fields.py", line 1157, in _apply_validators
v = validator(cls, v, values, self, self.model_config)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/pydantic/class_validators.py", line 337, in <lambda>
return lambda cls, v, values, field, config: validator(v)
^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/pydantic/main.py", line 711, in validate
return cls(**value)
^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/ical/component.py", line 139, in __init__
super().__init__(**data)
File "/usr/local/lib/python3.12/site-packages/pydantic/main.py", line 339, in __init__
values, fields_set, validation_error = validate_model(__pydantic_self__.__class__, data)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/pydantic/main.py", line 1076, in validate_model
v_, errors_ = field.validate(value, values, loc=field.alias, cls=cls_)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/pydantic/fields.py", line 895, in validate
v, errors = self._validate_sequence_like(v, values, loc, cls)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/pydantic/fields.py", line 928, in _validate_sequence_like
r, ee = self._validate_singleton(v_, values, v_loc, cls)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/pydantic/fields.py", line 1094, in _validate_singleton
value, error = field.validate(v, values, loc=loc, cls=cls)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/pydantic/fields.py", line 884, in validate
v, errors = self._validate_singleton(v, values, loc, cls)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/pydantic/fields.py", line 1101, in _validate_singleton
return self._apply_validators(v, values, loc, cls, self.validators)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/pydantic/fields.py", line 1157, in _apply_validators
v = validator(cls, v, values, self, self.model_config)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/pydantic/class_validators.py", line 337, in <lambda>
return lambda cls, v, values, field, config: validator(v)
^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/pydantic/main.py", line 711, in validate
return cls(**value)
^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/ical/todo.py", line 203, in __init__
super().__init__(**data)
File "/usr/local/lib/python3.12/site-packages/ical/component.py", line 141, in __init__
raise CalendarParseError(f"Failed to parse component: {err}") from err
ical.exceptions.CalendarParseError: Failed to parse component: 1 validation error for Todo
__root__
Failed to validate: 20240306T233236, errors: (["Expected DATE-TIME TZID value 'PST' to be valid timezone", "Expected value to match DATE pattern: '20240306T233236'"]) (type=value_error)
That would be very useful indeed, a ‘sticky’ section to allow for navigation for instance, that remains on top or bottom even when scrolling.
Secondly, is there any chance that the width or height of the individual elements of a section can be adjusted? Eg to allow more mushroom template cards on 1 line, or to make a tile card take the a tire width?
Excellent work overall by the home assistant team BTW, this really takes things several steps further!