Dynamic layout with side panels

#1

I am designing a layout with several panels that can be opened and resize, a bit like Visual Studio. Some characteristics:

  • Menu on the left can be expanded (wide, icons + labels) or small (only icons). When its expanded, it compresses the middle part (but not the Side bar on the right).
  • When you click a city in the map, a sidebar expands from the right. User can close this with [X] or resize the width with a splitter.
  • Middle has a bottom part that can be changed in height with a splitter.
  • On certain conditions, the bottom part can be split in two.

Something like this:

App
App.png845×1087 353 KB

(actually, the domain of the app is something completely different, but you get the layout idea)

I thought this would be an excellent thing to prototype with Axure, but (again) after hours of trying, I’m thinking this is simply undoable.

  • The right sidebar needs to limit the side of the middle part. You cannot push/pull widgets here because that only works to the right. So I was manually resizing a middle 'Content Dynamic panel.
  • But off course that panel has widgets and Axure does not support setting widths to a percentage of their container, so how would I do this? On the open of the side bar, re-size each and every widget on the Content panel?
  • But when the bottom panel is in its split state, each of those widgets has a different size.
  • And I have not even touched the subject of the splitters.

This layout is fairly straightforward, am I missing something?

#2

Have you thought about using Inline Frame widgets to house separate pages for each panel? Then you could set adaptive views for the “panel pages” to control sizes, styles, visibility, etc. of widgets therein.

I tested the basics of this and it could work. I didn’t do the center panel sub-panels, but same logic should work for those. Depending on how the content interacts, you might want to make those nested in the “Center” page vs at top level. …Same for nesting the right panel within Center page so it would be easier to handle clicks on the map that open the right panel.

Dynamic Layout with iFrames.rp (123.5 KB)

#3

I had not!
Had a quick glance at the solution you provided and that looks promising! Thank you so much, can express enough how much I appreciate it that people spend the time to help out others here. Great community!

Am going on holiday now, so I will dive deeper into the rp file you provided and will try to apply the solutions there to my file when I am back in a couple of weeks. Again, thanks!