---
title: "Components"
slug: "components"
status: "new"
updated: 2026-02-26T09:05:01Z
published: 2026-02-26T09:05:01Z
canonical: "learn.servitly.com/components"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://learn.servitly.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Components

In the *Interfaces / Components* page, you have an overview of all the components you can use within a [Template](/docs/templates).

![](https://cdn.document360.io/6759e9c9-3ce3-49df-965a-7231d2d9a10a/Images/Documentation/image(665).png)

There are different types of components, each one with a different purpose and usage.

You can find:

- *FILTER*: the simplest type of component used to format a data value into widgets.
- *CONTROL*: a page button or a field that can be used to make the page interactive, for instance, to execute thing commands, update thing parameters, or change inputs of other page widgets.
- *WIDGET*: a page element displaying data through tables, charts, schemes, and other elements. A widget retrieves the data from the DPS backend, transforms it, and displays values in a meaningful way to DPS users.
- *TEMPLATE*: a set of ready-to-use templates that can be referenced inside the View pages. See the [Templates](/v1/docs/templates) article for more details about how to use and override component templates.

The most important and used components are built-in, preinstalled, and kept updated in the DPS (e.g., [Time Series](/docs/time-series-chart-widget), [Value](/docs/value-widget), [Thing Details](/docs/thing-details-widget)), while other components need to be manually activated (e.g., [Bluetooth Configuration](/docs/bluetooth-configuration-widget), [Knob](/docs/knob-widget), [Radar](/docs/radar-chart-widget)), and when done:

- The JS and CSS resources, loaded by the DPS frontend, are updated with the component’s functions (e.g., filters), classes (e.g., widgets), and CSS rules.
- The [Labels](/docs/labels) with relative translations are updated with the component’s labels.
- The list of [Templates](/docs/templates) is enriched with the component’s ready-to-use templates.
- The [template editor](/docs/template-editor) is updated with:
  - widgets and controls you can drag and drop from the Components Palette.
  - filters you can select in the Filter Configuration dialog.

## Components Update

When an update is released (by Servitly or by the author of the component), within the Components page, you will see that an update is available to be installed. You can update all components for which a new version is available (e.g., a new widget layout, new options or features), or for minor updates (e.g., bug fixes, minor improvements). By pressing the *Update* button, the latest version of each component is installed, and the DPS resources (JS, CSS, labels, templates) are updated accordingly.

## Automatic Update

All components are automatically updated at midnight CET each day, and this update includes any changes that do not significantly impact the DPS user experience. In the event of a major version update that changes the DPS user experience, the update must be performed manually.

## Components Manager

By clicking on the *Open Components Manager* button, you can access a tool to manage your own components.

![](https://cdn.document360.io/6759e9c9-3ce3-49df-965a-7231d2d9a10a/Images/Documentation/image(663).png)

For more details, refer to the [Getting Started with Components Manager](/docs/components-manager-getting-started) article.

## Component Reference

Here is the complete list of components available in Servitly.

### Filters

| [*Alert Details*](https://learn.servitly.com/docs/alert-details-filter) | Enriches the alert lists with status and detailed information. |
| --- | --- |
| [*Booleans*](https://learn.servitly.com/docs/booleans-filter) | Displays boolean values using visual indicators such as colored labels, badges, or icons to make true/false states immediately recognizable. |
| [*Cloud Status*](https://learn.servitly.com/docs/cloud-status-filter) | Displays the product’s cliud status using a colored badge for quick visual identification. |
| [*Connection Status*](https://learn.servitly.com/docs/connection-status-filter) | Displays the product’s connection status using a colored badge for quick visual identification. |
| [*Contact Info*](https://learn.servitly.com/docs/contact-info-filter) | Provides a set of utility functions to display contact information, such as email addresses and phone numbers, in a clear and interactive format. |
| [*Date Times*](https://learn.servitly.com/docs/date-times-filter) | Transforms and displays date and time values in various formats and representations. |
| [*Dictionary*](https://learn.servitly.com/docs/dictionary-filter) | Displays the value of a metric or property according to the configured dictionary and thresholds. |
| [*Events*](https://learn.servitly.com/docs/events-filter) | A set of filters to display events. |
| [*Images*](https://learn.servitly.com/docs/images-filter) | Provides a set of functions to display images in various styles and formats. |
| [*Log Message*](https://learn.servitly.com/docs/log-message-filter) | Displays log messages with color and formatting for improved readability. |
| [*Map Marker*](https://learn.servitly.com/docs/map-marker-filter) | Displays a map highlighting a specific location with a marker at the provided GPS coordinates. |
| [*Numbers*](https://learn.servitly.com/docs/numbers-filter) | Transforms and displays numeric values in various formats and styles. |
| [*Progress Bar V1*](https://learn.servitly.com/docs/progress-bar-filter) | Renders a percentage value as a color-coded progress bar based on defined thresholds. |
| [*Progress Bar V2*](https://learn.servitly.com/docs/progress-bar-v2-filter) | Renders a percentage value as a color-coded progress bar based on defined thresholds. |
| [*Ratings*](https://learn.servitly.com/docs/ratings-filter) | Displays an integer rating from 0 to 5 using colored icons. |
| [*Service Level*](https://learn.servitly.com/docs/service-level-filter) | A set of functions used to render the Service Level associated with a Thing in different ways. |
| [*Status Badge*](https://learn.servitly.com/docs/status-badge-filter) | Displays a status value inside a color-coded badge. |
| [*URL*](https://learn.servitly.com/docs/url-filter) | Displays URL values with different behaviors, such as opening in a new tab or providing a direct download link. |
| [*Utility*](https://learn.servitly.com/docs/utility-filter) | Provides a set of general-purpose functions and filters for various use cases. |
| [*Value to Icon*](https://learn.servitly.com/docs/value-to-icon-filter) | Displays a colored icon based on a specified value. |

### Widgets

| [*Action List*](https://learn.servitly.com/docs/action-list-widget-v2) | Displays the list of actions visible by the user and navigation context. |
| --- | --- |
| [*Activate Thing*](https://learn.servitly.com/docs/activate-thing-widget) | Activates a pre-registered product by entering the serial number. |
| [*Active Alert List*](https://learn.servitly.com/docs/active-alert-list-widget) | Displays the list of currently active alerts. |
| [*Active Services*](https://learn.servitly.com/docs/active-services-widget) | Displays the active services linked to a specific thing. |
| [*Active Work Session List*](https://learn.servitly.com/docs/active-work-session-list-widget) | Displays the list of currently running work sessions. |
| [*Alert Timeline*](https://learn.servitly.com/docs/alert-timeline-widget) | Displays the alert details in a timeline widget. |
| [*Audit Event List*](https://learn.servitly.com/docs/audit-event-list-widget) | Displays a list of events related to user activities performed in the DPS. |
| [*Bar Chart*](https://learn.servitly.com/docs/bar-chart-widget) | Displays metric or statistical data as columns in a bar chart. |
| [*Benchmark*](https://learn.servitly.com/docs/benchmark-widget) | Compares a context object (e.g., thing or customer) with others sharing similar characteristics. |
| [*Bulk Update Status*](https://learn.servitly.com/docs/bulk-update-status-widget) | Displays the list of performed and running bulk updates. |
| [*Calendar*](https://learn.servitly.com/docs/calendar-widget) | Displays a calendar with events, work sessions, actions by day. |
| [*Calendly*](https://learn.servitly.com/docs/calendly-widget) | Loads a Calendly scheduling page directly in your DPS. |
| [*Catalog*](https://learn.servitly.com/docs/catalog-widget) | Displays the catalog with spare parts for a specific product model. |
| [*Composite*](https://learn.servitly.com/docs/composite-widget) | Displays multiple widgets together within a single frame. |
| [*Connection Tokens*](https://learn.servitly.com/docs/connection-tokens-widget) | Manage connection tokens used by thing activation. |
| [*Customer Details*](https://learn.servitly.com/docs/customer-details-widget) | Displays a customer's properties in a detailed information box. |
| [*Customer List*](https://learn.servitly.com/docs/customer-list-widget) | Displays the list of customers visible by the current user. |
| [*Daily Summary Grid*](https://learn.servitly.com/docs/daily-summary-grid-widget) | Displays a daily grid summarizing occurred events and corresponding metric updates. |
| [*Data Export*](https://learn.servitly.com/docs/data-export-widget) | Exports data of multiple metrics and things. |
| [*Data Import*](https://learn.servitly.com/docs/data-import-widget) | Enables importing data for multiple metrics into a specific thing. |
| [*Event Details*](https://learn.servitly.com/docs/event-details-widget) | Displays the properties of an event in a details box. |
| [*Event List*](https://learn.servitly.com/docs/event-list-widget) | Displays a list of all noteworthy events that have occurred or that are still active. |
| [*Gauge*](https://learn.servitly.com/docs/gauge-widget) | Displays a box with the last available value of a metric or a statistic. |
| [*Grouped Thing List*](https://learn.servitly.com/docs/grouped-thing-list-widget) | Displays a list of things grouped by a thing property. |
| [*Heat Map*](https://learn.servitly.com/docs/heat-map-widget) | Displays a heat map of days and hours highlighting metric values, alerts, or work session data. |
| [*Historical Alert List*](https://learn.servitly.com/docs/historical-alert-list-widget) | Displays the list of historical alerts. |
| [*Historical Work Session List*](https://learn.servitly.com/docs/historical-work-session-list-widget) | Displays the list of completed work sessions. |
| [*Include Template*](https://learn.servitly.com/docs/include-template-widget) | Includes content defined in another template. |
| [*Level Indicator*](https://learn.servitly.com/docs/level-indicator-widget) | A widget that displays the level of a stackable quantity in a shaped tank. |
| [*Link Element*](https://learn.servitly.com/docs/link-element-widget) | Displays a button that the user can click to navigate to another page. |
| [*Location Details*](https://learn.servitly.com/docs/location-details-widget) | Displays the properties of a location in a details box. |
| [*Location List*](https://learn.servitly.com/docs/location-list-widget) | Displays the list of locations visible to the user and that are relative to the navigation context. |
| [*Maintenance Registry*](https://learn.servitly.com/docs/maintenance-registry-widget) | Allows technicians to track maintenance within an editable registry. |
| [*Map*](https://learn.servitly.com/docs/map-widget) | Displays a map with a marker for each geolocated thing or location. |
| [*Message Logger*](https://learn.servitly.com/docs/message-logger-widget) | A log view displaying all messages exchanged between the cloud and the thing. |
| [*Metric State Diagram*](https://learn.servitly.com/docs/metric-state-diagram-widget) | Highlights periods in the past seven days when a metric met a specific condition. |
| [*Metrics Data*](https://learn.servitly.com/docs/metrics-data-widget) | The widget that displays the current value of all thing metrics. |
| [*Micro Chart*](https://learn.servitly.com/docs/micro-chart-widget) | This widget displays metric or statistical data in a compact chart. |
| [*Multi Metric List*](https://learn.servitly.com/docs/multi-metric-list-widget) | Displays the values of multiple metrics in a plain list or table with one column per metric. |
| [*Partner Details*](https://learn.servitly.com/docs/partner-details-widget) | Displays the properties of a partner in a details box. |
| [*Partner List*](https://learn.servitly.com/docs/partner-list-widget) | Displays the list of partners visible by the current user and navigation context. |
| [*Period Details*](https://learn.servitly.com/docs/period-details-widget) | Displays the reference period of the page data in a box. |
| [*Pie Chart*](https://learn.servitly.com/docs/pie-chart-widget) | Displays a pie chart with one slice for each referenced metric value or statistic result. |
| [*Product Model Details*](https://learn.servitly.com/docs/product-model-details-widget) | Displays the properties of a product model in a details box. |
| [*Product Timeline*](https://learn.servitly.com/docs/product-timeline-widget) | Displays the product's main events history within a timeline diagram, including lifecycle events and maintenance events. |
| [*Radar Chart*](https://learn.servitly.com/docs/radar-chart-widget) | Displays the value of multiple metrics within a radar chart. |
| [*Radial Gauge*](https://learn.servitly.com/docs/radial-gauge-widget) | This widget allows displaying the last available value of a metric using a manometer like a gauge. |
| [*Register Things*](https://learn.servitly.com/docs/register-things-widget) | Manages the inventory of unassigned things that can be activated by end users. |
| [*Scatter Chart*](https://learn.servitly.com/docs/scatter-chart-widget) | This widget displays a metrics values into a scatter chart. |
| [*Schema*](https://learn.servitly.com/docs/schema-widget) | Displays a synoptic view of the thing with overlaid metric data. |
| [*Solid Gauge*](https://learn.servitly.com/docs/solid-gauge-widget) | This widget displays partial and total metric values in a concentric donuts grap |
| [*Status Diagram*](https://learn.servitly.com/docs/status-diagram-widget) | Displays the values of a status metric with the amount of time spent in each status for a given period. |
| [*Table*](https://learn.servitly.com/docs/table-widget) | Displays statistical data in a table, with rows and columns determined by the grouping of the results. |
| [*Thing Details*](https://learn.servitly.com/docs/thing-details-widget) | Displays the properties of a thing in a details box. |
| [*Thing Documentation*](https://learn.servitly.com/docs/thing-documentation-widget) | Provides access to the Thing Definition documentation to the Thing users. |
| [*Thing Firmware*](https://learn.servitly.com/docs/thing-firmware-widget) | Allows Technicians to perform a firmware update on the connected Things. |
| [*Thing Grid*](https://learn.servitly.com/docs/thing-grid-widget) | Displays a grid where each block is populated using a template specific to the thing definition. |
| [*Thing List*](https://learn.servitly.com/docs/thing-list-widget) | Display the list of things visible to the user and that are relative to the navigation context. The list supports pagination, and items can be searched and sorted based on properties. |
| [*Thing Test Session List*](https://learn.servitly.com/docs/thing-test-session-list-widget) | Enables technicians to create, monitor, and manage test sessions. |
| [*Thing Troubleshooting*](https://learn.servitly.com/docs/thing-troubleshooting-widget) | Enables technical users to perform self-troubleshooting to resolve active alerts. |
| [*Time Series Chart*](https://learn.servitly.com/docs/time-series-chart-widget) | Displays metric data in a time series chart with support for large datasets, aggregation, and zooming. |
| [*Value*](https://learn.servitly.com/docs/value-widget) | Displays the value of a metric in a box, highlighting the severity and the increase from the previous value. |
| [*Wear Status*](https://learn.servitly.com/docs/wear-status-widget) | Displays the status of one or more components subject to wear and tear. |
| [*Weather*](https://learn.servitly.com/docs/weather-widget) | Displays the current weather condition of the location. |
| [*Wistia*](https://learn.servitly.com/docs/wistia-widget) | Displays a video hosted on WISTIA. |
| [*Work Session Details*](https://learn.servitly.com/docs/work-session-details-widget) | Displays the properties of a work session in a details box. |
| [*XY Chart*](https://learn.servitly.com/docs/xy-chart-widget) | Displays values from different metrics on an XY chart. |
| [*Yamazumi Diagram*](https://learn.servitly.com/docs/yamazumi-diagram-widget) | This widget prints out the value transitions of a metric considering the previous 7 days. |

### Controls

| [*Add Button*](https://learn.servitly.com/docs/add-button) | Provides an “Add” button that page widgets can subscribe to. |
| --- | --- |
| [*Bluetooth Configuration*](https://learn.servitly.com/docs/bluetooth-configuration-widget) | Enables device configuration via Bluetooth. |
| [*Commands*](https://learn.servitly.com/docs/commands-widget) | Displays buttons that trigger commands on the remote thing. |
| [*Configuration Parameters*](https://learn.servitly.com/docs/configuration-parameters-widget) | Displays input fields for sending configuration parameter values to the connected thing. |
| [*Datetime Field*](https://learn.servitly.com/docs/datetime-field) | This field allows selecting a datetime for data filtering. |
| [*Export Button*](https://learn.servitly.com/docs/export-button) | Provides a global “Export” button on the page that widgets can subscribe to. |
| [*Knob*](https://learn.servitly.com/docs/knob-widget) | Displays a knob that allows the user to adjust a parameter value. |
| [*Number Field*](https://learn.servitly.com/docs/number-field) | Allows the user to enter a numeric value as page input. |
| [*Period Field V2*](https://learn.servitly.com/docs/period-field-v2) | Allows selecting a time period to filter data and scrolling the period forward or backward. |
| [*Recipe List*](https://learn.servitly.com/docs/recipe-list-widget) | Displays a list of recipes that can be edited and sent to remote things. |
| [*Search Field*](https://learn.servitly.com/docs/search-field) | This page control provides a search field, which can be used as input by other page widgets. |

### Templates

| [*Connection*](https://learn.servitly.com/docs/connection-template) | The set of templates to display the connection information for various user types and the level of detail. |
| --- | --- |
| [*Data Act*](https://learn.servitly.com/docs/data-act-template) | The set of templates you can use to configure your Data Recipient view. |
| [*Overview*](https://learn.servitly.com/docs/overview-template) | Provides overview templates tailored for different users. |
| [*Uptime*](https://learn.servitly.com/docs/uptime-template) | The set of templates to display the machine Uptime for various personas and levels of detail. |