Badge

Edit online

Displays text and numbers to draw attention to a specific area or to show useful information on a page. You can also make it clickable.

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

  • Drawing attention to a specific UI area
  • Displaying helpful information
  • Serving as a clickable button

Configuration properties

Set or modify the appearance configuration properties for Badge in the Configuration properties. Set the formula configuration properties in the Events properties.
Screen size
A configuration property that has the Screen Sizes icon 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 (deprecated), 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 view and determine its appearance. You can preview the look and feel of views in the theme editor. See Themes.

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

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

Events

Set or modify the formula configuration properties and the event handlers for the view in the Events properties. You can set events to be triggered programmatically or when a user interacts with the view. For information on how to define and code events, see User-defined events.
The formula configuration properties for Badge are shown in the following table:
Table 2. Formula configuration properties for Badge
Formula configuration property Description Data type
Text formula Specifies the expression for the view. You can use the property to set the label for Badge. The text must be enclosed within double quotation marks. For example:

"This is a badge"

For more information about formulas, see Formulas.

 String
Badge 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 view. More information on using events with views is found in the topic User-defined events.

Methods

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

Additional resources

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