Dashboard grouping container, feature request

[Christian_Persson]

The spacing tiles did not work as i first thought they did and suspect that there is no way to group tiles into a container, or i cant seem to find a way at least.

Is there any way we can have some way of grouping tiles into containers so that the tiles in the containers are not moving around the master grid system (due to width change) but rather within the group, and the groups move around as normal tiles. having nested tile system would really help a lot.

Have a dashboard where I want to have a group with a label for each purpose i.e. Lighting, Entertainment, Curtains etc.could also be seperated into Rooms like Livingroom, Bathroom etc.

If groups could be created then each group could have its own margin to separate each group and the inner-tiles would be kept at place for its group. a new control called “Group” that can be defined with the same properties as tiles at the moment (size) and simply allow to drag and drop a tile into a group would be enough to enable this.

Hope that makes sense any way.

Christian

[Christian_Persson]

At the moment what is happening is that due to width change the tiles are seperated from its “group”

[Ricky_Turner]

You can definitely do what you’re wanting to do.
Here’s the trick I use: Always design your dashboards in the resolution they’ll be viewed in. The easiest way I’ve found is, assuming you’re using Chrome:

Hit F12. This will bring up the development console (the panel on the right:

Click “toggle device toolbar”:

This will probably put your screen in “mobile” view (but you can see where this is going…):

Under the dropdown there that says “responsive,” there are several presets for different devices. If your dashboard device is in the list, select it! If not…

I use Kindle Fire 7 tablets for my bashboards at present. Find out the resolution of your device. The Kindle 7 is 1024x600…
Click “edit” at the bottom of the dropdown list:

A new list will appear in the right panel. Maybe your device is in there? If not, click “add custom device”:

After filling out the name and resolution of your device (again, in my case, the Kindle 7 is 1024x600), click “Add.”

Now, go back to your list, and boom. There it is!

Select it, and now your dashboard should be displayed in the correct resolution. You can see, the layout of mine makes much more sense now…

NOTE: Shown here in NON-kiosk mode, just scrolled down past the blue bar. It really doesn’t matter though…the horizontal resolution is the one that will kill you when it comes to layout reflowing.

I have noticed that you occasionally might have to select another device and come back to your custom one for it to work right.

If you design your dash in this mode, whatever it looks like here is exactly how it will lay out on your device. WYSIWYG FTW!

Hope that helps. If you want any more tips about how to achieve what you’re looking for, we can help. It would be cool to have nested groups like you said, but it would also add such complexity…hard to imagine it would be worth it for the devs and users. The amount of support it might create. I dunno. But you can absolutely achieve your layout goals with spaces, labels, and other tricks! Good luck, and let us know how it turns out!

[Christian_Persson]

Hi Ricky, Thanks for the input, and i see what you mean but thats exactly what im trying to avoid, having this ability to add a container would result in the container restricting the width and its children from moving outside its container, meaning it would show up “grouped” and not mis-aligned on all resolutions, from 4k down to phone. the container would move around taking up the availible width and if its to small for the screen width it would by default be constrained and flow down until next container.

Dont see this being too much work, some simple scss with children properties and a new controller allowing to contain current controls, shouldent be much work with some javascript or whatever language its built on.

I will probably just do some injections myself if its not possible or not ending up on the roadmap. Anyway, thought i would bring it up, think a single platform/dashboard for all resolutions would be best, thats all.

Christian

[Ricky_Turner]

Sorry I couldn’t help

[Christian_Persson]

No wurries, might not have been clear enough, English is my second language.
hopefully others feel the same way about platform agnostic dashboards.

[josh]

Thanks for the feedback! We’ve noted the request in the context of a similar feature request for a ‘canvas’ style layout system.

Community feedback is a key part of how we prioritize what we work on. The more community interest we see in particular features, the more likely they are to get prioritized. As such, we’ll leave this topic open for further community feedback.

In the meantime, if you do come up with another approach, please feel free to share it with the community.

[Christian_Persson]

Appreciate the feedback. regarding Canvas i not an expert on that but in my mind all you are doing is locking it at a proportional view and you are still limited to using it for one type of screen, also seem like a awful lot of work as you need to rewrite the flow-control.

Im a bit short on time or i would write a specification for responsive layout but keeping in line with what you have. the new Container would have a few settings that are simular to what you have.

For instance it would not be “locked” at a fixed width and height Tile (i call it Tile, your control box space occupation), instead it would more be like “Max Width” and “Max Height”, still using your tile system.

When the screen is larger then the containers Max Width, it would allow for another Tile or Container to flow next to it it the Tile/Container Width still have space left, if not, then break at the first container - the screen is smaller then the Max Width, it would flow the inner tiles as you do at the moment.

And a small detail would be to add a margin (i think you called it Gutters in the advanced options) between Containers that is seperate from the Margin/Gutter size set to the Tiles. this is just a small design feature to seperate containers without affecting the Tile spacing.

Need detailed specification or some sketch will see what i can do.

Thanks again,
Christian

[Tom_Prendergast]

just stumbled on this looking to see if something like this was availabe - I have a lot of devices and this would help a lot in organizing them on larger dashboards.

[Terri]

I would love to see this as well. I created dashboards by room but I don’t have enough devices in each room so I combines them onto 1 dashboard. A “group” would allow me to group each room per dashboard. Plus I could view it on any device and still know which devices went with which room.