Revising the Dashboard Design - Mixing Stretch and Flowing Layout

This blog is in relation to the Visual Design Demo for the Dashboard.

Upon applying the Dashboard design in one of our projects, which utilizes CRUD transaction as well. The main limitation that was hindering us was how the height of the panelBoxes are limited based on the declared row height in the dashboard. When this  might be tricky since in some scenarios, I would want some items to be higher such as flowing items for form items and some that are stretched for tabular items.

Along with this sample and Andrejus's Blog on the Dynamic Dashboard (http://andrejusb.blogspot.com/2010/02/dynamic-dashboard-ui-shell.html), I am able to achieve this requirement by using a panelGroupLayout scroll to replace the dashboard.

Some of the limitations that I encountered with the default dashboard approach are the following.

• Depending on the browser, the dashboard optimized render will sometimes fail to render the items correctly
• Static Height issue
• If the taskflow is using BackingBean bindings for the component, utilizing the same taskFlowBinding will make the other region not render at all
• All taskflows will be activated the moment the page loads - I tried lazy loading the taskflows using the activate property but after 2nd activation, it just renders blank.

The main code which allowed me to render some items to flow and some to stretch is the following layout design.

And in case you're missing the part where it scrollToView to the moved item, that is handled by a little javascript to find the component to scroll to.

These combination allowed me to create a modified Dashboard Layout.

If you notice, the Employee PanelBox's height is depending on the amount of fields rendered in it compared to our Department table.

Note: If you need a copy of the full project design for the dynamic dashboard, just send me an email.