Widgets
- Endpoint list
- Filter list
- Software list
- Endpoint token status
- Configuration
- Command execution
- Endpoint label
- Filter details
- Gauge
- Endpoint metadata
- Multi series chart
- Raw HTML
- Time series table
- Software version details
- Map
- Binary blobs list
- Endpoint orientation
- Luminance
- Basic client credentials
- TLS certificates
- Dashboard controls
- Navigation through table rows
The Kaa Web Dashboard (WD) is pre-shipped with a collection of widgets that receive data from other Kaa services and display them in different visual layouts. The table below summarizes the current collection of Kaa widgets. It describes each widget’s purpose, type, and the Kaa services involved in the widget operation.
Widget name | Purpose | Services |
---|---|---|
Endpoint list | Create and view endpoints | EPR |
Software list | Create and view software updates and their details | OTAO, EPR |
Software version details | View and modify software updates and their details | OTAO, EPR |
Endpoint metadata | View, add, edit and delete endpoint metadata | EPR |
Configuration | View and edit endpoint configuration | ECR |
Map | View location of one or more endpoints | EPR, EPTS |
Multi series chart | View time series data in the graphical format | EPTS |
Time series table | View time series data in the table format | EPTS |
Gauge | View the last value in time series | EPTS |
Raw HTML | Render custom HTML | EPR |
Endpoint label | Display a custom image with labels that represent data | EPR, EPTS |
Command execution | Execute remote commands via a switch | EPTS, EPR, CEX |
Filter list | View endpoint filters and their details | EPR |
Filter details | View and modify details of a specific filter | EPR |
Endpoint token status | Create, activate, suspend and revoke the endpoint token | CM |
Binary blobs list | Displays uploaded blobs for individual applications or endpoints | BCX |
Endpoint orientation | Displays device orientation in space | EPTS |
Luminance | Displays light level | EPTS |
Basic client credentials | View, add and modify users credentials (username/password) | CCM |
TLS certificates | View, add and modify users credentials (TLS certificate) | CCM |
Dashboard controls | Set dashboard context which may be used by the dashboard widgets |
Endpoint list
The Endpoint list widget is primarily used to display a list of the available devices for the user.
The second important feature of this widget is enabling the user to create new endpoints.
The widget also supports displaying filtered endpoints.
You can also configure interoperation between this widget and the Map widget to control which endpoint locations are displayed on the map.
This feature may be enabled by selecting the Should rows be selectable?
option in the Endpoint list widget settings
as well as the corresponding configuration option in the map widget. You can find more information in the Map widget section.
You can configure the widget to enable the direct link between entities in the table and their dashboards. To learn more, click here.
The Endpoint list widget supports the following interfaces:
Filter list
The Filter list widget is used to display a list of the available filters for the user.
It also enables the user to create new filters as well as delete them:
You can configure the widget to enable the direct link between entities in the table and their dashboards. To learn more, click here.
The Filter list widget supports the following interfaces:
Software list
The Software list widget is used to display a list of the available software versions for the user.
It also enables the user to create new software versions.
You can configure the widget to enable the direct link between entities in the table and their dashboards. To learn more, click here.
The Software list widget supports the following interfaces:
Endpoint token status
The Endpoint token status widget is used to manage the status of the [endpoint token][endpoint token]. The user can create, activate, suspend and revoke the endpoint token.
The Endpoint token status widget supports the following interfaces:
Configuration
The Configuration widget is used to view and edit configuration of the endpoint or the endpoint group.
The widget enables the user to:
- Display a single integer value and change it.
- Display several endpoint configuration parameters and change them.
- Display configuration as JSON in the text editor area and modify it.
The Configuration widget supports the following interfaces:
Command execution
The Command execution widget is used to execute commands on an endpoint.
The Configuration widget supports the following interfaces:
Endpoint label
The Endpoint label widget is used to display endpoint dynamic data over a custom image.
The Endpoint label widget supports the following interfaces:
Filter details
The Filter details widget is used to view and edit filter details.
It supports the following interfaces:
Gauge
The Gauge widget is used to display the last time series data for an endpoint. This widget has different representations depending on its type. Here are some of the gauge layouts available in WD.
It supports the following interfaces:
Endpoint metadata
The widget is used to monitor the endpoint metadata information stored in the EPR service.
It supports the following interfaces:
Multi series chart
The Multi series chart widget is used to display a chart that shows time series data for one or more endpoints. Below is an example of a line chart.
Multi series chart widget supports display of data as a bar chart as well.
Moreover, it is possible to configure output of different data series in all available modes at once: line, bar and step.
The Multi series chart widget supports the following interfaces:
Raw HTML
The Raw HTML widget is used to embed custom HTML into the dashboards. This widget supports totally static HTML content
as well as dynamic endpoint data stored in the EPR service.
There are two ways to embed an image into the HTML content: encoding it into Base64 or referencing it from the WD external static resources.
The Raw HTML widget is capable to handle with following advanced templates:
Conditional rendering:
${ @if (number < 0) }
'number' is less than 0
${ #elif (number > 0) }
'number' is bigger than 0
${ #else }
'number' is 0
${ /if }
Iterating over an array:
${ @each(someArray) => val, index }
The current array item is ${val}, the current index is ${index}
${ /each }
Iterating over an object:
${ @foreach(someObject) => key, val }
The current object key is ${key}, and the value is ${val}
${ /foreach }
Sort by specific key with optional parameter to specify the order as asc / desc:
${ @sortBy(collection, key, order) => sortedCollection }
${ @each(sortedCollection) => val, index }
The sorted value is ${val[key]}
${ /each }
${ /sortBy }
Find by accepts the key and value and return found item or null:
${ @findBy(collection, 'key', 'value') => foundItem }
The found item's name is ${foundItem[key]}
${ /sortBy }
Filter by accepts the key and value and returns filtered array. Nested objects are supported:
${ @filterBy(collection, 'key', 'value') => filteredCollection }
The filtered collection is ${filteredCollection}
${ /filterBy }
<!-- Find item by nested key -->
${ @findBy(collection, 'sensor.type', 'temperature') => foundItem }
The found item's name is ${foundItem.name}
${ /findBy }
<!-- Find item by deeply nested key -->
${ @findBy(collection, 'device.sensor.readings.latest', '25.5') => foundItem }
The found device is ${foundItem.device.name}
${ /findBy }
try…catch structures:
${ @try }
This won't work: ${unknownVariable}
${ #catch => err }
Uh-oh, error! Message: "${err.message}"
${ /try }
There is also support for pipe expressions to manipulate the value.
For example with given json assigned to metadata variable in the widget configuration:
{
"name": "Device 1",
"sensors": [
{"name": "Sensor 1"},
{"name": "Sensor 2"}
]
}
json(spacing?)
: output json string. Optionally accepts white space counter for better readability.
<!-- Output json string. Useful for debugging -->
<pre>${metadata | json}</pre>
<!-- renders -->
<pre>{ "name": "Device 1", "sensors": [ {"name": "Sensor 1"}, {"name": "Sensor 2"} ] }</pre>
<!-- json pipe accepts optional number of spaces to prettify json -->
<pre>${it | json('2')}</pre>
mapBy(key)
: creates array iterating by each element and returns the value of key
during iteration
<!-- Map values by specified key -->
<span>${metadata.sensors | mapBy('name')}</span>
<!-- renders -->
<span>Sensor 1,Sensor 2</span>
findBy(key, value)
: finds the first item by the given key and value. Supports nested objects.
<!-- Find the first item by the given key and value. Suppose the object is:
{
"sensors": [
{"name": "Sensor 1"},
{"name": "Sensor 2"}
]
} -->
<span>${metadata.sensors | findBy('name', 'Sensor 1')}</span>
<!-- renders -->
<span>Sensor 1</span>
<!-- Find the first item by the given nested key and value. Suppose the object is nested like:
{
"sensors": [
{
"name": "Sensor 1",
"customer": {
"name": "KaaIoT",
"id": 123
}
},
{
"name": "Sensor 2",
"customer": {
"name": "Acme Corp",
"id": 456
}
}
]
} -->
<span>${metadata.sensors | findBy('customer.name', 'KaaIoT')}</span>
<!-- renders -->
<span>KaaIoT</span>
filterBy(key, value)
: filters the array by the given key and value. Supports nested objects.
<!-- Filter the array by the given key and value. Suppose the object is:
{
"sensors": [
{"name": "Sensor 1"},
{"name": "Sensor 2"}
]
} -->
<span>${metadata.sensors | filterBy('name', 'Sensor 1')}</span>
<!-- renders -->
<span>[{"name": "Sensor 1"}]</span>
<!-- Filter the array by the given nested key and value. Suppose the object is nested like:
{
"sensors": [
{
"name": "Sensor 1",
"customer": {
"name": "KaaIoT",
"id": 123
}
},
]
} -->
<span>${metadata.sensors | filterBy('customer.name', 'KaaIoT')}</span>
join(separator?)
: joins array with given separator
<!-- Join array by optional separator -->
<span>${metadata.sensors | mapBy('name') | join('=')}</span>
<!-- renders -->
<span>Sensor 1=Sensor 2</span>
formatDate(format?)
: converts the date according to current timezone, to specific format. By default format is YYYY-MM-DD HH:mm:ss
<!-- With default format -->
<span>${createdDate | formatDate}</span>
<!-- renders -->
<span>2023-01-20 10:00:00</span>
<!-- With specific format Day Month name, Year -->
<span>${createdDate | formatDate('DD MMMM, YYYY')}</span>
<!-- renders -->
<span>20 January, 2023</span>
timeAgo()
: accepts date and returns the time ago moment processed date`
<!-- With timestamp -->
<span>${createdDate | timeAgo}</span>
<!-- renders -->
<span>an hour ago</span>
duration(format?)
: optionally accepts units like “ms”, “s”, “h”, “m” and returns the user friendly value of duration
<!-- With seconds -->
<span>${600 | duration}</span>
<!-- renders -->
<span>10 minutes</span>
<!-- With minutes -->
<span>${600 | duration(m)}</span>
<!-- renders -->
<span>10 hours</span>
translate(variables?)
: translates given string. Optionally accepts the variables as JSON string.
<!-- Suppose we have translation defined as { "custom": { "Temperature": "Temperature EN" } } -->
<span>${'custom.Temperature' | translate}</span>
<!-- renders -->
<span>Temperature EN</span>
<!-- Suppose we have translation with dynamic variable defined as { "custom": { "Temperature value": "Temperature is " } } -->
<span>${'custom.Temperature value' | translate('{"value": 30 }')}</span>
<!-- renders -->
<span>Temperature is 30</span>
split(separator?)
: splits the string by the given separator and returns an array
<!-- Splits the string by the given separator -->
<span>${'1,2,3' | split(',')}</span>
<!-- renders -->
<span>['1', '2', '3']</span>
get(path)
: gets the value from the given path
<!-- Gets the value from the given path -->
<span>${metadata | get('name')}</span>
<!-- renders -->
<span>Device 1</span>
<!-- Gets the value with default value if path is not found -->
<span>${metadata | get('name', 'default value')}</span>
<!-- renders -->
<span>default value</span>
slice(start, end)
: slices the array from the start
to the end
index
<!-- Slices the array from the 1st to the 3rd element -->
<span>${['1', '2', '3'] | slice(0, 3)}</span>
<!-- renders -->
<span>['1', '2', '3']</span>
fade(coefficient)
: changes the opacity of the specified color according to the given coefficient.
<!-- Make color half transparent -->
<span style="background-color: ${'#1f8efa' | fade(0.5)}"></span>
<!-- renders -->
<span style="background-color: rgba(31, 142, 250, 0.5) "></span>
darken(coefficient)
: decreases the brightness of the specified color according to the given coefficient..
<!-- Darken the color by 50% -->
<span style="background-color: ${'#1f8efa' | darken(0.5)}"></span>
<!-- renders -->
<span style="background-color: rgb(15, 71, 125);"></span>
lighten(coefficient)
: increases the brightness of the specified color according to the given coefficient.
<!-- Lighten the color by 50% -->
<span style="background-color: ${'#1f8efa' | lighten(0.5)}"></span>
<!-- renders -->
<span style="background-color: rgb(143, 198, 252);"></span>
emphasize(coefficient)
: adjusts the brightness and contrast of the specified color according to the given coefficient.
<!-- Emphasize the color by 50% -->
<span style="background-color: ${'#1f8efa' | emphasize(0.5)}"></span>
<!-- renders -->
<span style="background-color: rgb(143, 198, 252);"></span>
executeCommand(endpointId, commandType, commandPayload, refreshTemplateContent, refreshDashboardContext, queryParams)
: this helper adds a specific attribute to an HTML element, which enables sending a command when the element is clicked.
<!-- executeCommand with dynamic endpointId and payload -->
<div ${@executeCommand(ctx.ep, 'remote_toggle', `{"lock": "${+!lock.status}"}`, true, true, '{"awaitTimeout": 5, "commandTtl": 60000}')/}>Toggle lock</div>
The Raw HTML widget supports the following interfaces:
Also the widget supports applying UI theme colors in the widget contents. You can find the available colors listing on the Branding page. To use these colors, you need to refer to the variable uiTheme, select a color category from the branding section, write the desired category and color in the form of a camelCase. For example, if you want to set the secondary color for some text in the widget, the configuration would look like this:
<span style="color: ${uiTheme.textColors.colorSecondary};">some text</span>
Some more examples of the theme color variables:
Branding - Text colors - Color-primary-variant
=> ${uiTheme.textColors.colorPrimaryVariant}
Branding - Element colors - Color-surface-1
=> ${uiTheme.elementColors.colorSurface1}
Time series table
The Time series table widget is used to display endpoint time series data in real time.
The Time series table widget supports the following interfaces:
Software version details
The Software version details widget is used to view and edit software version details.
The widget supports the following interfaces:
Map
A map widget is used to display the current location of one or multiple endpoints. It also allows tracking the endpoints movement over the specified period of time.
It is also possible to reflect the endpoint status on the map.
In our example configuration, the green marker indicates that the enpoint is active and the yellow one that the endpoint is stalled.
This widget may interoperate with the Map widget in terms of selection which locations to display on map.
This can be enabled by selecting the Show only selected endpoints
option in the Mapwidget settings.
You can find more information here.
The Map widget supports the following interfaces:
Binary blobs list
The Binary blobs list widget displays a list of the blobs uploaded from your devices with Binary data Collection Extension service.
Endpoint orientation
The Endpoint orientation widget displays device orientation in space. You can set URL to your custom 3D model in widget configuration.
Luminance
The Luminance widget displays light level.
Basic client credentials
The Basic client credentials widget is used to display, add and modify users credentials. It interacts with Client Credentials Management service.
TLS certificates
The TLS certificates widget is used to display, add and modify users credentials. It interacts with Client Credentials Management service.
Dashboard controls
The Dashboard controls widget is used to set the shared dashboard context which may be used by the widgets placed on it. The shared context includes time and date range as well as any static value. Currently, Multi series chart and Gauge support usage of the shared dashboard context.
Navigation through table rows
You can configure the table widget to enable the direct link between entities in the table and their dashboards. In this case, you can click on an entity record in the table and get redirected to the entity dashboard.
The configuration flow:
-
Create an entity dashboard, to which you would like to setup the redirects. It can be an
endpoint
,filter
orsoftware
dashboard depending on the entity type of widget you are setuping (see Endpoint list, Filter list and Software list widgets details). -
Select the target dashboard in widget settings:
Here’s an example with the endpoint list widget.
- Click on a row in the list.
- Immediately get redirected to the corresponding entity dashboard.