Product/components used and version/fix level:
Frontend 1018.0.271
Backend 1018.0.457
Detailed explanation of the problem:
According to the feature described in users guide for 10.18.0 version Cumulocity Cockpit in section global time context, I want to implement the global time context in custom widget.
I tried to find any instructions on how to implement it or any needed parameters in the documentation, but I couldn’t.
Is this possible to implement the global context in a custom widget?
Below is what I did.
I added two widgets to the dashboard - the cumulocity Data points table and a custom one.
I checked the payload of dashboard setup PUT request /inventory/managedObjects/90239 - one was with the “Date selection” parameter set to “Dashboard time range” and the other with the “Date selection” parameter set to “Widget configuration” in the Data points table widget.
“Date selection”: “Dashboard time range”:
{
"c8y_Dashboard": {
"children": {
"5236203416871401": {
"_x": 4,
"_y": 0,
"_width": 2,
"_height": 2,
"config": {
"period": [
"2024-10-16T13:46:00.371Z",
"2024-10-23T13:46:00.371Z"
],
"dateRange": "last_twenty_four_hours",
"dateMode": 0,
"device": {
"id": "60615",
"name": "SPI_SL7"
}
},
"title": "Active alarms widget",
"componentId": "itac.active.alarms.widget",
"id": "5236203416871401",
"classes": {}
},
"569248291745561": {
"_x": 0,
"_y": 0,
"_width": 4,
"_height": 4,
"config": {
"displaySettings": {
"globalTimeContext": true
},
"date": [
"2024-10-22T13:21:19.577Z",
"2024-10-23T13:21:19.577Z"
],
"realtime": false,
"datapoints": [
{
"fragment": "status",
"unit": "",
"color": "#60738a",
"series": "FAILED",
"__active": true,
"__template": null,
"label": "status → FAILED",
"__target": {
"id": "57619",
"name": "AOI_SL7"
}
},
{
"fragment": "status",
"unit": "",
"color": "#d145b6",
"series": "PASSED",
"__active": true,
"__template": null,
"label": "status → PASSED",
"__target": {
"id": "57619",
"name": "AOI_SL7"
}
}
],
"canDecoupleGlobalTimeContext": false,
"dateTo": "2024-10-23T13:21:19.577Z",
"interval": null,
"aggregation": "HOURLY",
"displayDateSelection": false,
"dateFrom": "2024-10-22T13:21:19.577Z",
"widgetInstanceGlobalTimeContext": true,
"selected": {}
},
"title": "Data points table",
"componentId": "Data points table",
"id": "569248291745561",
"classes": {
"card": true,
"card-dashboard": true,
"data-points-table": true,
"dashboard-theme-light": true,
"panel-title-regular": true,
"alerts-overlay": false
},
"templateUrl": "dataPointTable/views/widget.html",
"configTemplateUrl": "dataPointTable/views/widgetConfig.html"
}
},
"widgetClasses": {
"dashboard-theme-light": true,
"panel-title-regular": true
}
},
"id": "90239",
"c8y_Global": {}
}
“Date selection”: “Widget configuration”
{
"c8y_Dashboard": {
"children": {
"5236203416871401": {
"componentId": "itac.active.alarms.widget",
"classes": {
"itac-active-alarms-widget": true,
"dashboard-theme-light": true,
"card-dashboard": true,
"panel-title-regular": true,
"card": true
},
"_x": 4,
"_y": 0,
"id": "5236203416871401",
"title": "Active alarms widget",
"_width": 2,
"config": {
"period": [
"2024-10-16T13:46:28.371Z",
"2024-10-23T13:46:28.371Z"
],
"dateRange": "last_twenty_four_hours",
"dateMode": 0,
"device": {
"name": "SPI_SL7",
"id": "60615"
}
},
"_height": 2
},
"569248291745561": {
"_x": 0,
"_y": 0,
"_width": 4,
"_height": 4,
"config": {
"date": [
"2024-10-22T13:21:19.577Z",
"2024-10-23T13:21:19.577Z"
],
"realtime": false,
"datapoints": [
{
"fragment": "status",
"unit": "",
"color": "#60738a",
"series": "FAILED",
"__active": true,
"__template": null,
"label": "status → FAILED",
"__target": {
"id": "57619",
"name": "AOI_SL7"
}
},
{
"fragment": "status",
"unit": "",
"color": "#d145b6",
"series": "PASSED",
"__active": true,
"__template": null,
"label": "status → PASSED",
"__target": {
"id": "57619",
"name": "AOI_SL7"
}
}
],
"canDecoupleGlobalTimeContext": false,
"dateTo": "2024-10-23T13:21:19.577Z",
"interval": null,
"aggregation": "HOURLY",
"displayDateSelection": false,
"dateFrom": "2024-10-22T13:21:19.577Z",
"widgetInstanceGlobalTimeContext": false,
"selected": {}
},
"title": "Data points table",
"componentId": "Data points table",
"id": "569248291745561",
"classes": {}
}
},
"widgetClasses": {
"dashboard-theme-light": true,
"panel-title-regular": true
}
},
"id": "90239",
"c8y_Global": {}
}
Then I compared the config parameter of cumulocity and custom widgets. I found out my custom widget config doesn’t have those parameters:
canDecoupleGlobalTimeContext: false,
displaySettings: {globalTimeContext: true},
date: ["2024-10-22T13:21:19.577Z", "2024-10-23T13:21:19.577Z"],
displayDateSelection: false,
widgetInstanceGlobalTimeContext: true,
In the custom widget config file, I added a ngOnInit method to setup a config with those parameters:
ngOnInit(): void {
this.config.canDecoupleGlobalTimeContext = false;
this.config.widgetInstanceGlobalTimeContext = true;
this.config.displaySettings = { globalTimeContext: true };
this.config.date = ["2024-10-22T13:21:19.577Z", "2024-10-23T13:21:19.577Z"];
this.config.displayDateSelection = false;
}
As a result, I get the below payload:
{
"c8y_Dashboard": {
"children": {
"5236203416871401": {
"_x": 4,
"_y": 0,
"_width": 2,
"_height": 2,
"config": {
"period": [
"2024-10-16T13:46:00.371Z",
"2024-10-23T13:46:00.371Z"
],
"dateRange": "last_twenty_four_hours",
"dateMode": 0,
"device": {
"id": "60615",
"name": "SPI_SL7"
},
"canDecoupleGlobalTimeContext": false,
"widgetInstanceGlobalTimeContext": true,
"date": [
"2024-10-22T13:21:19.577Z",
"2024-10-23T13:21:19.577Z"
],
"displayDateSelection": false
},
"title": "Active alarms widget",
"componentId": "itac.active.alarms.widget",
"id": "5236203416871401",
"classes": {}
},
"569248291745561": {
"componentId": "Data points table",
"classes": {},
"_x": 0,
"_y": 0,
"id": "569248291745561",
"title": "Data points table",
"_width": 4,
"config": {
"date": [
"2024-10-22T13:21:19.577Z",
"2024-10-23T13:21:19.577Z"
],
"realtime": false,
"datapoints": [
{
"fragment": "status",
"unit": "",
"color": "#60738a",
"series": "FAILED",
"__active": true,
"__template": null,
"label": "status → FAILED",
"__target": {
"id": "57619",
"name": "AOI_SL7"
}
},
{
"fragment": "status",
"unit": "",
"color": "#d145b6",
"series": "PASSED",
"__active": true,
"__template": null,
"label": "status → PASSED",
"__target": {
"id": "57619",
"name": "AOI_SL7"
}
}
],
"canDecoupleGlobalTimeContext": false,
"dateTo": "2024-10-23T13:21:19.577Z",
"interval": null,
"aggregation": "HOURLY",
"displayDateSelection": false,
"dateFrom": "2024-10-22T13:21:19.577Z",
"widgetInstanceGlobalTimeContext": false,
"selected": {}
},
"_height": 4
}
},
"widgetClasses": {
"dashboard-theme-light": true,
"panel-title-regular": true
}
},
"id": "90239",
"c8y_Global": {}
}
displaySettings: {globalTimeContext: true} is missing in this payload, but I investigated that in the Data points table widget config this parameter isn’t always visible.
As a result in the custom widget there is an icon that represents that this widget is sync with the dashboard range.
Also as you can see the dashboard date range is also not visible.
Question related to a free trial, or to a production (customer) instance?
Question related to a production (customer) instance.
