Skip to main content

Template

This SDK contains some templates for corvina widgets. Let see how the default template is structured. You can find it in src/examples/MyWidget folder. The code manages:

  • widget runtime rendering and logic
  • widget configuration with Dashboard Editor

The files that manage the widget runtime are:

  • MyWidget.ts: manages widget state and the logic
  • MyWidget.vue: manages widget graphical representation
  • defs.ts: contains the common definition like widget type.
note

Widget type is a string that identifies the widget. It is used to identify the widget in the widget Gallery and in the widget configuration.

Widget can be configured using the Property Panel. The files that manage the widget configuration are:

  • MyWidgetPropsHandler.ts: defines which widget properties are editable in Property Panel and linkable to data
  • MyWidgetGallery.ts: contains the widget serialization used in widget Gallery.

Register a widget to Corvina​

We need to register the widget to Corvina to see it in the widget Gallery. The registration is done in src/main.ts file, where we need to import all previous files and register the widget to Corvina Cloud with function registerWidget.

import MyWidget from "./examples/MyWidget/MyWidget";
import MyWidgetVue from "./examples/MyWidget/MyWidget.vue";
import { myWidgetGallery } from "./examples/MyWidget/MyWidgetGallery";
import { widgetType as MyWidgetType } from "./examples/MyWidget/defs";

// Registering widget
const iconMyWidget = require( "./resources/images/corvina-widget1.png" ); // example of widget icon
registerWidget({
  type: MyWidgetType,                           // Widget type
  class: MyWidget,                              // Widget state and logic
  component: MyWidgetVue,                       // Widget rendering
  gfx: myWidgetGallery.getDefaultConfiguration, // Widget default serializtion
  props: myWidgetGallery.getPropsHandler(),     // Widget property panel configuration
  icon: adjustPath( iconMyWidget ),             // Widget icon shown in widget Gallery
  category: "MyGallery"                         // Widget category shown in widget Gallery
}, manifest);                                   // Manifest is the SDK manifest
caution

If the widget type is not defined in the manifest file an error message will show up.

Let see the registerWidget parameters:

  • type: must be the same of component name and widget class
  • class: references to the main class containing the widget logic
  • component: references to graphical widget component
  • gfx: references to the function that returns the widget serialization for gallery
  • props: the properties handler
  • icon: the widget icon
  • manifest: manifest file containing all the required deploy information