Components

In the Interfaces / Components page, you have an overview of all the components you can use within a Template.

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 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, Value, Thing Details), while other components need to be manually activated (e.g., Bluetooth Configuration, Knob, Radar), 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 with relative translations are updated with the component’s labels.
The list of Templates is enriched with the component’s ready-to-use templates.
The 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.

For more details, refer to the Getting Started with Components Manager article.

Component Reference

Here is the complete list of components available in Servitly.

Filters

Alert Details	Enriches the alert lists with status and detailed information.
Booleans	Displays boolean values using visual indicators such as colored labels, badges, or icons to make true/false states immediately recognizable.
Cloud Status	Displays the product’s cliud status using a colored badge for quick visual identification.
Connection Status	Displays the product’s connection status using a colored badge for quick visual identification.
Contact Info	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	Transforms and displays date and time values in various formats and representations.
Dictionary	Displays the value of a metric or property according to the configured dictionary and thresholds.
Events	A set of filters to display events.
Images	Provides a set of functions to display images in various styles and formats.
Log Message	Displays log messages with color and formatting for improved readability.
Map Marker	Displays a map highlighting a specific location with a marker at the provided GPS coordinates.
Numbers	Transforms and displays numeric values in various formats and styles.
Progress Bar V1	Renders a percentage value as a color-coded progress bar based on defined thresholds.
Progress Bar V2	Renders a percentage value as a color-coded progress bar based on defined thresholds.
Ratings	Displays an integer rating from 0 to 5 using colored icons.
Service Level	A set of functions used to render the Service Level associated with a Thing in different ways.
Status Badge	Displays a status value inside a color-coded badge.
URL	Displays URL values with different behaviors, such as opening in a new tab or providing a direct download link.
Utility	Provides a set of general-purpose functions and filters for various use cases.
Value to Icon	Displays a colored icon based on a specified value.

Widgets

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

Controls

Add Button	Provides an “Add” button that page widgets can subscribe to.
Bluetooth Configuration	Enables device configuration via Bluetooth.
Commands	Displays buttons that trigger commands on the remote thing.
Configuration Parameters	Displays input fields for sending configuration parameter values to the connected thing.
Datetime Field	This field allows selecting a datetime for data filtering.
Export Button	Provides a global “Export” button on the page that widgets can subscribe to.
Knob	Displays a knob that allows the user to adjust a parameter value.
Number Field	Allows the user to enter a numeric value as page input.
Period Field V2	Allows selecting a time period to filter data and scrolling the period forward or backward.
Recipe List	Displays a list of recipes that can be edited and sent to remote things.
Search Field	This page control provides a search field, which can be used as input by other page widgets.

Templates

Connection	The set of templates to display the connection information for various user types and the level of detail.
Data Act	The set of templates you can use to configure your Data Recipient view.
Overview	Provides overview templates tailored for different users.
Uptime	The set of templates to display the machine Uptime for various personas and levels of detail.