Page History

Panel

borderStyle	solid
title	Description

The date range component provides an intuitive, drag-and-drop way to select a contiguous range of time. The user is shown a timeline and can drag or stretch the selection box around on the timeline. The selected range is always a whole number of units, where the unit is determined by the current zoom level.

Note: The Start/End dates and Outer Start/End dates will be ignored when the window opens unless the Startup Mode property is set to "None."

Data Density Histogram

As an advanced optional feature, the date range can display a data density histogram inside the timeline. This is useful for historical data with gaps in it, so that the end user isn't hunting for data. (Tip: This is also great for demos, to make it easy to find historical data in a database that isn't being continuously updated).

To use this feature, bind the Data Density dataset to a query that returns just the timestamps of the target table. These timestamps will be used to fill in the histogram behind the timeline. You can use the Outer Range Start Date and Outer Range End Date properties in your query to limit the overall return size for the query.

Note
Timestamps must be ordered by date (ascending) to display correctly.

Panel

title	Properties

Name

Description

Property Type

Scripting

Category

Background Color

The background color of the component. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector.

Color

.background

Appearance

Border

The border surrounding this component. Options are: No border, Etched (Lowered), Etched (Raised), Bevel (Lowered), Bevel (Raised), Bevel (Double), Button Border, Field Border, Line Border, and Other Border.

Note
The border is unaffected by rotation.

Border

.border

Common

Box Fill

The fill color for the selection box.

Color

.boxFill

Appearance

Cursor

The mouse cursor to use when hovering over this component. Options are: Default, Crosshair, Text, Wait, Hand, Move, SW Resize, or SE Resize.

int

.cursorCode

Common

Data Density

A dataset that is used to calculate a histogram of data density.

Dataset

.densityData

Data

Date Style

The style to display dates in. For international support.

int

.dateStyle

Appearance

Editor Background

The background color of the textual date range editor portion of this component.

Color

.editorBackground

Appearance

Enabled

If disabled, a component cannot be used.

boolean

.componentEnabled

Common

End Date

The ending date of the currently selected range.

Date

.endDate

Data

Font

Font of text on this component.

Font

.font

Appearance

Foreground Color

The foreground color of the component.

Color

.foreground

Appearance

High Density Color

The color used to indicate high data density. See Color Selector.

Color

.highDensityColor

Appearance

Max Selection

The maximum size of the selected date range.

String

.maxSelectionSize

Behavior

Mouseover Text

The text that is displayed in the tooltip which pops up on mouseover of this component.

String

.toolTipText

Common

Name

The name of this component.

String

.name

Common

Opaque

If false, backgrounds are not drawn. If true, backgrounds are drawn.

boolean

.opaque

Common

Outer Range End

The ending date of the available outer range.

Date

.outerRangeEndDate

Data

Outer Range Start

The starting date of the available outer range.

Date

.outerRangeStartDate

Data

Quality

The data quality code for any Tag bindings on this component.

QualityCode

.quality

Data

Selection Highlight

The focus highlight color for the selection box. See Color Selector.

Color

.selectionHighlight

Appearance

Start Date

The starting date of the currently selected range.

Date

.startDate

Data

Startup Mode

Controls whether or not this date range automatically assigns itself a starting range based on the current time

int

.startupMode

Behavior

Startup Range

If startup mode is Automatic, this will be the starting range of time available for selection.

String

.startupRange

Behavior

Startup Selection

If startup mode is Automatic, this will be the starting selected range.

String

.startupSelection

Behavior

Styles

Contains the component's styles.

Dataset

.styles

Appearance

Tick Density

This is multiplied by the width to determine the current ideal tick unit.

float

.tickDensity

Behavior

Time Style

The style to display times of day. For international support.

int

.timeStyle

Appearance

Today Color

The color of the "Today Arrow" indicator. See Color Selector.

Color

.todayIndicatorColor

Appearance

Track Margin

The amount of room on either side of the slider track. May need adjusting of default font is changed.

int

.trackMargin

Appearance

Visible

If disabled, the component will be hidden.

boolean

.visible

Common

Deprecated Properties

Data Quality

The data quality code for any Tag bindings on this component.

int

.dataQuality

Deprecated

Panel

title	Scripting

