dashboard - Dashboard

Provides a component that can be used to highlight important information to users at a glance in an application.

Category

Responsive

Syntax

<xe:dashboard id="id_text">content & dashboard nodes</xe:dashboard>

The Dashboard is made up of a number of "dash nodes" - up to 12 of them. Each node can then be further be customized. For example, this control could be used as an administration dashboard that displays the status of a number of services. As another example, the dashboard could display the different status types for tasks and the number of tasks currently under each status type in a task tracking application.

Table 1. Essential properties
Property Description
dashnodes Allows the addition of dash nodes to the Dashboard. The Dashboard can contain between 1-12 dash nodes. Each dash node has a number of properties that can be set, which are listed in this topic.
Table 2. All properties
Category Properties Description
basics heading Provides optional heading text that appears above the Dashboard.
dashnodes Allows the addition of dash nodes to the Dashboard. The Dashboard can contain between 1-12 dash nodes. Each dash node has a number of properties that can be set, which are listed in this topic.
styling headingStyle Specifies a CSS style property to define the visual style of the heading of the Dashboard.
headingStyleClass Specifies a CSS style class(es) property to define the CSS class(es) assigned to the Dashboard.
style Specifies a CSS style property to define the visual style of the Dashboard.
styleClass CSS style classes property. Defines the CSS class(es) assigned to the Dashboard.

Usage

To find out more information about specific properties, click All Properties when in Design Mode and look for your desired property under its respective category.

Examples

This code example shows a Dashboard control that has three dash nodes.
<xe:dashboard id="dashboard1"
	style="background-color: #eeeeee;"
	heading="Dashboard Heading">
	<xe:this.dashNodes>
		<xe:dashNode sizeLarge="4" sizeMedium="4" sizeSmall="4" sizeExtraSmall="12"
			labelText="Node 1"
			iconEnabled="true"
			icon="glyphicon-home"
			description="description for dash node 1">
		</xe:dashNode>
		<xe:dashNode sizeMedium="4" sizeSmall="4" sizeLarge="4" sizeExtraSmall="6"
			labelText="Node 2" 
			iconTag="div"
			icon="glyphicon-ok"
			iconEnabled="true"
			labelHref="page1.xsp"
			badgeEnabled="true"
			badgeLabel="5">
		</xe:dashNode>
		<xe:dashNode sizeLarge="4" sizeMedium="4" sizeSmall="4" sizeExtraSmall="6"
			labelText="Node 3"
			labelHref="page2.xsp"
			imageSrc="/img1.jpg"
			imageWidth="229px"
			imageHeight="112px" 
			imageStyleClass="img-circle">
		</xe:dashNode>
	</xe:this.dashNodes>
</xe:dashboard>