Getting Started with Components Manager

  • 3 minute(s) read

It may happen that our built-in components are not enough to display the information exactly as you want. That is why we provide you with the Components Manager. Through this tool you can create your own custom components.

Here are the key benefits you can achieve:

  • Added value for your users: you can design the interface of your DPS system so that it accurately represents your product, the operations or processes it supports, your data and information, ensuring it aligns closely with expectations of your user Personas. This strengthens your brand and your relationship with customers.

  • DPS differentiation: you can make your DPS truly unique and different from the solutions offered by your competitors.

  • Capitalization of development and reuse: if you are a partner you can build a repository of components that you can reuse in different projects, saving you a lot of time and allowing you to capitalize the development investment.

The components you can create through the Components Manager are:

FILTER

This is the simplest type of component. It is used to transform and format data values rendered into widgets.

For instance, through the Date Time filter it is possible to convert milliseconds to a formatted date or to hours.

In other cases you can also display icons and colored badges.

CONTROL

This is a page button or a field that can be used to make the page interactive. For instance, through the Period Field it is possible to select a period of time to filter and aggregate page data. Moreover, a control component can also be used to execute thing commands, update thing parameters or change inputs of other widgets.

WIDGET

This is a page block with a frame displaying data through tables, charts, schemes and other. It retrieves the data from the DPS backend, transform data (by using filters) and display values in a meaningful way to DPS users.
Example of widgets are the Time Series or Value.

TEMPLATE

This component act as a collection of ready to use templates that can be referenced inside the View pages.
A template component is designed to centralize the visualization of a specific aspect or topic of your products, an example is the Connection Template component which provides all the templates used to display the product connectivity data and related insights.

FAQ

Which type of component should I create?

Defining a WIDGET requires more effort than defining a FILTER, so it is better to figure out if what you want to do can be solved by changing the data rendering.
Consider that a FILTER is used within other widgets, and can generate HTML, for instance icons, colored text or small graphic constructs, so in some case a FILTER is enough for you.
If you need an interaction with the other page components or with the connected product to send command and parameters, you must create a CONTROL.
If you are managing multiple projects, and you want to share and keep specific pages aligned between them, you can create a TEMPLATE.

How can I access the Components Manager?

The Components Manager is a dedicated section within the Console, accessible from the Interfaces / Components page and then clicking on Open Components Manager.
Note that the Components Manager is available only to the Console users having the Components Editor role.
The Components Editor role can be assigned only by another Console user already having it, typically the account administrator that is responsible to manage other Console users.

What can I do in the Components Manager?

By entering the Components Manager, you can:

  • View all components you are authorized to edit.

  • Create new components.

  • Create a new version for a component.

  • Try components changes on a selected environment.

  • Manage component availability in your environments.

What is a component defined by?

A component is composed by:

  • General information used to describe how the component is integrated in the Console and in the DPS.

  • JavaScript code implementing the component.

  • CSS code used to style the component in the DPS.

  • HTML code in case you are defining templates.

For more details about how to define a component refer to this guide.

Can I debug the source code?

Yes, when you are editing a component, you can create a new DRAFT version installed on a test environment.
In this way the source code can be executed, and debugged by using the browser standard debugging tools (e.g. Chrome, Edge).
Once you complete the development, you can promote the DRAFT version to a public version, that is compiled, minimized and installed to your environments.

For more details about how to debug your code refer to this article.

Can I version a component?

Yes, you can create multiple versions of a component and define in which environment or project to make them available.
For instance the V1 is installed in the PRODUCTION environment, and the V2 remains in STAGING until the development is completed.

For more details about how to manage versions refer to this article.