Editing a Filter

  • 1 minute(s) read

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.

The filter output is attached to HTML so you can also generate an HTML fragment, for instance to style and color values.

The following code describe a filter that receives a number (float or string) and truncates decimals to 1 digit.

exports.singleDecimalFormat = class {

    constructor() {}
    
    transform(value, args) {
        return parseFloat(value).toFixed(1);
    }   

};

When writing code for your widget, you can use the following built-in classes:

  • AppUtils: provides a set of methods to access and interact with the page.
    This class is automatically instantiated by the front-end framework and is available in the context via the appUtils variable.

  • ServitlyClient: provides methods to access the Servitly backend API.
    This class is automatically instantiated by the front-end framework and is available in the context via the servitlyClient variable.

Asynchronous API invocation

Note that since filters generate value synchronously, the use of the Servitly API (which is asynchronous) is not recommended.
In this case, the filter must return a placeholder element (e.g. a div with specific class or ID) to be updated in the success callback passed to the servitlyClient method.