How to fix the default size of a widget deployed on cumulocity

,
1

What product/components do you use and which version/fix level are you on?

Cumulocity

Is your question related to the free trial, or to a production (customer) instance?

Free Trial

What are you trying to achieve? Please describe it in detail.

Hi, I have created a widget and deployed it on cumulocity as a web app. Now I know that you have to add a widget and initially it has a default size, but you have to resize it according to your needs. I want to know that if I can keep a default height and width of that widget so that whenever we add that widget into our dashboard, we don’t have to resize it. Please let me know what changes I need to make for the same, also point out to any docs if any.
Thank you in advance.

2

Hi Samanyu,

You can specify some widgetDefaults when registering the widget:

{
  id: 'acme.text.widget',
  label: 'Text widget',
  description: 'Can display a text',
  component: WidgetDemo,
  configComponent: WidgetConfigDemo,
  data: {
    settings: {
      noNewWidgets: false,
      widgetDefaults: {
        _width: 4,
        _height: 4
      },
      ng1: {
        options: {
          noDeviceTarget: true,
          groupsSelectable: false
        }
      }
    }
  }
}

The values for _width and _height are used for the grid layout of the dashboard.

3

Hi Tristan,

Thank you for your response.
Can you please also mention the doc where you got the info for this, just for future reference.

Also, when I am not providing the widget defaults, my widget starts from the corner and I can resize it by dragging and it is responsive.
Code:

{ 
          id: 'custom-widget.widget', 
          label: 'Custom Device Info Widget', 
          description: 'This is a sample widget', 
          component: CustomWidgetComponent, 
          configComponent: CustomWidgetConfigDemo,
          data: { 
            settings: { 
                noNewWidgets: false,
                ng1: { 
                    options: { 
                        noDeviceTarget: true, groupsSelectable: false, 
                    },

image
image1920×1080 170 KB

Similarly, if I am trying to add the defaults it is showing like this. Despite of adding the width it is not increasing its width from left side.
Code:

{ 
          id: 'custom-widget.widget', 
          label: 'Custom Device Info Widget', 
          description: 'This is a sample widget', 
          component: CustomWidgetComponent, 
          configComponent: CustomWidgetConfigDemo,
          data: { 
            settings: { 
                noNewWidgets: false,
                 widgetDefaults: {
                     _width: 1000,
                     _height: 5
                   },
                ng1: { 
                    options: { 
                        noDeviceTarget: true, groupsSelectable: false, 
                    },

image
image1920×1080 181 KB

Also sometimes when I provide the height of 5 it has extra space below as you can see in the above image but when I provide anything below 5 it shrinks like this:

Code:

{ 
          id: 'custom-widget.widget', 
          label: 'Custom Device Info Widget', 
          description: 'This is a sample widget', 
          component: CustomWidgetComponent, 
          configComponent: CustomWidgetConfigDemo,
          data: { 
            settings: { 
                noNewWidgets: false,
                 widgetDefaults: {
                     _width: 1000,
                     _height: 5
                   },
                ng1: { 
                    options: { 
                        noDeviceTarget: true, groupsSelectable: false, 
                    },

image
image1920×1080 162 KB

Can you please let me know what could be the potential issue here.

Best Regards,
Samanyu