Challenge: Building fluid dashboard

technical-troubleshooting
advanced-prototyping

#1

Hi All,
I am building a ‘fluid’ prototype of a dashboard consisting of the following widgets:

  • a panel containing 8 non-equal-width sections - top row
  • 3 equal-width panels - middle row
  • a panel taking up 2/3 of the space and a panel taking up 1/3 of the space - bottom row
  • all 3 rows of widgets would contain various tables, charts and maps

May I please ask if there is any type of technique or formula that allows fluid and proportional resizing of all the dashboard elements?

Would appreciate any advice.
Natalie


#2

You should be able to use the internal variable, [[Window.width]] to calculate the widths of your panels in the OnPageResize event. For instance, the three panels in the middle row could be set to [[(Window.width/3) - Margin]] (where “Margin” is a text value or global variable for the padding space between column elements). You’d probably want to resize a rectangle widget (such as your white background) and then in that widget’s OnResize event, calculate the needed widths and .x location values for the widgets that belong to it. Panel A (Network capacity) would move Panel B (Fulfillment backlog) to [[This.right + Margin]] and Panel B would move Panel C to [[This.right + Margin]] in a chain effect.

If a panel’s content is complex, like maybe the Network Capacity with a bar chart, you could create a separate page just for it and use Axure’s Adaptive (responsive) design feature, setting breakpoints as needed. Then, in your main page, load your “subpage” in an Inline Frame widget and resize that Inline Frame widget’s width to get it to flow fluidly.


#3

Hi mbc66,

Thank you so much for your amazing as usual insight and advice!!!

I will definitely follow through, as per your description.

Many thanks!
Natalie