Looking for an advanced dashboard widget in Thingsboard to edit attributes. Look no more. ATAW is very flexible. You can choose one ore many of the input field to let the user edit attribute values. The following input types are possible:
- textfield (opt. pattern check with regex)
- slider / range slider (min,max,step)
- checkbox (true|false)
- multifield (array|list)
- Import advanced_thingsboard_attribute_widget__ataw_.json to widget Library
OR (if you want to make changes to the widget specific stuff and only want to import the class)
- create new Widget (type: control widget, call it ATAW)
- add resources:
- https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
- https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js
- https://cdn.jsdelivr.net/gh/SchweizerischeBundesbahnen/thingsboard-advanced-attribute-widget/src/class.inputfield.js
- copy content of src/html.html to "HTML" tab
- copy content of src/style.css to "CSS" bab
- copy content of src/javascript.js to javascript section
- copy content of src/settings-schema.json to "Settings schema"
- save widget
At step 2. you can also specify the version of the class by adding the github version behind an "@", for example: https://cdn.jsdelivr.net/gh/SchweizerischeBundesbahnen/thingsboard-advanced-attribute-widget@bc0c2280f271f915b411d9949654ccf82e172bf1/src/class.inputfield.js to get commit version "bc0c2280f271f915b411d9949654ccf82e172bf1".
- Create new Dashboard
- create new entity alias
- add new widget > select ATAW Widget
- go to advanced tab and edit "Button label"
- set a device command (this can be used to filter in Rules)
- select attribute type (server|shared)
- Set parameters via json Example:
[
{
"title": "LED einschalten?",
"type": "checkbox",
"key": "led_on"
},
{
"title": "Max Temp 1: %s °C",
"type": "range",
"key": "temp_max",
"min": -50,
"max": 100,
"step": 1
},
{
"title": "Min Temp 1: %s °C",
"type": "range",
"key": "temp_min",
"min": -50,
"max": 100,
"step": 1
},
{
"title": "Waypoint %s: ",
"key": "waypoints",
"type": "text",
"default": "0",
"multi": true,
"multitype": "array",
"pattern":"^[+-]?([0-9]+\\.?[0-9]*|\\.[0-9]+)$"
},
{
"title": "E-Mail Alarm %s: ",
"key": "alert_email",
"type": "text",
"default": "0",
"multi": true,
"multitype": "array",
"pattern":"[^@ \\t\\r\\n]+@[^@ \\t\\r\\n]+\\.[^@ \\t\\r\\n]+"
}
]
- Save widget
- Save dashboard
- Try widget!
https://schweizerischebundesbahnen.github.io/thingsboard-advanced-attribute-widget/
The directory "test" contains a simple framework to locally test the widget and debug in a Thingsboard independent enviroment.