Icon List Widget

< appboard | 2.4 | builder | widgets

Page Contents

1. Sample Data

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

2. 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".

3. 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.

4. 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

5. 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.

Sample Icon List Layout

6. Label Orientation

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

7. 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.

8. Default Status Values

8.1. 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.

8.2. 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.

9. Icon Rules

9.1. 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.

9.2. 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.

  1. Save image into location on server
    • Example: /server/webapps/enportal/visualizer/assets/custom/images/myImage.jpg
  2. Create field in data that contains location of image
    • Example: "URL" Field (String) containing the value: /enportal/visualizer/assets/custom/images/myImage.jpg
  3. In the Icon Filter Rules configuration, select Icon Location = "From Property" and URL Attribute = "URL"
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

Sample Icon List

10. Status Shape Rules

In many Widgets, Colored Shape Filter options are provided so that the user can create rules that apply to their data that determine the different Status Shapes that will be displayed for each data record. For detailed information on creating these filter rules, see Colored Shape Filter.