Icon

The Icon control allows the use of icons to be added to Coaches, which can also be used as clickable buttons.

Like almost all SPARK controls, you can trigger events that are fired when the user interacts with the control (see the Event and Methods sections below and the Event Handling article for more information).

The icon control can be bound to a Boolean variable.

This control is most commonly used to add character to Coaches, or used as a clickable button.

Behavior

Prevent Multiple Clicks Prevents the user from clicking the icon more than once when the icon is used as a button

Appearance

Color Style

 Icon Size px or em, if no unit is specified px is assumed

Outline Only The control only shows its color based style when hovered over

Icon Acceptable Icons from Font Awesome can be found here

Border Radius Set the roundness of the Icon; you can make an icon perfectly round by setting it to at least half the width

Width Value in px, %, em For example: 50px, 20%, 0.4em, if no unit is specified px is assumed

Example

These are the configuration option settings...

This is the result...

Configuring the Icon in a "Read Only" section

If the icon is nested inside of a section that has been set to "read only" (for example a horizontal layout, vertical layout, coach view, etc), the color of the icon becomes slightly dim. This can be a problem if other icon controls outside of the "read only" are set to the same color.

To ensure that the color of the icon does not change when being set to "read only", the setEnabled method can be used.

In the On Load event of the icon control, we can call the method as such: me.setEnabled(true)

Events

With the Icon control, there are 3 types of event handlers:

• On Load When the page loads
• On Click When the control is clicked
• On Boundary Event When there is a boundary event; works best with boundary events that end with a “Stay on Page” event, as the logic in this event fires when returning to the page; useful for when the logic must occur after the server-side logic that this boundary event triggers
  
  

You can use JavaScript logic to affect the effects of the control, depending on the event. More information on using these controls can be found in the Event Handling article.

Methods

For detailed information on the available methods for this control, access the JS Doc file.

 

• Author: Courtney Silva
• Date Created: June 8, 2015
• Date Modified: November 9, 2015 by Erick Quintanilla