dashNodes - Dash Nodes

Provides a dash node in the Dashboard that can be customized to display different backgrounds and different textual information. 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.

Syntax

<xe:this.dashNodes>properties and content</xe:this.dashNodes>

Table 1. Properties for `xe:this.dashNodes`
Property	Description
`<xe:dashnode attributes></xe:dashnode>`	Child slide of the slide node with content the same as `<xe:this.slideNodes>`.
`imageSrc="source_filename"`	Specifies the location of the image to be used as the background for this dash node.
`imageAlt="image_text"`	Specifies the alternate text to display if the image can not be loaded. Used by assistive technologies.
`imageStyle="css_property"`	Specifies a CSS style property to define the visual style of the dash node.
`imageClass="css_class_property"`	Specifies a CSS style class(es) property to define the CSS class(es) assigned to the heading of the dash node.
`imageHeight="size_value"`	Specifies the height of the image when displayed - for example, 100px, 10em, 2cm, 50%, etc.
`imageWidth="size_value"`	Specifies the width of the image when displayed - for example, 100px, 10em, 2cm, 50%, etc.
`iconEnabled="true\|false"`	Boolean. Specifies whether to use a GLYPHICON instead of an image. The default value is false. When enabled, the image properties will be ignored and the icon displayed instead.
`icon="icon_class"`	Specifies the GLYPHICON CSS class to use, which represents a certain GLYPHICON icon, e.g. glyphicon-ok, glyphicon-home, glyphicon-remove etc. For the full list of available icons, see `http://getbootstrap.com/components/#glyphicons`.
`iconSize="size_value"`	Specifies the font size of the icon - for example, 72px, 30em, 50pt, etc.
`iconStyle="css_property"`	Specifies a CSS style property to define the visual style of the icon on the dash node.
`iconTag="tag_value"`	Specifies the HTML tag to be used to display the icon - for example, 'div', 'p', 'span' etc. ). The default is 'div'.
`iconTitle="title_text"`	Specifies the title text to add to the icon. Used by assistive technologies.
`labelText="your_text"`	Specifies a text label that appears below the image or icon in the dash node.
`labelHref="link_URL"`	Specifies a link attribute that can be assigned to the label to turn the label text into a link.
`labelStyle="css_property"`	Specifies a CSS style property to define the visual style of the label on the dash node.
`labelClass="css_class_property"`	Specifies a CSS style class(es) property to define the CSS class(es) assigned to the label on the dash node.
`description="desc_text"`	Displays a text description of the dash node that appears below the icon or the image as well as the label text.
`descriptionStyle="css_property"`	Specifies a CSS style property to define the visual style of the description of the dash node.
`descriptionStyleClass="css_class_property"`	Specifies a CSS style class(es) property to define the CSS class(es) assigned to the description of the dash node.
`badgeEnabled=""true\|false""`	Boolean. Specifies whether to enable the badge on the dash node. This is a small colored circle that appears next to the label text, and is most often used to display a number for that dash node.
`badgeLabel="your_text"`	Specifies the text value that will appear in the badge.
`badgeStyle="css_property"`	Specifies a CSS style property to define the visual style of the badge on the dash node.
`badgeStyleClass="css_class_property"`	Specifies a CSS style class(es) property to define the CSS class(es) assigned to the badge on the dash node.
`sizeExtraSmall="size_value"`	Specifies the size of the dash node when displayed on extra small devices - for example, mobile phones. The size can be any number between 1-12. The number represents the number of columns in width that the node will span. See the Bootstrap documentation for more information: `http://getbootstrap.com/css/#grid`. Extra small is a size defined by Bootstrap, and equates to devices with a screen width less than 768 pixels wide.
`sizeSmall="size_value"`	Specifies the size of the dash node when displayed on small devices - for example, tablets. The size can be any number between 1-12. The number represents the number of columns in width that the node will span. See the Bootstrap documentation for more information: `http://getbootstrap.com/css/#grid`. Small is a size defined by Bootstrap, and equates to devices with a screen width between 768 pixels and 990 pixels wide.
`sizeMedium="size_value"`	Specifies the size of the dash node when displayed on medium devices, for example - laptops or desktop monitors. The size can be any number between 1-12. The number represents the number of columns in width that the node will span. See the Bootstrap documentation for more information: `http://getbootstrap.com/css/#grid`. Medium is a size defined by Bootstrap, and equates to devices with a screen width between 990 pixels and 1200 pixels wide.
`sizeLarge="size_value"`	Specifies the size of the dash node when displayed on large devices - for example, large high-resolution monitors. The size can be any number between 1-12. The number represents the number of columns in width that the node will span. See the Bootstrap documentation for more information: `http://getbootstrap.com/css/#grid`. Large is a size defined by Bootstrap, and equates to devices with a screen width more than 1200 pixels wide.

Usage

In Design mode, click All Properties and look for slideNodes under basics.

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>

dashNodes - Dash Nodes

Category

Syntax

Usage

Examples