Panel

title	Scripting Functions

Expand

title	.setRange(start, end)

Since 7.8.1
Description

Sets the selected range. The outer range will move if needed. Note: The start and end times are determined based on the zoom level and may not move (or may move farther than intended) if the component is zoomed out too far for the amount of change attempted. For example, when days are showing, moving the start time 5 minutes forward will not effect the start, and moving the end time 5 minutes forward will add one day.

Parameters

Date start - The starting date for the new selection.

Date end - The ending date for the new selection.

Return

Nothing

Scope

Client

Code Block

language	py
title	Code Snippet

# This example moves the existing Start Date and End Date
# of a Date Range component ahead 8 hours
from java.util import Calendar

# Get the current start and end
dateRangeComponent = event.source.parent.getComponent('Date Range')
startDate = dateRangeComponent.startDate
endDate = dateRangeComponent.endDate

# Calculate the new start and end dates
cal = Calendar.getInstance();
cal.setTime(startDate);
cal.add(Calendar.HOUR, -8);
newStart = cal.getTime();

cal.setTime(endDate);
cal.add(Calendar.HOUR, -8);
newEnd = cal.getTime();

# Set the new range for the component. The outer range will
# automatically expand if needed.
dateRangeComponent.setRange(newStart, newEnd)

Expand

title	.setOuterRange(start, end)

Since 7.8.1
Description

Sets the outer range. The selected range will move if needed. Note: The start and end times are determined based on the zoom level and may not move (or may move farther than intended) if the component is zoomed out too far for the amount of change attempted. For example, when days are showing, moving the start time 5 minutes forward will not effect the start, and moving the end time 5 minutes forward will add one day.

Parameters

Date start - The starting date for the new outer range.

Date end - The ending date for the new outer range.

Return

Nothing

Scope

Client

Code Block

language	py
title	Code Snippet

# This example moves the existing Outer Date Range
# of a Date Range component back two days
from java.util import Calendar

# Get the current start and end of the outer range
dateRangeComponent = event.source.parent.getComponent('Date Range')
startDate = dateRangeComponent.outerRangeStartDate
endDate = dateRangeComponent.outerRangeEndDate

# Calculate the new start and end dates for the outer range
cal = Calendar.getInstance();
cal.setTime(startDate);
cal.add(Calendar.DAY_OF_MONTH, 2);
newStart = cal.getTime();

cal.setTime(endDate);
cal.add(Calendar.DAY_OF_MONTH, 2);
newEnd = cal.getTime();

# Set the new outer range for the component.
dateRangeComponent.setOuterRange(newStart, newEnd)

Panel

title	Extension Functions

This component does not have extension functions associated with it.

Panel

title	Event Handlers

Expand

title	mouse

Expand

title	mouseClicked

This event signifies a mouse click on the source component. A mouse click the combination of a mouse press and a mouse release, both of which must have occurred over the source component.

Note
This event fires after the pressed and released events have fired.

.source	The component that fired this event
.button	The code for the button that caused this event to fire.
.clickCount	The number of mouse clicks associated with this event.
.x	The x-coordinate (with respect to the source component) of this mouse event.
.y	The y-coordinate (with respect to the source component) of this mouse event.
.popupTrigger	Returns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists.
.altDown	True (1) if the Alt key was held down during this event, false (0) otherwise.
.controlDown	True (1) if the Control key was held down during this event, false (0) otherwise.
.shiftDown	True (1) if the Shift key was held down during this event, false (0) otherwise.

Expand

title	mouseEntered

This event fires when the mouse enters the space over the source component.

.source	The component that fired this event
.button	The code for the button that caused this event to fire.
.clickCount	The number of mouse clicks associated with this event.
.x	The x-coordinate (with respect to the source component) of this mouse event.
.y	The y-coordinate (with respect to the source component) of this mouse event.
.popupTrigger	Returns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists.
.altDown	True (1) if the Alt key was held down during this event, false (0) otherwise.
.controlDown	True (1) if the Control key was held down during this event, false (0) otherwise.
.shiftDown	True (1) if the Shift key was held down during this event, false (0) otherwise.

Expand

title	mouseExited

This event fires when the mouse leaves the space over the source component.

