Accordion Control
This section describes how to create an accordion control (class name: obj_c1accordion).
There are two methods for creating an accordion-driven
multi-panel application: the static accordion navigation panel and the accordion control.
Use the static accordion navigation panel method if you know the specific sources
that are to populate the accordion and they remain constant for the life of the
application. For example, if you know all the displays that compose your
application and the static representation of an accordion will only be used for
navigating those displays, the static accordion navigation panel is suitable
(and is easier to configure). To configure the static accordion navigation panel, add
the accordion using the
rtvAccordionPanel tag to the PANELS.ini
file. For details about configuring the accordion, see
Multiple Display Panels.
Use the accordion control method if the number of nodes or leaves, labels or icons of
the accordion change during the lifetime of the application. Data can be provided
that will change the nodes and leaves of the accordion and also change the labels,
and icon representations on the accordion with dynamic data.
When constructing an application with multiple panels using the accordion control, one panel displays
an RTView file that has instanced the accordion control and the other contains the
displays which are drilled down to by selecting items on the accordion.
The following illustrates a two-panel
application in which the accordion control in the left panel
updates
the display in the right panel:
To see an example of a multi-panel layout that uses an accordion control to display live status information
and perform navigation via drill-down in another panel, see the
Navigation Control Demo.
For details about creating an application with
multiple panels, see Multiple Display Panels.
Creating an
Accordion Control
To create an accordion control:
1. Attach tabular data to the accordion control
valueTable property.
2. Specify the
table format for the accordion
in the valueTableFormat property. There are two table format
options for navigation controls. The Row-Leaf format is intended for use when
the
valueTable property is attached to an indexed table and all leaves in the
navigation control are at the same depth. Otherwise, the Row-Node format is used. See
Table Formats for details.
3. Optionally, configure
accordion icons.
4. Optionally, configure
status icons.
Accordion
Icons
Nodes in an accordion control appear as pushbuttons and a single branch is
expanded at a time. Accordion control icons indicate whether an element is
closed, open, or a leaf node.
Each node in an accordion is either a parent node or a leaf
node. A parent node has one or more child nodes that are visible when the node
is expanded (opened) and are invisible when the node is collapsed (closed). When
a parent node is expanded, a small down arrow icon is displayed near the left
edge of the button. When a parent node is collapsed, a small right arrow icon is
displayed.
A leaf node has no children and thus cannot be expanded or collapsed.
To configure accordion icons:
The images used for these icons are specified by the accordionOpenImage
and accordionClosedImage properties, respectively. Note that a leaf node
never displays either of these icons.
The color of accordion node buttons that are not
selected is specified by the accordionColor
property, the color of the accordion node button that is selected is specified
by the accordionSelectColor property, the text color for the accordion
node that is selected is specified by the accordionSelectTextColor
property and the width for each accordion button is specified by the accordionWidth
property.
Background Properties
Specify how the background
is displayed in the accordion control.
| Property
Name |
Description |
| bgColor |
Select the 
button and choose a color from the palette to set the background color of the
accordion control. |
Data Properties
Specify how data
is displayed in the accordion control.
| Property
Name |
Description |
| nodeIdColumnName |
This property is available when the
valueTableFormat is Row-Node. With the Row-Node format there are two
table columns that define the accordion structure: the nodeIdColumnName
property and the parentIdColumnName
property specify the two columns. The
nodeIdColumnName property specifies the table column containing the node
ID string. The node ID string must be unique among all nodes with the same
parent. Or, if the uniqueNodeIdFlag property is checked, each node ID
string must be unique in the entire accordion. By default, the node ID string is used
as the node label in the accordion. |
| nodeIndexColumnNames |
This property is available when the
valueTableFormat is Row-Leaf.
Specifies the path to a leaf node (that is, the ancestor nodes of the leaf).
When the valueTable property is attached
to the current table of an indexed RTView cache, the nodeIndexColumnNames
property is typically set to the same columns that are specified for the cache
index columns.
Enter a semicolon-separated list of column names, where the Nth column
name in the list contains the labels for accordion nodes at depth N.
The labels for top-level nodes are defined by the
first column in the nodeIndexColumnNames property, the labels for the
second-level nodes are defined by the second column, and so forth.
For example:
AgentName;App
Name;PID
The labels for the top-level nodes are defined by
the AgentName column, the labels for the second-level nodes are defined
by the App Name column, and labels for the third-level nodes are defined
by the PID column.
To specify node labels from a different set of
valueTable columns, use the nodeLabelColumnNames property. |
| nodeLabelColumnName |
This property is available when the
valueTableFormat is Row-Node. By
default, the node ID string is used as the node label in the accordion. Use the
nodeLabelColumnName property to specify a different
valueTablecolumn to provide the label. |
| nodeLabelColumnNames |
This property is available when the
valueTableFormat is Row-Leaf. Use the
nodeLabelColumnNames property to specify a different set of
valueTablecolumns to provide node labels. Enter a semicolon-separated list of column names, one for each level in the
accordion, where the Nth column name in the list contains the labels for accordion nodes
at depth N. |
| nodeStatusColumnName |
This property applies to the status icon. Specifies the
name of the valueTable
column containing node
status values. The column specified populates the Node Properties
dialog Status Value column, in which you map node status values to image icons.
The icons are displayed for any node whose
value matches the value selected. |
| parentIdColumnName |
This property is available when the
valueTableFormat is Row-Node. With the Row-Node format there are two
table columns that define the accordion structure: the parentIdColumnName
property and the nodeIdColumnName
property specify the two columns. The
parentIdColumnName property specifies the table column containing the
parent node ID. |
| uniqueNodeIdFlag |
This property is available when the
valueTableFormat is Row-Node.
When enabled, specifies that each node ID string
must be unique in the entire accordion. When disabled, specifies that each
node ID string must be unique among all nodes with the same parent.
|
| valueColumnName |
Specifies the name of the column whose value is
assigned to the $value variable when a node in the accordion is selected. If
not specified, the label string of the selected node is assigned to the $value
variable.
The $value variable is the only substitution that can be used in the
Display Name field of a drill-down command. |
| valueTable |
Attach your tabular input data to this property.
There are two valueTable format
options you can use to create your table:
NOTE: As with other table-driven objects, the
drillDownColumnSubs property can be configured to set substitutions to
column values from the row in the valueTable that corresponds to the
selected accordion node. |
| valueTableFormat |
Specifies the format of the valueTable:
Row-Leaf or Row-Node. |
| varToSet |
Allows you to update the attached variable with
the value from the control. |
Interaction Properties
Specify interactions in the accordion control.
| Property
Name |
Description |
| actionCommand |
Use the
actionCommand property to assign a command to the accordion. You
can configure the accordion to open a drill-down
display, set substitutions, or execute a command in response to a user click on
an accordion node.
The actionCommand can reference the value
from the accordion by using the keyword $value.
When the command is executed, the variable
attached to varToSet is updated with the selected node data.
The drillDownColumnSubs property can be
configured to set substitutions to column values from the row in the
valueTable that corresponds to the selected accordion node.
If the execOnLeafOnlyFlag property is
checked, the accordion actionCommand property executes only when a leaf
node is clicked (a click on a non-leaf node expands only the node). If
unchecked, the accordion actionCommand property executes on all nodes, not just the leaf.
|
|
commandCloseWindowOnSuccess |
If selected, the
window that initiates a system command will automatically close when the system
command is executed successfully. This
property only applies to system commands.
With data source commands, the window is closed
whether or not the command is executed successfully.
For multiple commands, this property is applied
to each command individually. Therefore if the first command in the multiple
command sequence succeeds, the window will close before the rest of the commands
are executed.
NOTE: The commandCloseWindowOnSuccess
property is not supported in the Display Server. |
|
commandConfirm |
If selected, the
command confirmation dialog is enabled. Use the commandConfirmText
property to write your own text for the confirmation dialog, otherwise text from
the command property will be used. For
multiple commands, if you Confirm the execution then all individual commands
will be executed in sequence with no further confirmation. If the you Cancel the
execution, none of the commands in the sequence will executed. |
|
commandConfirmText |
Enter command
confirmation text directly in the Property Value field or select the
button to open the Edit commandConfirmText dialog. If
commandConfirmText is not specified, then
text from the command property will be used. |
|
drillDownColumnSubs |
Use the
drillDownColumnSubs property to set substitutions to
column values from the row in the valueTable that corresponds to the
selected accordion node. Select the
button to open the Drill Down Column
Substitutions dialog to customize which substitutions are passed
into drill-down displays. |
|
enabledFlag |
If unchecked, the accordion nodes are the color gray and do not respond to user input.
|
|
execOnLeafOnlyFlag |
If checked, the
accordion
actionCommand is executed only for leaf nodes, and a click
on a non-leaf node only expands the node. Also, the mouseover tooltip only
appears for leaf nodes.
If unchecked, the accordion actionCommand property
executes on all nodes, and the mouseover tooltip appears for all nodes. |
|
mouseOverFlag |
Specifies whether a
tooltip appears when the cursor is positioned over a node. The tooltip
shows the node path (the node label preceded by the labels of all of its
ancestors), the node status (if the nodeStatusColumnName property is
specified), and its value (if the valueColumnName property is specified).
|
| roleCheckColumnName |
The
name of a string column in the data table containing display the names to be
checked against the user's role. The default value is Display.
Use this property to show/hide accordion nodes based on user role definitions.
If a row's value in the specified column is the name of a display to which the
user's role is denied access, the accordion does not show a node for that row.
For details about user roles and display access, see
Role Definitions. |
| tabIndex |
Use the tabIndex
property to define the order in which the accordion receives focus when
navigated from your keyboard. Initial focus is given to the object with the
smallest tabIndex value, from there the tabbing order proceeds in
ascending order. If multiple objects share the same tabIndex value,
initial focus and tabbing order are determined by the alpha-numeric order of the
table names. Tables with a tabIndex value of 0 are last in the
tabbing order.
NOTE: The tabIndex property does not apply to tables in
the Display Server, nor to objects that are disabled, invisible, or have a value
of less than 0. |
Label Properties
Specify the label in the accordion control.
| Property
Name |
Description |
| labelTextColor |
Select the
button and choose a color from the palette to set the label text color. |
| labelTextFont |
Select font style of label text from the drop-down menu. |
| labelTextSize |
Set the height of the label text in pixels. |
Node Properties
Specify the node structure in the accordion control.
| Property
Name |
Description |
| accordionClosedImage |
Specify the icon that appears to the left of the
label for a closed (collapsed) accordion node. The default is a small right
arrow. |
| accordionColor |
Specify the color of the accordion node buttons
that are not selected. |
| accordionOpenImage |
Specify the icon that appears to the left of the
label for an open (expanded) accordion node. The default is a small down arrow. |
| accordionSelectColor |
Specify the color of the accordion node that is
selected. |
| accordionSelectTextColor |
Specify the text color for the accordion node
that is selected (all unselected nodes use labelTextColor). |
| accordionWidth |
Specify the width, in pixels, for each accordion
button. If a value of zero (the default) is specified, the width of each node is
computed automatically and might be different for each node. Specify a nonzero
value if you want all buttons to have the same size, for a more uniform
appearance. |
| nodeStatusIconPos |
Specify the status icon position in the
accordion: Left or Right.
By default, the status icon appears on the left of the node label. By default, no
status icons appear in the accordion. |
|
nodeStatusProperties |
This property applies to the status icon. Specifies the status icon for a node.
By default, no status icon is displayed.
Select the
button to open the Node Properties
dialog and map images to values, and set the status priority order for
propagation up the accordion.
NOTE: The
nodeStatusProperties
property is visible only if the
nodeStatusColumnName property is non-blank.
You can also use the
nodeStatusProperties property to attach a
status icon to data.
The
data attachment must be a three-column table.
Typically, a static XML file containing
the table is used. The first column must contain string values that match values
from the column in valueTable specified by the
nodeStatusColumnName
property. The second column must be the path to the .png, .gif, or
.jpg image. The third column must contain the non-negative integer
priority value.
NOTE: A static
XML file is only read once each time you run RTView. If you specify (or modify)
an XML source using the Application Options dialog, you may specify whether that
XML source is static. For details, see
Creating XML Sources.
|
| rootNodeLabel |
Specify whether the accordion root node is visible.
By default, this property is blank and the root node is not visible. |
Object Properties
Specify the layout in the accordion control.
| Property
Name |
Description |
| anchor |
Specify where to
anchor an object in the display. NOTE: If an object has the dock property
set, the anchor property will be ignored.
The anchor property is only applied when the
dimensions of the display are modified, either by editing
Background Properties or resizing the window in
Layout mode
Select None, or one or more the following
options:
| None
|
Object
not anchored. This is the default. |
| Top |
Anchor
top of object at top of display. |
| Left |
Anchor
left side of object at left of display. |
| Bottom |
Anchor
bottom of object at bottom of display. |
| Right |
Anchor
right side of object at right of display. |
When a display is resized, the number of pixels
between an anchored object and the specified location remain constant. If an
object is anchored on opposite sides (i.e. Top and Bottom or
Left and Right), the object will be stretched to fill the available
space. NOTE: If the Resize Mode is set to Scale and an
object is anchored on opposite sides, then the object with be moved rather than
stretched to fill the available space. |
| dock |
Specify the docking
location of an object in the display. NOTE: An object should not be docked if
the Resize Mode is set to Scale.
Select from the following options:
| None
|
Object
is not docked. This is the default. |
| Top |
Dock
object at top of display. |
| Left |
Dock
object at left of display. |
| Bottom |
Dock
object at bottom of display. |
| Right |
Dock
object at right of display. |
| Fill |
Dock
object in available space remaining in the display after all docked objects
are positioned. |
If the dimensions of the display are modified,
either by editing Background Properties or
resizing the window in Layout mode, the
properties (objX, objY, objWidth and objHeight) of
docked objects will automatically adapt to match the new size of the display.
When multiple objects are docked to the same side
of the display, the first object is docked against the side of the display, the
next object is docked against the edge of the first object, and so on.
When objects are docked to multiple sides of the
display, the order in which objects were added to the display controls docking
position. For example, let's say the first object added to the display is docked
at the Top and the second object is docked at the Left.
Consequently, the first object will fill the entire width of the display and the
second object will fill the left side of the display from the bottom of the
first object to the bottom of the display.
Objects in a display have the dock property set
to Fill, are laid out across a grid in the available space remaining
after all docked objects are positioned. By default, the grid has one row and as
many columns as there are objects in the display. You can modify the grid in the
Background Properties dialog.
Once an object is docked, there are some
limitations on how that object can be modified.
- Docked objects cannot be dragged or
repositioned using objX and objY properties.
- Docked objects cannot be resized using the
objWidth or objHeight properties. To resize you must drag on the
resize handle.
- Docked objects can only be resized toward the
center of the display (e.g. If an object is docked at the Top, only its
height can be increased by dragging down toward the center of the display).
- Docked objects set to Fill cannot be
resized at all.
- Docked objects cannot be moved using Align.
Non-docked objects can be aligned against a docked object, but a docked object
will not move to align against another object.
- Docked objects are ignored by Distribute.
|
| objHeight |
This property is read only. It shows the height
in pixels of the object which is set by the height of the accordion display. |
| objName |
Name given to facilitate object management via
the Object List dialog. Select Tools>Object List. |
| objWidth |
This property is read only. It shows the width
in pixels of the object which is set by the width of the accordion display. |
| objX |
Set the x position of the object. |
| objY |
Set the y position of the object. |
| styleClass |
Enter the style class name for this object as
defined in your style sheet.
If not specified, the object class name is used. NOTE: The value entered
must not contain spaces and cannot start with rtv-. |
| visFlag |
Set the visibility of the object. |
Unique Behavior
The following describes properties that behave
uniquely with the accordion control.
- valueColumnName: This property specifies the name of the column whose value
should be assigned to the $value variable when a node in the accordion is
clicked. If not specified, the label string of the selected node is
assigned to $value. Note the $value is the only substitution that can be used in
the Display Name field of a drill-down command.
- mouseOverFlag: If this property is checked, a tooltip appears when the cursor is
positioned over a leaf node. The tooltip shows the node path (the node label preceded by the labels of all of its ancestors), the node status (if
the nodeStatusColumnName property is specified), and its value (if
the valueColumnName property is
specified).
- execOnLeafOnlyFlag: If this property
is checked, the accordion
actionCommand property executes only when a leaf node is clicked (a
click on a non-leaf node expands only the node). If unchecked, the accordion
actionCommand property executes on all nodes, not just the leaf.
- rootNodeLabel: This property
specifies the accordion root node (of which there is only one). By default, this property is blank
and the root node is not visible.
Limitations
In the Display Viewer, mouseover text is displayed only if the accordion has focus.
In the
Thin Client:
- The accordion node appearance, such as spacing
and fonts, might vary
slightly as compared to the Display Viewer, and also may vary slightly between different
browsers.
- In iOS Safari (iPad), if the accordion mouseOverFlag
property is checked, a user must click an accordion node twice to invoke the
accordion
command. The first click only displays the node mouseover text.
- In iOS Safari (iPad), scrollbars will not
appear in an accordion control. If the accordion contains more nodes than are visible,
use a two-finger drag gesture inside the accordion area to scroll.
|
