XForms/Dashboard Builder

Motivation
You want a single form that allows you to layout a single page dashboard. In this case a dashboard in a set of "Portlets" that each have separate content.

Method
Our dashboard builder will control a library of dashboards. Each dashboard has a name, layout information and a list of portlets that are rendered in the dashboard. In our example a dashboard may have up to 36 portlets, but best practices usually contain 7 portlets plus or minus one or two.

Application Design
Our dashboard layout will be one of three types:
 * 1) row oriented where all portlets in a row have the same height
 * 2) column oriented where all portlets in a column share the same width
 * 3) grid-oriented where all portlets must be contained in a regular grid structure

The tool will allow the user to create a new dashboard and give it a name. The user then selects one of the three layout types. Each layout type will allows the user to specify attributes of each row or column such as using absolute width/heights in pixels or relative height/width percentage of width/heights. Note that to allow dashboards to be resized to different screen sizes, relative sizes should be used.

Within each row, column or grid, the user can specify a set of portlets and then give each portlet some parameters.

When the user saves a dashboard it will save an XML instance document with the specification of the dashboard layout. This layout can be transformed using XQuery or XSLT into a CSS file that is loaded each time the dashboard is displayed.

Conditional Display of Row/Column Information
This form should only display the row height specification if either row or grid layout is chosen. Similarly, the column widths should only be displayed if either the column or grid layout is chosen.

The following code provides this logic.       Demonstration of relevant fields. Grid layouts require both rows and columns to be specified.  Enter Layout Type:   Row row   <xf:label>Col</xf:label> <xf:value>col</xf:value> </xf:item> <xf:item> <xf:label>Grid</xf:label> <xf:value>grid</xf:value> </xf:item> </xf:select1>

<xf:group ref="instance('views')/row-info"> Row </xf:group> <xf:group ref="instance('views')/col-info"> Col </xf:group>

Source Code
NOTE: In development! </xf:instance> <xf:instance id="views" xmlns=""> </xf:instance> <xf:bind id="row-view" nodeset="instance('views')/row-view" relevant="instance('my-dash')/DashboardLayoutCode='row' | instance('my-dash')/DashboardLayoutCode='grid'" /> <xf:bind id="col-view" nodeset="instance('views')/col-view" relevant="instance('my-dash')/DashboardLayoutCode='col' | instance('my-dash')/DashboardLayoutCode='grid'" /> </xf:model> <xf:output ref="DashboardID"> <xf:label>Dashboard ID:</xf:label> </xf:output> <xf:input ref="DashboardName"> <xf:label>Dashboard Name</xf:label> <xf:hint>A short name under 50 characters.</xf:hint> </xf:input> <xf:textarea ref="DashboardDescriptionText" class="DashboardDescriptionText"> <xf:label>Description:</xf:label> <xf:hint>Full description text. Used for searching for dashboards.</xf:hint> </xf:textarea> <xf:input ref="DashboardKeywords"> <xf:label>Keywords:</xf:label> <xf:hint>Use comma to separate keywords.</xf:hint> </xf:input> <xf:select1 ref="DashboardLayoutCode"> <xf:label>Layout Style:</xf:label> <xf:item> <xf:label>Row</xf:label> <xf:value>row</xf:value> </xf:item> <xf:item> <xf:label>Column</xf:label> <xf:value>col</xf:value> </xf:item> <xf:item> <xf:label>Grid</xf:label> <xf:value>grid</xf:value> </xf:item> </xf:select1> <xf:group ref="instance('views')/row-view"> <xf:group ref="instance('my-dash')"> <xf:select1 ref="DashboardRowCount"> <xf:label>Number of Rows: </xf:label> <xf:itemset nodeset="instance('layout-items')/item"> <xf:item> <xf:label ref="." />                    <xf:value ref="." />                 </xf:item> </xf:itemset> </xf:select1> </xf:group> </xf:group> <xf:group ref="instance('views')/col-view"> <xf:group ref="instance('my-dash')"> <xf:select1 ref="DashboardColumnCount"> <xf:label>Number of Columns: </xf:label> <xf:itemset nodeset="instance('layout-items')/item"> <xf:item> <xf:label ref="." />                    <xf:value ref="." />                 </xf:item> </xf:itemset> </xf:select1> </xf:group> </xf:group> <xf:repeat nodeset="instance('my-dash')/Portlets/Portlet"> <xf:input ref="PortletID"/> <xf:input ref="PortletName"/> <xf:input ref="RowPlacement"/> <xf:input ref="PortletHeight"/> <xf:input ref="PortletWidth"/> </xf:repeat>