Skip to main content

Gallery

Once a widget is registered it will be available in the widget gallery.

It is necessary to define the widget gallery configuration extending the class BaseGallery. Let see the example of the widget MyWidget in src/examples/MyWidget/MyWidgetGallery.ts.

In this file is necessary to:

  • implement getDefaultConfiguration to provide the widget default serialization used when a widget is dropped from gallery
  • initialize the properties handlers in the constructor

import { BaseGallery } from 'corvina';
import MyWidgetPropsHandler from './MyWidgetPropsHandler';

class MyWidgetGallery extends BaseGallery {

constructor() {
super();
this.propsHandler = new MyWidgetPropsHandler();
}

getDefaultConfiguration() {
return {
"id": "MyWidget",
"type": "MyWidget",
"class": "MyWidget",
"message": "Hello World",
"linkableProp": 0,
"width": 140,
"height": 40,
"x": 0,
"y": 0,
"cx": 70,
"cy": 20,
}
}
}
export const myWgtGallery = new MyWidgetGallery();

Let see the widget serialization:

  • id: the id of the widget (this will be automatically replaced when the widget is dropped onto the dashboard with a unique one)
  • type: must be the same as the component name and widget class
  • class: must be the same as the component name and widget class
  • message: this is the default value for these widget properties
  • linkableProp: this is the default value for these widget properties
  • width: default width (it will recalculate when the widget is added to the dashboard according to the layout)
  • height: default height (it will recalculate when the widget is added to the dashboard according to the layout)
  • x: default x position (it will recalculate when the widget is added to the dashboard according to the layout)
  • y: default y position (it will recalculate when the widget is added to the dashboard according to the layout)
  • cx: default center over x-axis (it will recalculate when the widget is added to the dashboard) according to the layout)
  • cy: default center over y-axis (it will recalculate when the widget is added to the dashboard according to the layout)