Badge control

This control displays textual or numerical content. You can programmatically set the Badge control to be clickable using the On click event.

The Badge control is similar to the Icon control. It is most commonly used for the following purposes:

Drawing attention to a specific area on a coach
Displaying helpful information
Serving as a clickable button

Configuration properties

Set or modify the appearance configuration properties for the control in the Configuration properties tab. Set the formula configuration properties in the Events tab.

Screen size: A configuration property that has the Screen Sizes icon beside the property name can have different values for each screen size. If you do not set a value, the screen size inherits the value of the next larger screen size as its default value. If you are using the Process Designer desktop editor, you are setting the value for the large screen size. The other screen sizes inherit this value.

Theme definitions: Theme definitions specify the colors and styles for a control and determine the appearance of the control. You can preview the look and feel of controls in the theme editor. See Themes.

The appearance configuration properties for the Badge control are shown in the following table:

Table 1. Appearance configuration properties for the Badge control
Appearance configuration property	Description	Data type
Color style	Specifies a color style for the control. The colors correspond to variables in the specified theme.	`BadgeColorStyle`
Shape style	Specifies the shape styles for the control.	`BadgeShapeStyle`

Events

Set or modify the formula configuration properties and the event handlers for the control in the Events tab. You can set events to be triggered programmatically or when a user interacts with the control. For information on how to define and code events, see User-defined events.

The formula configuration properties for the Badge control are shown in the following table:

Table 2. Formula configuration properties for the Badge control
Formula configuration property	Description	Data type
Text formula	Specifies the expression for the control. You can use the property to set the label for the Badge control. The text must be enclosed within double quotation marks. For example: `"This is a badge"`	`String`

The Badge control has the following types of event handlers:

On load: Activated when the page loads. For example:
me.setColorStyle("I")
On click: Activated when a badge used as a button is clicked. For example:
${Tooltip1}.setTooltipVisible(!${Tooltip1}.isTooltipVisible())

Depending on the specific event, you can use JavaScript logic to modify the effects of the control. More information on using events with controls is found in the topic User-defined events.

Methods

For detailed information on the available methods for the Badge control, see the JavaScript documentation.

Additional resources

For information about how to create a coach, see Building coaches.
For information about standard properties (General, Configuration, Positioning, Visibility, and HTML Attributes), see Coach view properties.