Badge
Guide for using badges in your applications
Last updated
Guide for using badges in your applications
Last updated
This guide will show how to use badges in your applications. See how easy it is to drag and drop badges onto your forms and connect them to your business logic. Badges can be modified, styled and even changed at runtime.
To see a live sample of the component you can go here.
The badge component can be used to easily highlight new or unread items in labels or buttons.
Label example:
Button example:
In the Form Editor, drag the Badge component from the Pallet onto the form.
If the component does not appear in the pallet, it means you do not have the Bootstrap Extra Components package installed. Click "Get more components" at the top of the pallet to open the Servoy Package Manager and install it.
Badges, like all components, have properties which can be modified at design-time to set the appearance and behavior of the component. Select the badge in the Form Editor to see a list of properties in the Component Properties Editor. Below are some common properties and how to set them at design-time.
See the reference docs for Badge for a complete list of its properties.
The text displayed on the label or button can be modified by setting its text property. Most often, this will just be plain text, such as "Messages" or "Inbox". In this case, just enter the value into the editor or directly on the component by double-clicking it. For more options open the Text Property Editor.
The badge text shown on the label or button can be modified by setting its badgeText property. Usually this will be dynamic, otherwise just enter the value into the editor. For more options open the Text Property Editor.
Remember that text can also be dynamic, data- or localized. For more options, you can open edit the text property in the Text Property Editor.
Many times, a badge will be decorated with an image or font icon. To add an image to your badge, edit the imageStyleClass property and choose the image style class of the font icon you wish to use. For example, enter a value of fa-regular fa-envelope to get a nice "Messages" icon.
For more information, please see the Font Icon section of the guide on Styling and Themes.
Like all components, baqdges can be styled using themes and raw CSS. To apply any available style class, simply enter one or more space-delimited values for the styleClass property.
Like most components, Badges have events, which allow you to execute some logic when something happens in the UI. Of course, the most common event for a badge is the onAction event, which is triggered when the component is clicked or the user hits the Enter key while the badge has focus.
To Handle the event, double-click the value for the onAction property in the Properties Editor. You will see the Method Selection Wizard. You'll have the option select an existing Method or create a new Method. The method will be called when the badge's onAction event is fired and the Event object will be passed to it.
See the Badge reference for comprehensive list of all events
Badges, like many components, can be modified at runtime through code. Below are a few examples of controlling a Badge from code.
You can easily change the enabled state of a Badge at runtime.
You can easily change the visible state of a Badge at runtime.
Like most components, a Badge has API methods which can be called from code. Below is an example of common API calls.
You can easily add a style class to a badge using the addStyleClass method.
See the Badge Reference Docs for a complete list of programmable properties and methods.
The following articles are recommended for additional reading:
Badge Reference Documentation
Anywhere you show text, it can be translated and localized to the users language. For more information, read our guide on Multi-Language Support
For example, styleClass="font-weight-bold h3 border-class"