.source	The component that fired this event
.button	The code for the button that caused this event to fire.
.clickCount	The number of mouse clicks associated with this event.
.x	The x-coordinate (with respect to the source component) of this mouse event.
.y	The y-coordinate (with respect to the source component) of this mouse event.
.popupTrigger	Returns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists.
.altDown	True (1) if the Alt key was held down during this event, false (0) otherwise.
.controlDown	True (1) if the Control key was held down during this event, false (0) otherwise.
.shiftDown	True (1) if the Shift key was held down during this event, false (0) otherwise.

Expand

title	mousePressed

This event fires when a mouse button is pressed down on the source component.

.source	The component that fired this event
.button	The code for the button that caused this event to fire.
.clickCount	The number of mouse clicks associated with this event.
.x	The x-coordinate (with respect to the source component) of this mouse event.
.y	The y-coordinate (with respect to the source component) of this mouse event.
.popupTrigger	Returns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists.
.altDown	True (1) if the Alt key was held down during this event, false (0) otherwise.
.controlDown	True (1) if the Control key was held down during this event, false (0) otherwise.
.shiftDown	True (1) if the Shift key was held down during this event, false (0) otherwise.

Expand

title	mouseReleased

This event fires when a mouse button is released, if that mouse button's press happened over this component.

.source	The component that fired this event
.button	The code for the button that caused this event to fire.
.clickCount	The number of mouse clicks associated with this event.
.x	The x-coordinate (with respect to the source component) of this mouse event.
.y	The y-coordinate (with respect to the source component) of this mouse event.
.popupTrigger	Returns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists.
.altDown	True (1) if the Alt key was held down during this event, false (0) otherwise.
.controlDown	True (1) if the Control key was held down during this event, false (0) otherwise.
.shiftDown	True (1) if the Shift key was held down during this event, false (0) otherwise.

Expand

title	mouseMotion

Expand

title	mouseDragged

Fires when the mouse moves over a component after a button has been pushed.

.source	The component that fired this event
.button	The code for the button that caused this event to fire.
.clickCount	The number of mouse clicks associated with this event.
.x	The x-coordinate (with respect to the source component) of this mouse event.
.y	The y-coordinate (with respect to the source component) of this mouse event.
.popupTrigger	Returns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists.
.altDown	True (1) if the Alt key was held down during this event, false (0) otherwise.
.controlDown	True (1) if the Control key was held down during this event, false (0) otherwise.
.shiftDown	True (1) if the Shift key was held down during this event, false (0) otherwise.

Expand

title	mouseMoved

Fires when the mouse moves over a component, but no buttons are pushed.

.source	The component that fired this event
.button	The code for the button that caused this event to fire.
.clickCount	The number of mouse clicks associated with this event.
.x	The x-coordinate (with respect to the source component) of this mouse event.
.y	The y-coordinate (with respect to the source component) of this mouse event.
.popupTrigger	Returns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists.
.altDown	True (1) if the Alt key was held down during this event, false (0) otherwise.
.controlDown	True (1) if the Control key was held down during this event, false (0) otherwise.
.shiftDown	True (1) if the Shift key was held down during this event, false (0) otherwise.

Expand

title	propertyChange

Expand

title	propertyChange

Fires whenever a bindable property of the source component changes. This works for standard and custom (dynamic) properties.

.source

The component that fired this event

.newValue

The new value that this property changed to.

.oldValue

The value that this property was before it changed. Note that not all components include an accurate oldValue in their events.

.propertyName

The name of the property that changed.

Note
Remember to always filter out these events for the property that you are looking for! Components often have many properties that change.

Panel

title	Customizers

Panel

title	Examples

Code Block

language	actionscript3
title	Code Snippet

//A Query binding on another component on the same window might look like this:
 
SELECT Column1, Column2, Column3
FROM MyTable WHERE
  t_stamp >= "{Root Container.Date Range.startDate}" AND
  t_stamp <= "{Root Container.Date Range.endDate}"

OTHER USER MANUAL VERSIONS

GETTING STARTED

MODULES AND PLATFORM

APPENDIX

TUTORIALS & HELPFUL TRICKS

PARTNER LINKS

RESOURCES

Employees

Versions Compared

Old Version 8

New Version Current

Key