The dashboard framework is an extremenly versatile platform to build dashboard applications. When we built it, we could not build a one size fits all layout, because every application has a different way of laying out its pods. If you look through the various demos, we show how to configure the dashboard to use a number of different layout algorithms. Here is a PDF document that discusses the various layout mechanisms built into the samples.. At the very base, you have a Dashboard Container, which contains one or more Drag Drop Zones. Each zone in turn contains Dashlets, which are basically shells that hold your dashlet item renderers and decorate them with the various functional elements provided by the dashlet parent, like drag drop, maximize/minimize, collapse/expand, move to and restore from task bar, and resize. All of these are configureable, and give you a lot of flexibility in how you want your dashlets laid out.

However, with such high level of flexibility, there is no easy way to build in global scrolling that works consistently across all different layout mechanisms. The current architecture allows you to scroll at any level - For the entire dashboard, within drag drop zones, within dashlets themselves, or any combination of the above. In this blog post, we are going to cover a small customization to the default skin that enables vertical scrolling on the top level dashboard container.

To do this, the first thing we do is define a custom skin. This is as easy as typing skinClas=" on your dashboard container and Flex Builder does the rest. It creates a new skin based on a copy of the default built in skin. So you should have something like this:

    <dashboard:DashboardContainer id="dashboardZones" ...           skinClass="MyDashboardSkin">

In MyDashboardSkin, all we do is wrap the content group inside a scroller. It is important to hide the scroller when the maximized content group is shown, so we bind the visible and includeInLayout flags to disable the scroll in maximize mode.

<s:Scroller width="100%" height="100%" includeInLayout="{contentGroup.visible}" visible="{contentGroup.visible}">
                <s:viewport>
                    <s:Group id="contentGroup"  minWidth="0" minHeight="0">
                    </s:Group>
                </s:viewport>
</s:Scroller>

The other thing to keep in mind is that we need to eliminate the forced heights for the dashlet. Since we have a scrollbar, percentage based heights for the dashlets no longer make sense, because we have infinite space to render vertically. Once this done, you should see something similar to the below. Code is included after the screenshot. Enjoy!

WorkbasketDashboard.mxml (3.38 kb)

MyDashboardSkin.mxml (12.48 kb)