WTH! Nested Grid / Stack Card Conversion (to Sections)

I have many dashboards built prior to the introduction of the Sections layout. To achieve a sections-like layout previously typically involved a complicated nest of cards within a Grid or Vertical / Horizontal Stack.

When migrating dashboards from Masonry to Sections, it would be nice if the ‘Convert’ option would also give us the automatic ability to ‘expand’ Grid and Stacks of cards into separate, section-compatible cards.

Here is a concept mockup of what it could look like:

Alternative approach: allow us to drag and drop cards from within a Grid or Stack, out of the Grid or Stack. Maybe there could be a toggle or a mode to enable this behavior, kind of like “Locking” or “Unlocking” the stack.

Agreed, needing to essentially re-create all of my stacked cards manually was the biggest barrier to switching over to sections for me and mine weren’t even that complex … I’ve seen some of the things people have made and I can’t imagine how daunting of a task it is for them to plan out the migration.

My fear is that this might not be deemed worth engineering since once everyone is migrated over to Sections, it will be a useless feature. But right now, during this transition period, I think it would be help the migration effort.

The same could be argued for the initial conversion process … completely useless after people do it once ¯\_(ツ)_/¯

That’s what the month of WTH is for, shoot for the stars and hopefully enough other people agree with you that it’ll get on the radar as an issue. “Split stacks into individual chunks” doesn’t seem like it’d be an insurmountable task (or someone who does have the dev skills to help will be like “Hey! This bothers me too, let me see if I can take that on!”), but, maybe I’m wrong.

1 Like

The way I did this (obviously before any availability of this WTH and even before availability of the conversion tool) was to use the YAML.

  • Looking to the structure of a section in YAML, it is quite close to a grid. Thus it is not that difficult to copy paste your grid content into a section.
    Then you have to adapt the layout, positions etc… thanks to the drag and drop. But the initial import can be done grid by grid into sections.

  • Another way, after the conversion process, is to drag n drop your grid / stack into an empty section:
    image
    then open the section editor and edit the section in yaml:
    image
    then remove the grid / stack part at the beginning (and sometimes at the end):


    image
    You do not even need to bother with indentation…
    Just save, “Et voilà !”, you can now drag n drop the inside of your grid / stack wherever you want.
    image

It could be better, but it is done only once…

And obviously, it copy the card, but not the layout…

1 Like

Great writeup @BBE-FR – I hadn’t even really bothered to look at the yaml involved. This makes me happy for two reasons. 1. it will make my life easier as this is a pretty simple solution if nothing is created in the UI, 2. it should be much easier for @madelena and dashboard folks to add this into the UI (if it is deemed important enough). The ‘locking’ / ‘unlocking’ mechanism I proposed would simply need to add or remove the opening and closing grid / stack yaml as you outlined.

I’m honestly OK with using your YAML approach; I know not everyone is comfortable with it and there currently exists a concerted, global effort to keep as much in the UI as possible. So we’ll see where this goes. Thanks gain.

1 Like

That’s how I did it as well.

One benefit of it not being a 1-click migration was it made me look at everything a bit more critically and be like “with this new method, is this really the best way to keep this” and I probably updated my layout more in the past month than I had since Lovelace got implemented!