Cumulocity - Custom widget configuration

Question

I'm writing a chart widget in cumulocity platform. In widget comes with the platform, I can select data point after I select device:

But the widget I wrote can only select device, there is no data point option for me to select:

I know there is c8yComponentsProvider that has options for me to select if I want device target or not. Is there a way for me to choose what data point I want?

score 2 · Answer 1 · answered Dec 19 '19 at 13:57

From angular 2 it has to be done in this way.

In my custom widget project I added to the usedValue secion of app.module.ts as follows.

useValue: {
    id: 'acme.text.widget', // 3.
    label: 'Text widget',
    description: 'Can display a text',
    component: WidgetDemo, // 4.
    configComponent: WidgetConfigDemo,
    data: {
        ng1: {
            options: {
                noDeviceTarget: true
            }
        }
    }
}

Jan Hommes · Accepted Answer · 2018-01-29T09:42:08.110

1

You can disable the device selector in the options of the c8yComponentsProvider:

options: {
  noDeviceTarget: true
}

And then use the following directive in your widget config html:

<c8y-data-point-list datapoints="data.datapoints"></c8y-data-point-list>

You need to set the data points to choose in the data.datapoints object on the widget configuration controller. Therefore you can search for managed objects with the fragment c8y_DataPoint.

In the document is an example how to do that with the c8yInventory service:

var filters = {fragmentType: 'c8y_DataPoint', withParents: true};
$scope.data = {};
c8yInventory.list(filters).then(function (devices) {
  $scope.data.datapoints = [];
  _.forEach(devices, function(dp) {
    $scope.data.datapoints.push(dp);
  });
});

Note that the c8y-data-point-list is a nonofficial directive. If you face any problems or you want a specific look, you might be faster by writing your own directive.

edited Jan 29 '18 at 09:42

answered Jan 25 '18 at 09:55

Jan Hommes

5,122
4
33
45

I can show the data point option in my browser now. But is there a way to get what datapoint the user select? With `c8yInventory.list` i can get all the datapoint, but i still don't know what data the user select. – WahahaXDD Jan 26 '18 at 04:15
If you use the `c8y-data-point-list` a property called __active should be set on each datapoint which the user activates. – Jan Hommes Jan 26 '18 at 08:48
i didn't see any __active property on the selected datapoint. is there a function i have to call to get this property? – WahahaXDD Jan 28 '18 at 05:43
I checked it twice and if you use `c8y-data-point-list` the directive adds a `__active` flag to show that it is used. Can you pls verify by adding a watcher on `scope.data.datapoints` and toggle the datapoints in/out? Otherwise pls open a new question with details and link it here. – Jan Hommes Jan 29 '18 at 09:41
@WahahaXDDI am facing the same issue I am unable to find which all data points that are selected. Where you able to fix the issue? – rajmohan May 17 '18 at 13:56
@WahahaXDDI how to access the save button in my controller? Could you please help. – rajmohan Jun 07 '18 at 09:07

Cumulocity - Custom widget configuration

2 Answers2