Badge

Guide for using badges in your applications

Overview

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:

Label

Button example:

Button

Get Started

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.

Modifying a Badge at Design-Time

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.

Setting the Text

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.

Setting the badgeText

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.

Setting an Image / Font-Icon

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.

Styling

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.

For example, styleClass="font-weight-bold h3 border-class"

Handling Events

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.

/**
 * @param {JSEvent} event
 *
 * @properties={typeid:24,uuid:"A74C281C-00AA-46AA-BB38-500C937F2D1A"}
 */
function onAction(event) {
	// Enter custom code
}

See the Badge reference for comprehensive list of all events

Modifying a Badge at Runtime

Badges, like many components, can be modified at runtime through code. Below are a few examples of controlling a Badge from code.

Enabling / Disabling a badge

You can easily change the enabled state of a Badge at runtime.

function disableBadge(){
	elements.myBadge.enabled = false;
}

Hiding/Showing a Badge

You can easily change the visible state of a Badge at runtime.

function hideBadge(){
	elements.myBadge.visible = false;
}

Calling Badge API Methods

Like most components, a Badge has API methods which can be called from code. Below is an example of common API calls.

Add CSS Style Class

You can easily add a style class to a badge using the addStyleClass method.

function AddStyleClassBadge(){
	elements.myBadge.addStyleClass('mycssclass');
}

See the Badge Reference Docs for a complete list of programmable properties and methods.

Related Articles

The following articles are recommended for additional reading:

• Badge Reference Documentation

• Styling and Themes

• Scripting the UI

1. Anywhere you show text, it can be translated and localized to the users language. For more information, read our guide on Multi-Language Support