Creating Custom Widget on Thingsboard

Here we will see , how to create a custom widget and how to display data on custom widget. If you have basic idea about HTML and CSS then you can make very good custom widgets on thingsboard to display data. Assuming you know, how to create a device and  dashboard on thingsboard . If you don’t know, how to create a device and  dashboard on thingsboard, please click on the following links.
Creating a device on thingsboard
Creating a dashboard on thingsboard

1)Navigate to your dashboard where you want to create custom widget and click on Enter edit mode , shown in following image.

2)Click on Add new widget
Click on create new widget

3)Select widget as Cards and click on LATEST VALUES and double click on VALUE TITLE Card

4)Click on ADD , select entity and data resources shown in following figure

5)now click on ADVANCED
Download and  paste following code in HTML field shown below. Value of Temperature is access by using ${#0} and Value of Humidity is access by using ${#1}. Values we can access based on index . first data resource has 0 index , second data resource has 1 index and so on. following code only work if you have two or more than two data resources. Here Temperature and Humidity are two resources selected shown in above image.
ADD: Click on ADD
Custom Widget HTML code (1909 downloads)

6)Click on Apply Changes

Congrats you have successfully created your own custom widget on thingsboard. Created  custom widget is shown in above image.

You may also like...

Leave a Reply