Creating a new component

  • 2 minute(s) read
Prev Next

In the Components Manager main page, by pressing the Add Component button, you will create a new component by selecting the type.


Note that the type cannot be changed once the component has been created.
There are different types, each one with a different purpose and complexity.

You can select among:

  • FILTER: the simplest type of component you can define, it is used to format a data value into widgets.
    A filter can be used inside widgets (built-in and custom).

  • CONTROL: a page button or a field that can be used to make the page interactive.
    A control component can be used 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 forms.
    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.
    A template can be shared across multiple environments and projects, improving the configuration time.

Other than the type, you also have to provide the following information:

  • Name: the name of the component, which will be visible in the Console, for instance, in the template editor.

  • Component ID: the unique identifier of the component, used by the system to install and keep the component updated.
    While you are free to change the name, the ID once created cannot be changed.

  • Description: A few words describing the purpose of the component will be displayed in the console along with the name.

Once confirmed, you are redirected to the Component Definition page, where you can configure the main aspect of the component and write the source code (JS and CSS), implementing the component UI.

Source Code and Libraries

The source code of a component is based on standard JavaScript (ECMAScript) and CSS. In addition to other integrated components, you can utilize the libraries already included in the Servitly frontend.

Library

JQuery

A JavaScript library that simplifies DOM manipulation, event handling, AJAX requests, and cross-browser compatibility

Bootstrap

A front-end framework for building responsive and mobile-first user interfaces using pre-built CSS and JavaScript components.

amCharts

A charting and data visualization library for creating interactive and customizable charts.
You can select between version 4 and 5 of amCharts.

Lodash

A utility library that provides helper functions for working with arrays, objects, numbers, strings, and functions, improving code readability and performance.

Moment

A library for parsing, validating, manipulating, and formatting dates and times in JavaScript.

Servitly Lib

A set of functions and classes you can use to integrate with the DPS frontend and backend.

Optionally, you can include your preferred libraries by using this function that can be placed in the Custom Filters component. 

loadResources(["https://www.acme.com/lib-abc.js", "https://www.acme.com/lib-abc.css"], resolveCallback, rejectCallback)

To prevent race conditions, put the above code at the top of your script.

In the alternative, widgets can load libraries on demand synchronously when they are instantiated (first time only).
For more details, refer to the Third-party library loading section.