# Label This guide will show how to use labels in your applications. See how easy it is to drag and drop labels onto your forms to show different types of information. Labels can be modified, styled, and even changed at runtime. To see a live sample of the Label component you can go [here](https://samples-prod.demo.servoy-cloud.eu/solution/components?a=label). {% hint style="info" %} ***Content under construction*** {% endhint %} ## Get Started In the [Form Editor](/reference/servoy-developer/object-editors/form-editor.md), drag the Label component from the Pallet onto the form

Add Label

{% hint style="info" %} If the component does not appear in the pallet, it means you do not have the Bootstrap Components package installed. Click "Get more components" at the top of the pallet to open the [Servoy Package Manager](/reference/servoy-developer/package-manager.md) and install it. {% endhint %} ## Modifying a Label at Design-Time Labels, like all components, have properties that can be modified at design time to set the appearance and behavior of the component. Select the label in the [Form Editor](/reference/servoy-developer/object-editors/form-editor.md) to see a list of properties in the [Component Properties Editor](/reference/servoy-developer/views/properties.md#properties). Below are some common properties and how to set them at design time. {% hint style="info" %} See the reference docs for [Label](/reference/servoyextensions/ui-components/buttons-and-text/label.md) for a complete list of its [properties](/reference/servoyextensions/ui-components/buttons-and-text/label.md#properties). {% endhint %} ### Setting the Text The text displayed on a label can be modified by setting its [`text`](/reference/servoyextensions/ui-components/buttons-and-text/label.md#text) property, it can be entered directly on the component by double-clicking it or using the [Text Property Editor](/reference/servoy-developer/object-editors/text-property-editor.md). The label text can be plain text, a locale-translated value when using [i18n](/reference/servoy-developer/solution-explorer/resources/i18n.md), HTML markup, or dynamic content when tags are used to display values from dataproviders like [Table Columns](/guides/develop/application-design/data-modeling/databases/tables/columns.md), [Calculations](/guides/develop/application-design/data-modeling/databases/tables/calculations.md), [Aggregations](/guides/develop/application-design/data-modeling/databases/tables/aggregations.md), [Form Variables](https://github.com/Servoy/gitbook/blob/master/guides/develop/application-design/ui-components/buttons-and-text/broken-reference/README.md), or standard tags (i.e. %%selectedIndex%% as used in the screenshot above). The text can also be a combination of all the options above and Servoy will simply calculate the final result before rendering the label. ### Setting a Tooltip message Labels, like many components, can display tooltip messages when a user hovers their cursor, this can be done by modifying the [`tooltipText`](/reference/servoyextensions/ui-components/buttons-and-text/label.md#tooltiptext) property using the [Text Property Editor](/reference/servoy-developer/object-editors/text-property-editor.md). {% hint style="info" %} The tooltip text, like the label text, can also be dynamic, data-driven, or localized. {% endhint %} ### Setting an Image / Font-Icon Many times, a label will be decorated with an image or font icon. To add an image before the text of the label, edit the [`imageStyleClass`](/reference/servoyextensions/ui-components/buttons-and-text/label.md#imagestyleclass) property and choose the style class of the font icon you wish to use. For example, enter a value of `fa fa-user` to get a nice icon that represents a User. In the same way, there is a [`trailingImageStyleClass`](/reference/servoyextensions/ui-components/buttons-and-text/label.md#trailingimagestyleclass) property to add an image or icon after the text of the label. For more information, please see the [Font Icon](/guides/develop/application-design/styling-and-themes/font-icons.md) section of the guide on [Styling and Themes](/guides/develop/application-design/styling-and-themes.md). ### Styling Like all components, a Label can be styled using themes, variants, and raw CSS. To apply any available style class, simply enter one or more space-delimited values for the [`styleClass`](/reference/servoyextensions/ui-components/buttons-and-text/label.md#styleclass) property. For example, `styleClass="label-info"` #### Label Variants If you are using Variants, then you can easily drag and drop variations of your label onto your form.

Add Label Variants to Form

## Handling Events Like most components, Labels have events, which allow you to execute some logic when something happens in the UI. Of course, the most common event for a label is the `onAction` event, which is triggered when the label is clicked or the user hits the `Enter` key while the label has focus. To Handle the event, double-click the value for the `onAction` property in the [Properties Editor](https://github.com/Servoy/gitbook/blob/master/reference/servoy-developer/views/component-properties-editor.md). You will see the [Method Selection Wizard](/reference/servoy-developer/object-editors/method-selection-wizard.md). You'll have the option to select an existing Method or create a new Method. The method will be called when the label's `onAction` event is fired and the [Event](/reference/servoycore/dev-api/application/jsevent.md) object will be passed to it.

Create method to handle the onAction event

```javascript /** * Click event. * dataTarget parameter is used to identify inner html elements * (by their data-target attribute). * * @param {JSEvent} event * @param {String} dataTarget * * @properties={typeid:24,uuid:"4FA50A53-70A6-4D14-83B8-EA3E675EBAEB"} */ function onAction(event, dataTarget) { // TODO Auto-generated method stub } ``` {% hint style="info" %} See the [Label reference](/reference/servoyextensions/ui-components/buttons-and-text/label.md) for a comprehensive list of [all events](/reference/servoyextensions/ui-components/buttons-and-text/label.md#events) {% endhint %} ## Modifying a Label at Runtime Labels, like many components, can be modified at runtime through code. Below are a few examples of controlling a Label from code. ### Enabling / Disabling a label You can easily change the `enabled` state of a Label at runtime. ```javascript function disableLabel(){ elements.myLabel.enabled = false; } ``` ### Hiding/Showing a Label You can easily change the `visible` state of a Label at runtime. ```javascript function hideLabel(){ elements.myLabel.visible = false; } ``` ## Calling Label API Methods Like most components, a Label 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 Label using the [`addStyleClass`](/reference/servoyextensions/ui-components/buttons-and-text/label.md#api) method. ```javascript function AddStyleClassLabel(){ elements.myLabel.addStyleClass('mycssclass'); } ``` {% hint style="info" %} See the [Label reference](/reference/servoyextensions/ui-components/buttons-and-text/label.md) for a complete list of programmable [properties](/reference/servoyextensions/ui-components/buttons-and-text/label.md#properties) and [methods](/reference/servoyextensions/ui-components/buttons-and-text/label.md#api). {% endhint %} ## Related Articles The following articles are recommended for additional reading * [Label Reference Documentation](/reference/servoyextensions/ui-components/buttons-and-text/label.md) * [Styling and Themes](/guides/develop/application-design/styling-and-themes.md) * [Scripting the UI](/guides/develop/programming-guide/scripting-the-ui.md) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.servoy.com/guides/develop/application-design/ui-components/buttons-and-text/label.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.