The ace:dashboard component is a component that contains ace:dashboardPane's that can contain arbitrary content and are resizable, draggable and closable. The panes are arranged in a grid with fixed base dimensions (in pixels), and they can span multiple rows and/or columns in the grid, as specified or as modified by the user.
In its simplest form, an ace:dashboard component can be defined as follows.
<h:form id="form"> <ace:dashboard id="dashboard" maxColumns="3" resizable="true" draggable="true"> <ace:dashboardPane headerText="One"> <h:outputText value="Pane one content." /> </ace:dashboardPane> <ace:dashboardPane headerText="Two"> <h:outputText value="Pane two content." /> </ace:dashboardPane> <ace:dashboardPane headerText="Three"> <h:outputText value="Pane three content." /> </ace:dashboardPane> </ace:dashboard> </h:form>
Here are some general configuration options of the dashboard. A lot of the configuration is done on the ace:dashboardPane components.
maxColumns The maximum number of columns to allow in the dashboard. Valid values range from 1 to 100. Any other value will be treated as 100.
paneWidth The base/minimum width of the panes in pixels, which determines the column width as well. This value can be multiplied by the pane's 'sizeX' property.
paneHeight The base/minimum height of the panes in pixels, which determines the row height as well. This value can be multiplied by the pane's 'sizeY' property.
resizable Specifies whether the panes are resizable or not.
draggable Specifies whether the panes are draggable or not.
Client Behavior Events
The ajax events are defined on the ace:dashboardPane component.
var widget = ice.ace.instance('frm:componentId);
Keyboard and ARIA Support
Not supported at the moment.
An ace:dashboard component inside an ace:tabSet is not displaying properly at the moment.
Observations and Tips
© Copyright 2021 ICEsoft Technologies Canada Corp.