Creating custom Filters

  • 1 minute(s) read

In the case the built-in filters are not enough, Servitly allows defining custom filters that can be used within pages to cover particular needs in displaying data.

A filter is a piece of JavaScript code that takes the value of a metric or property as input and produces a number (e.g. 2 decimal format), string (e.g. integer to label), or an HTML fragment (e.g. colored icon).

It is loaded into the Servitly front-end and executed directly in the user's browser.

Editing custom code

To edit a custom filter, you should:

  1. Enter the Interfaces / Components page.

  2. Find the Custom Filters component.

  3. Click on the Edit Custom Code button.

  4. Modify the JavaScript as you need and Save.

By clinking the Edit button, you can edit the JavaScript through a text editor.

Sample filter

The following filter receives a floating-point number and truncates decimals to 1 digit:

exports.singleDecimalFormat = function () {

    function SingleDecimalFormat() {}

    SingleDecimalFormat.prototype.transform = function (value, args) {

        return parseFloat(value).toFixed(1);
    };
    return SingleDecimalFormat;

}();

More complex filters can use Promises to load JavaScript libraries (e.g. SVG) and do something more complex than formatting a value. Pay attention that filters are executed on the client-side, which means that the underlying device hardware may affect the way the JavaScript is executed.

Using custom filters

Custom filters can be used within a template, for instance to format a number in a specific way.

<thing-details-widget>
 <metric name="Temperature" filter="singleDecimalFormat"></property>
</thing-details-widget>

In the template Design View, by clicking on Filter property, a popup dialog appears, allowing you to select for a metric the filter to apply.

The filter list includes all filters defined in the enabled components and your custom filters, you can find under the Group having the same name as the DPS application you are configuring.