How to get group and device config object in to our custom widgets?

,
1

Product/components used and version/fix level:

Cumulocity Production

Detailed explanation of the problem:

We are using a custom cockpit application which has two widgets one widget will be added under Group level one widget will be added under device level.

I would like to get the group details(Id, name) and device details(Id, name) in my component. I found one option as @Input() config: any = {}; but I am able to access the config object only in config component. In my case I don’t want to use config component. this is my module. Is there any way to get the device and group details directly in widget ?

Error messages / full error message screenshot / log file:

image
image820×650 32.4 KB

Regards
Mohan

2

Hi Mohan,

in your widget configuration you need to set noDeviceTarget to false and grousSelectable to true:

data: {
  settings: {
    noNewWidgets: false,
    ng1: {
      options: {
        noDeviceTarget: false,
        groupsSelectable: true,
      },
    },
  },
}

This enables the device/group selector for your widget, if you add it to a dashboard. The group/device selected will be written to the config object and automatically provided to your component. To get the config in your component you can define following member variable in your component:

@Input() config: { device: { id: string } };

Only the name and id are stored in the config. It will also be stored in the device object, doesn’t matter if it is a group or a device

best regards
Christian

3

I have updated module as per your comment now module looks like below

useValue: [{
            id: 'pool-wise-calibration-data.widget',
            label: 'Calibration Results',
            description: 'Pool Wise Calibration Results',
            component: PoolWiseCalibrationDataComponent,
            previewImage: require("./assets/images/calibration-preview.png"),
            data: {
                settings: {
                    noNewWidgets: false,
                    ng1: {
                        options: {
                            noDeviceTarget: false,
                            groupsSelectable: true,
                        },
                    },
                },
            } as ContextWidgetConfig,
        }

I am accessing config object in my component as below

  @Input() config: { device: { id: string, name: string } };
  ngOnInit(): void {
      this.id = this.config.device.id;
      this.name = this.config.device.name;
}

I am getting response config as empty object

Regards
Mohan

4

Looks good to me. Not sure why the config isn’t available in your component.

On which version are you running? Is it a cloned Cockpit application?
Does the device/group selection work properly after you have changed the configuration for your widget?

Maybe some caching issue? Can you clear your cache and try again.

best regards
Christian

1 Like
5

It was a cache issue, by the way I need to remove and add the widget again to see the changes.