Appboard/old/widgets/icon list: Difference between revisions

imported>Cmace
(copied from internal)
imported>Jason.nicholls
 
(5 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{DISPLAYTITLE:Icon List Widget}}
[[Category:AppBoard old]]
== Sample Data ==
== Sample Data ==
Instructions for bringing sample chart data into AppBoard can be found here: [[Sample_Chart_Data|Sample Chart Data]]
Instructions for bringing sample chart data into AppBoard can be found here: [[Sample_Chart_Data|Sample Chart Data]]
Line 13: Line 15:
Select a Data Collection that contains the information you'd like to use for this pie chart.
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.
* 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 [[Data_Collections|Add/Edit/Remove a Data Collection]].
* If you do not see any Data Collections, refer to the [[appboard/old/data_collections|Add/Edit/Remove a Data Collection]].
* Selecting a Data Collection will populate the other options in the Data Section.
* Selecting a Data Collection will populate the other options in the Data Section.


Line 30: Line 32:
* '''Cover Flow''': A horizontal layout that does not wrap.  This layout will scroll from left to right.  
* '''Cover Flow''': A horizontal layout that does not wrap.  This layout will scroll from left to right.  


[[Image:iconList_Layout.png|Sample Icon List Layout]]
[[Image:IconList_Layout.png|Sample Icon List Layout]]


== Label Orientation ==
== Label Orientation ==
Line 53: Line 55:
=== Retrieve Icon URL from Property ===
=== 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.
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.
# Save image into location on server
#* Example: /server/webapps/enportal/visualizer/assets/custom/images/myImage.jpg
# Create field in data that contains location of image
#* Example: "URL" Field (String) containing the value: /enportal/visualizer/assets/custom/images/myImage.jpg
# 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:
  If you're using Sample.Data.OSData, then set up the following rules:
Line 59: Line 67:
   Rule 3: Select the "Linux" icon from the pulldown, then set OS = Linux
   Rule 3: Select the "Linux" icon from the pulldown, then set OS = Linux
   
   
[[Image:iconList_Sample.png|Sample Icon List]]
[[Image:IconList_Sample.png|Sample Icon List]]


== Status Shape Rules ==
== 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 [[appboard/old/colored_shape_filter|Colored Shape Filter]].
=== 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:
# The data field to evaluate.  This equates to a column of data in the data collection.
# A comparison operator.
# 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.
 
# [[Regular Expression Filter|Match Regular Expression]] allows a property to be matched by regular expression.
# [[Compare Static Value Filter|Simple Property Comparison]] allows a property matched by a simple comparison operation.
# [[Widget Interaction Filter|Widget Interaction Comparison]] allows a complex event matching.

Latest revision as of 17:40, 17 July 2014

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.

Sample Icon List Layout

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.

  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

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.

Retrieved from "http://ab.edge-technologies.com/docs/index.php?title=Appboard/old/widgets/icon_list&oldid=2112"