Gustav Trygg
Reputation: 1
Is it Possible to link a button widget to a map widget in thingsboard?
Can you link a button widget to a map widget? If I create a button widget I want it to show different kinds of devices in the map when I press it. For example: I have a number of devices on the map, some are active and some are inactive. I want to use the button to filter out and only show inactive devices when I press it the first time and active devices when I press it a second time on the map. Is it possible?
I have tried to ask Chatgpt for advice but have come up empty. It gives me some examples on how to use "dashboard messages" using js code as a custom action. For example:
self.onAction = function() {
** // Send a custom message to the map widget
self.ctx.widgetContext.sendDashboardMessage("updateMap", {
filterKey: "deviceType",
filterValue: "temperature"
});
};**
Thats the button action and the map action it recommends is a follows:
**self.onDataUpdated = function() {
// Listen for the "updateMap" message
self.ctx.dashboard.on("updateMap", function(data) {
var filterKey = data.filterKey;
var filterValue = data.filterValue;
// Example: Update the map widget datasource based on the received message
self.ctx.updateAliases({
filter: {
key: filterKey,
value: filterValue
}
});
});
};**
Have tried both scripts and changed the parameters to the corresponding ones I have but cant get it to work. Im kind of new to Thingsboard when it comes down to JS scripting and have trouble sometimes to get my head around the solutions.
Upvotes: 0
Views: 99
Answers (1)
Олег Хальков
Reputation: 1
example dashboard JSON (import it). instead of the widget card you can use a widget map (thingsboard v3.7+)
{
"title": "test",
"image": null,
"mobileHide": false,
"mobileOrder": null,
"name": "test",
"configuration": {
"description": "",
"widgets": {
"681c3372-dd71-35b7-2b15-cff77ce8a7ba": {
"typeFullFqn": "system.cards.entities_table",
"type": "latest",
"sizeX": 7.5,
"sizeY": 6.5,
"config": {
"timewindow": {
"displayValue": "",
"selectedTab": 0,
"realtime": {
"realtimeType": 1,
"interval": 1000,
"timewindowMs": 86400000,
"quickInterval": "CURRENT_DAY",
"hideInterval": false,
"hideLastInterval": false,
"hideQuickInterval": false
},
"history": {
"historyType": 0,
"interval": 1000,
"timewindowMs": 60000,
"fixedTimewindow": {
"startTimeMs": 1729764181502,
"endTimeMs": 1729850581502
},
"quickInterval": "CURRENT_DAY",
"hideInterval": false,
"hideLastInterval": false,
"hideFixedInterval": false,
"hideQuickInterval": false
},
"aggregation": {
"type": "NONE",
"limit": 200
}
},
"showTitle": true,
"backgroundColor": "rgb(255, 255, 255)",
"color": "rgba(0, 0, 0, 0.87)",
"padding": "4px",
"settings": {
"enableSearch": true,
"enableSelectColumnDisplay": true,
"enableStickyHeader": true,
"enableStickyAction": true,
"reserveSpaceForHiddenAction": "true",
"displayEntityName": false,
"displayEntityLabel": false,
"displayEntityType": false,
"displayPagination": true,
"defaultPageSize": 10,
"defaultSortOrder": "name",
"useRowStyleFunction": false,
"entitiesTitle": "Entities"
},
"title": "Entities table",
"dropShadow": true,
"enableFullscreen": true,
"titleStyle": {
"fontSize": "16px",
"fontWeight": 400,
"padding": "5px 10px 5px 10px"
},
"useDashboardTimewindow": false,
"showLegend": false,
"datasources": [
{
"type": "entity",
"name": "",
"entityAliasId": "88982c4f-ae03-d54e-bbaf-c425ccab3c64",
"filterId": "a01dd946-02fe-bc3d-aeda-7bb4e8ebeaf4",
"dataKeys": [
{
"name": "name",
"type": "entityField",
"label": "Name",
"color": "#2196f3",
"settings": {},
"_hash": 0.8263202899500013
},
{
"name": "active",
"type": "attribute",
"label": "active",
"color": "#4caf50",
"settings": {
"customTitle": "",
"columnWidth": "0px",
"useCellStyleFunction": true,
"cellStyleFunction": "var active = value;\nvar color = 'black';\nif (active) {\n if (active === \"false\") {\n color = 'red';\n } else {\n color = 'green';\n }\n}\nreturn {\n fontWeight: 'bold',\n color: color\n};\n",
"useCellContentFunction": false,
"useCellContentFunctionOnExport": true,
"cellContentFunction": "",
"defaultColumnVisibility": "visible",
"columnSelectionToDisplay": "enabled",
"columnExportOption": "onlyVisible"
},
"_hash": 0.4824152367772563,
"aggregationType": null,
"units": null,
"decimals": null,
"funcBody": null,
"usePostProcessing": null,
"postFuncBody": null
}
],
"alarmFilterConfig": {
"statusList": [
"ACTIVE"
]
}
}
],
"displayTimewindow": false,
"configMode": "advanced",
"actions": {},
"showTitleIcon": false,
"titleIcon": "list",
"iconColor": null,
"titleFont": null,
"titleColor": null,
"enableDataExport": true
},
"row": 0,
"col": 0,
"id": "681c3372-dd71-35b7-2b15-cff77ce8a7ba"
},
"701db14b-f223-c3d2-14ba-773738aeff81": {
"typeFullFqn": "system.toggle_button",
"type": "rpc",
"sizeX": 4,
"sizeY": 2,
"config": {
"showTitle": true,
"backgroundColor": "#ffffff",
"color": "rgba(0, 0, 0, 0.87)",
"padding": "0px",
"settings": {
"initialState": {
"action": "GET_ATTRIBUTE",
"defaultValue": true,
"executeRpc": {
"method": "getState",
"requestTimeout": 5000,
"requestPersistent": false,
"persistentPollingInterval": 1000
},
"getAttribute": {
"scope": null,
"key": "active"
},
"getTimeSeries": {
"key": "state"
},
"dataToValue": {
"type": "NONE",
"dataToValueFunction": "/* Should return boolean value */\nreturn data;",
"compareToValue": true
}
},
"checkState": {
"action": "SET_ATTRIBUTE",
"executeRpc": {
"method": "setState",
"requestTimeout": 5000,
"requestPersistent": false,
"persistentPollingInterval": 1000
},
"setAttribute": {
"scope": "SERVER_SCOPE",
"key": "active"
},
"putTimeSeries": {
"key": "state"
},
"valueToData": {
"type": "CONSTANT",
"constantValue": true,
"valueToDataFunction": "/* Convert input boolean value to RPC parameters or attribute/time-series value */\nreturn value;"
}
},
"uncheckState": {
"action": "SET_ATTRIBUTE",
"executeRpc": {
"method": "setState",
"requestTimeout": 5000,
"requestPersistent": false,
"persistentPollingInterval": 1000
},
"setAttribute": {
"scope": "SERVER_SCOPE",
"key": "active"
},
"putTimeSeries": {
"key": "state"
},
"valueToData": {
"type": "CONSTANT",
"constantValue": false,
"valueToDataFunction": "/* Convert input boolean value to RPC parameters or attribute/time-series value */ \n return value;"
}
},
"disabledState": {
"action": "DO_NOTHING",
"defaultValue": false,
"getAttribute": {
"key": "state",
"scope": null
},
"getTimeSeries": {
"key": "state"
},
"dataToValue": {
"type": "NONE",
"compareToValue": true,
"dataToValueFunction": "/* Should return boolean value */\nreturn data;"
}
},
"autoScale": true,
"horizontalFill": true,
"verticalFill": false,
"checkedAppearance": {
"type": "outlined",
"showLabel": true,
"label": "Active",
"showIcon": true,
"icon": "mdi:lock-open-variant",
"iconSize": 24,
"iconSizeUnit": "px",
"mainColor": "#198038",
"backgroundColor": "#FFFFFF",
"borderRadius": "4px",
"customStyle": {
"enabled": null,
"hovered": null,
"pressed": null,
"activated": null,
"disabled": null
}
},
"uncheckedAppearance": {
"type": "filled",
"showLabel": true,
"label": "Inactive",
"showIcon": true,
"icon": "lock",
"iconSize": 24,
"iconSizeUnit": "px",
"mainColor": "#D12730",
"backgroundColor": "#FFFFFF",
"borderRadius": "4px",
"customStyle": {
"enabled": null,
"hovered": null,
"pressed": null,
"activated": null,
"disabled": null
}
},
"background": {
"type": "color",
"color": "#fff",
"overlay": {
"enabled": false,
"color": "rgba(255,255,255,0.72)",
"blur": 3
}
},
"padding": "12px"
},
"title": "Active/Inactive",
"dropShadow": true,
"enableFullscreen": false,
"widgetStyle": {},
"actions": {
"headerButton": [
{
"name": "hjgh",
"icon": "more_horiz",
"useShowWidgetActionFunction": null,
"showWidgetActionFunction": "return true;",
"type": "custom",
"customFunction": null,
"openInSeparateDialog": false,
"openInPopover": false,
"id": "15c91fcf-78c3-b63d-d1f0-14db88811b97"
}
]
},
"widgetCss": "",
"noDataDisplayMessage": "",
"titleFont": {
"size": 16,
"sizeUnit": "px",
"family": "Roboto",
"weight": "500",
"style": null,
"lineHeight": "1.6"
},
"showTitleIcon": false,
"titleTooltip": "",
"titleStyle": {
"fontSize": "16px",
"fontWeight": 400
},
"pageSize": 1024,
"titleIcon": "home",
"iconColor": "rgba(0, 0, 0, 0.87)",
"iconSize": "24px",
"configMode": "basic",
"targetDevice": {
"type": "entity",
"entityAliasId": "76e8f1e3-a64f-f30b-c4a1-be5ce8e12b9d"
},
"titleColor": null,
"borderRadius": null,
"datasources": []
},
"row": 0,
"col": 0,
"id": "701db14b-f223-c3d2-14ba-773738aeff81"
}
},
"states": {
"default": {
"name": "test",
"root": true,
"layouts": {
"main": {
"widgets": {
"681c3372-dd71-35b7-2b15-cff77ce8a7ba": {
"sizeX": 7,
"sizeY": 11,
"row": 0,
"col": 0
},
"701db14b-f223-c3d2-14ba-773738aeff81": {
"sizeX": 4,
"sizeY": 2,
"row": 0,
"col": 17
}
},
"gridSettings": {
"layoutType": "default",
"backgroundColor": "#eeeeee",
"columns": 24,
"margin": 10,
"outerMargin": true,
"backgroundSizeMode": "100%"
}
}
}
}
},
"entityAliases": {
"88982c4f-ae03-d54e-bbaf-c425ccab3c64": {
"id": "88982c4f-ae03-d54e-bbaf-c425ccab3c64",
"alias": "all",
"filter": {
"type": "entityType",
"resolveMultiple": true,
"entityType": "DEVICE"
}
},
"76e8f1e3-a64f-f30b-c4a1-be5ce8e12b9d": {
"id": "76e8f1e3-a64f-f30b-c4a1-be5ce8e12b9d",
"alias": "current user",
"filter": {
"type": "singleEntity",
"resolveMultiple": false,
"singleEntity": {
"entityType": "CURRENT_USER",
"id": "13814000-1dd2-11b2-8080-808080808080"
}
}
}
},
"filters": {
"a01dd946-02fe-bc3d-aeda-7bb4e8ebeaf4": {
"id": "a01dd946-02fe-bc3d-aeda-7bb4e8ebeaf4",
"filter": "current user",
"keyFilters": [
{
"key": {
"type": "SERVER_ATTRIBUTE",
"key": "active"
},
"valueType": "BOOLEAN",
"predicates": [
{
"keyFilterPredicate": {
"operation": "EQUAL",
"value": {
"defaultValue": false,
"dynamicValue": {
"sourceType": "CURRENT_USER",
"sourceAttribute": "active",
"inherit": false
}
},
"type": "BOOLEAN"
},
"userInfo": {
"editable": true,
"label": "",
"autogeneratedLabel": true,
"order": 0
}
}
]
}
],
"editable": true
}
},
"timewindow": {
"displayValue": "",
"hideAggregation": false,
"hideAggInterval": false,
"hideTimezone": false,
"selectedTab": 0,
"realtime": {
"realtimeType": 0,
"interval": 1000,
"timewindowMs": 60000,
"quickInterval": "CURRENT_DAY",
"hideInterval": false,
"hideLastInterval": false,
"hideQuickInterval": false
},
"history": {
"historyType": 0,
"interval": 1000,
"timewindowMs": 60000,
"fixedTimewindow": {
"startTimeMs": 1729764156901,
"endTimeMs": 1729850556901
},
"quickInterval": "CURRENT_DAY",
"hideInterval": false,
"hideLastInterval": false,
"hideFixedInterval": false,
"hideQuickInterval": false
},
"aggregation": {
"type": "AVG",
"limit": 25000
}
},
"settings": {
"stateControllerId": "entity",
"showTitle": false,
"showDashboardsSelect": true,
"showEntitiesSelect": true,
"showDashboardTimewindow": true,
"showDashboardExport": true,
"toolbarAlwaysOpen": true
}
}
}
Upvotes: 0
Related Questions
- Thingsboard polygon colour change
- Thingsboard shared attribute
- How to get live connection status of devices in ThingsBoard?
- Thingsboard Alarm Widget - Custom Action for "On row click "
- Generate an internal alarm that propagates through the thingsboard instance
- Filter telemetry data on dashboard from input entered in custom widget textbox - Thingsboard