# Data Label ## Overview Data Label is a label component based on a dataprovider value, that can show dynamic text and (optionally) an image. The key differences between a Data Label and a Label and the main reasons for using Data Label instead of Label are the following: * Data Label supports **format**, which is very useful when it comes to displaying dates, numbers for example * The value displayed by the Data Label can be enhanced/transposed using a **valuelist**, which is used to get a display value for the actual columns real value like id -> name for example To see a live sample of the component you can go [here](https://samples-prod.demo.servoy-cloud.eu/solution/components?a=dataLabel). ![Data Label](/files/hJ5sc022EPA32exCoo8c) ## Get Started ### Add a Data Label to a form In the [Form Editor](/reference/servoy-developer/object-editors/form-editor.md), drag the Data Label component from the Pallet onto the form, then select a dataprovider.

Create Data 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 Data Label at Design-Time Data 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 [Data Label](/reference/servoyextensions/ui-components/buttons-and-text/datalabel.md) for a complete list of its [properties](/reference/servoyextensions/ui-components/buttons-and-text/datalabel.md#properties). {% endhint %} ### Setting the data-provider Data Label's dataprovider can be set after the component has been added to the form or by setting it in [dataprovider](/reference/servoyextensions/ui-components/buttons-and-text/datalabel.md#dataproviderid) property, found in the [Component Properties Editor](/reference/servoy-developer/views/properties.md#properties). ### Setting a Tooltip message Data 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/datalabel.md#tooltiptext) property using the [Text Property Editor](/reference/servoy-developer/object-editors/text-property-editor.md). {% hint style="info" %} The tooltip text can be dynamic, data-driven, or localized. {% endhint %} ### Setting an Image / Font-Icon Many times, a data label will be decorated with an image or font icon. To add an image before the text of the data label, edit the [`imageStyleClass`](/reference/servoyextensions/ui-components/buttons-and-text/datalabel.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. Example:\ `imageStyleClass: fa fa-user`
In the same way, there is a [`trailingImageStyleClass`](/reference/servoyextensions/ui-components/buttons-and-text/datalabel.md#trailingimagestyleclass) property to add an image or icon after the text of the data label. Example:\ `trailingImageStyleClass: fa fa-user-lock`
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 Data Label 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`](/reference/servoyextensions/ui-components/buttons-and-text/datalabel.md#styleclass) property. For example, `styleClass="label-info"` ### Using a format Data Label's Format can be set in [Format](/reference/servoyextensions/ui-components/buttons-and-text/datalabel.md#format) property. Depending on the type of each dataprovider, this will be done via the format editors for [date](/reference/servoy-developer/object-editors/date-format-editor.md), [text](/reference/servoy-developer/object-editors/text-format-editor.md), [integer/number](/reference/servoy-developer/object-editors/number-format-editor.md). Example:\ Let's consider a Data Label having `requireddate` set as dataprovider, with no Format set:

`requireddate` with no Format

We need the date to show the full name of the month, followed by day and full year, so we apply a Format, as shown below:

set `requireddate` Format

Here is how it looks after the Format has been set:

`requireddate` with applied Format

### Using a Value List Data Label's [valuelist](/guides/develop/application-design/data-modeling/value-lists.md#overview) can be set it in [valuelist](/reference/servoyextensions/ui-components/buttons-and-text/datalabel.md#valuelistid) property, found in the [Component Properties Editor](/reference/servoy-developer/views/properties.md#properties) and it should match the set [dataprovider](/reference/servoyextensions/ui-components/buttons-and-text/datalabel.md#dataproviderid). Example: In order to get a drop down menu with orders' ship countries, the followings settings should be made: 1. set `shipcountry` as the Data Label [dataprovider](/reference/servoyextensions/ui-components/buttons-and-text/datalabel.md#dataproviderid) 2. in case it doesn't exist, create a [valuelist](/guides/develop/application-design/data-modeling/value-lists.md#overview) using Table values and `shipcountry` column as dataprovider 3. set the countries list in [valuelist](/reference/servoyextensions/ui-components/buttons-and-text/datalabel.md#valuelistid) property of the Data Label ## Handling Click Events Like most components, Data Labels have events, which allow you to execute some logic when something happens in the UI. Of course, the most common event for a data label is the `onAction` event, which is triggered when the data label is clicked or the user hits the `Enter` key while the data label has focus. To Handle the event, double-click the value for the [onAction](/reference/servoyextensions/ui-components/buttons-and-text/datalabel.md#onactionmethodid) 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 data 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 /** * * @param {JSEvent} event * @param {String} dataTarget * * @properties={typeid:24,uuid:"4FA50A53-70A6-4D14-83B8-EA3E675EBAEB"} */ function onAction(event, dataTarget) { application.showForm('order_details'); } ``` {% hint style="info" %} See the [Data Label reference](/reference/servoyextensions/ui-components/buttons-and-text/datalabel.md) for a comprehensive list of [all events](/reference/servoyextensions/ui-components/buttons-and-text/datalabel.md#events) {% endhint %} ## Modifying a Data Label at Runtime Data Labels, like many components, can be modified at runtime through code. Below are a few examples of controlling a Data Label from code. ### Enabling / Disabling a label You can easily change the `enabled` state of a Data Label at runtime. Example: ```javascript function disableDataLabel(){ elements.myDataLabel.enabled = false; } ``` ### Hiding/Showing a Data Label You can easily change the `visible` state of a Data Label at runtime. Example: ```javascript function hideDataLabel(){ elements.myDataLabel.visible = false; } ``` ## Calling Data Label API Methods Like most components, a Data 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 Data Label using the [`addStyleClass`](/reference/servoyextensions/ui-components/buttons-and-text/datalabel.md#api) method. Example: ```javascript function AddStyleClassDataLabel(){ elements.myDataLabel.addStyleClass('mycssclass'); } ``` {% hint style="info" %} See the [Data Label reference](/reference/servoyextensions/ui-components/buttons-and-text/datalabel.md) for a complete list of programmable [properties](/reference/servoyextensions/ui-components/buttons-and-text/datalabel.md#properties) and [methods](/reference/servoyextensions/ui-components/buttons-and-text/datalabel.md#api). {% endhint %} ## Related Articles The following articles are recommended for additional reading: * [Data Label Reference Documentation](/reference/servoyextensions/ui-components/buttons-and-text/datalabel.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/data-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.