Logic and State

To define the widget state and functionality is necessary to define a JavaScript class that extends BaseGraphicWgt. For example, let examine the class of the example widget MyWidget in src/examples/MyWidget/MyWidget.ts:

import { BaseGraphicWgt, Value } from "corvina";
import { widgetType } from "./defs";

export default class MyWidget extends BaseGraphicWgt {
  message: string;
  linkableProp: Value<string>;

  constructor( args ) {
    super( args );
    this.type = widgetType;                 // Here we set type of the widget
    this.message = args.initState.message; 
    this.linkableProp = new Value( args.initState.linkableProp );
  }

  serialize() {
    let serializedWgt = super.serialize();
    serializedWgt.message = this.message;
    serializedWgt.linkableProp = this.linkableProp.unwrap();
    return serializedWgt;
  }
}

Inside the widget class are defined all the widget properties necessary to render the widget and run the logic.

  // message is simple widget property
  message: string;
  // linkableProp can be linked to other widgets
  linkableProp: Value<string>;

There are two types of properties:

• simple: property that can be configured using Property Panel but not linked to data
• linkable: property that can be connected to data or other widget properties

In order to define a linkable property, we use the class Value. Value is a wrapper around real property value and it is used by the system to manage property connected to data or other widget properties via datalinks.

caution

A property attachable to data or widgets properties have to be defined using the class Value.

The widget class must implement these two functions:

• constructor(args): initializes the state starting from widget serialization
• serialize(): returns a JSON object that represents the widget serialization

Constructor

The constructor initializes the widget state using the widget serialization.

info

The widget serialization is a JSON object that contains all the information about the widget state. When we open a dashboard Corvina initializes every widget passing the widget serialization.

The constructor has the parameter args that contains the widget serialization and other information about the widget. The args object has the following structure:

interface IWgtConstructorParams {
  id: string;           // System generated widget id
  name: string;         // User defined widget name/id
  class: string;        // JavaScript Widget type
  type: string;         // Widget type
  parent?: any;         // Parent widget reference
  initState?: any;      // Widget serialization
  page?: any;           // Page reference
  isLoading?: boolean;  // Widget is being constructed during dashboard loading
  preview?: boolean;    // Widget is being constructed to provide a preview mode during layout moving
}

The widget serialization is saved in the property initState. Simple property can be initialized directly from the widget initState, linkable property must be initialized using the function new Value().

    this.message = args.initState.message; 
    this.linkableProp = new Value( args.initState.linkableProp );

info

You can get the wrapper value of a Value object using the function unwrap().

    this.linkableProp.unwrap();

Serialization

In dashboard editor every time a widget is modified the system calls the function serialize of every widget. Simple property can be serialized directly, linkable property must be unwrapped using the Value function unwrap().

  serialize() {
    let serializedWgt = super.serialize();                   // You must call super.serialize()
    serializedWgt.message = this.message;                    // Simple property can ber serialized directly
    serializedWgt.linkableProp = this.linkableProp.unwrap(); // Linkable property must be unwrapped
    return serializedWgt;                                    // Serialized object must be returned
  }
}