Appboard/old/widgets/icon list

Sample Data

Instructions for bringing sample chart data into AppBoard can be found here: Sample Chart Data

Adding a Icon List Widget

Click "Add Widget" in the tool palette on the left. If "Add Widget" is disabled, refer to the "Adding a Stack" section.

1. Enter a name for the Widget
2. Select Icon List Widget
3. Select the Board you'd like the Status List Widget to appear on.
4. Select "OK".

Data Collection

Select a Data Collection that contains the information you'd like to use for this pie chart.

• Click the "Data Collection" pulldown, then select from the list of available Data Collections.
• If you do not see any Data Collections, refer to the Add/Edit/Remove a Data Collection.
• Selecting a Data Collection will populate the other options in the Data Section.

The samples below were created with the data collection Sample.Data.OSData.

Label Field

Select a field of interest from the Data Collection that this Status List Widget would visualize.

• Click the "Label Field" pulldown, and then select an item from the list.

If you're using Sample.Data.OSData, then select "OS" as the label field

Layout

Determines how the list items will be rendered. Layout Options include:

• Flow: A horizontal layout that wraps when it runs out of space. This layout will scroll vertically if needed.
• Vertical: A vertical layout that scrolls vertically when needed.
• Cover Flow: A horizontal layout that does not wrap. This layout will scroll from left to right.

Label Orientation

Controls whether the labels show up on the bottom or to the right of the icon.

Icon Size

This allows you to set how big the icons in the list will be.

• Raster Icons will loose image fidelity when scaled up or down, so make sure you set the icon size so that it matches the images your using in your list.

Default Status Values

Default Color

This sets the default color for the status shapes in this list. The default color will be overwritten by any Status Rules that are applicable.

Default Shape

This sets the default shape for the status shapes in this list. The default color will be overwritten by any Status Rules that are applicable.

Icon Rules

Use Icon from Library

This option allows you to select from stock images that ship with AppBoard. If you want to use your own custom images, use the option.

Retrieve Icon URL from Property

This option allows you to select a field in your Data Collection that contains a relative or absolute URL to an Icon. Supported formats are JPG, PNG, and GIF.

If you're using Sample.Data.OSData, then set up the following rules:
 Rule 1: Select the "Windows" icon from the pulldown, then set OS = Windows
 Rule 2: Select the "Apple" icon from the pulldown, then set OS = Mac
 Rule 3: Select the "Linux" icon from the pulldown, then set OS = Linux

Status Shape Rules

Shape

This determines the shape to use when the conditions of this rule met. Available shapes include:

• Circle
• Diamond
• Square
• Upward Triangle
• Downward Triangle
• Star
• Hexegon

Color

Use the color chooser to set the color when the conditions of this rule met.

Simple Rule

A simple rule is comprised of 3 parts:

1. The data field to evaluate. This equates to a column of data in the data collection.
2. A comparison operator.
3. A value to evaluate.

Sample: If you're using Sample.Data.OSData, then set up the following rules:
Rule 1: Set the color to be "red" for "Totals" that are "Greater Than" the value "2100"
Rule 2: Set the color to be "Yellow" for "Totals" that are "Greater Than" the value "1999"

Reordering and Deleting Rules

• Rules can be reordered by clicking the upper-right corner of a row and dragging the rule up or down in the list.
• To delete a rule, click the red "x" button in the right side of the row.

Advanced Status Rules

To create an advanced rule: Check the "Advanced" box, then click on "Advanced Filter" button, and a Filter Editor will show up.

1. Match Regular Expression allows a property to be matched by regular expression.
2. Simple Property Comparison allows a property matched by a simple comparison operation.
3. Widget Interaction Comparison allows a complex event matching.