Dive into Widget SDK

A Widget can be developed quickly and easily through the Widget SDK.

Before reading this section, you should have a basic understanding of Concepts.


Composition

  1. Data models

    Data models include datasheets, records, and fields, which are all basic concepts in spreadsheet.

  2. UI components

    These convenient UI components include Filter, Field Picker, FieldValue, and more.

  3. React Hooks

    Widget Sdk provide about 20 useful hooks like useRecord. You can view more details from the following directory.

/packages/widget-sdk/src/hooks


Data flow

We use a dual caching architecture where the Main App and Widgets share data to reduce data requests and ensure consistency between the main application and the widgets.



flowchart TD
    A[Action] --> B(Dispatch)
    B --> |redux middleware|K(Dispatch Proxy)
    D -->|user input| A
    B --> C{ Main Store}
    K --> E{ Widgets A Store}
    K --> F{ Widgets... Store}
    C -->|reconsile| D[View]
    E -->|reconsile| G[Widget A]
    F -->|reconsile| I[Widget ...]


However, the widget can be loaded independently and has full functionality such as fetching datasheet, which does not mean that the widget is dependent on other modules.



Communication


Each Widgets is wrapped by a Widget Provider, which includes basic information about the widget, such as its interaction state, like whether it is expanded. The Main App communicates with the Widget through postMessage.

Inside the widget, like other hooks, you can use hooks like useActiveViewId

Widgets communicate with the Main App through an Event Emitter. If it is nested in an iframe, the EventEmitter will communicate through postMessage. Widgets and the Main App have agreed upon a communication protocol. for example message WIDGET_SYNC_COMMAND WIDGET_FETCH_DATASHEET MAIN_SYNC_ACTION



Loading Strategy

Widgets can only be developed using React and must be independently packaged and released to the cloud. In order to reduce loading speed, the widget SDK, icons, and components that the widget depends on are treated as external dependencies and are not packaged in each widget. Therefore, the widgets share the same components, widget SDK, and icons modules as the main app. LoadJS is a tiny async loader for modern browsers, widgets are loaded by LoadJS.


Storage

In order to storage data for each widgets, useCloudStorage is provided,

Actually, when calling useCloudStorage, a SetGlobalStorage command is sent directly, which requires passing Key, Value, and Widget Id as arguments.


cmdExecute({
    cmd: CollaCommandName.SetGlobalStorage,
    key,
    value,
    resourceType: ResourceType.Widget,
    resourceId: this.widgetId,
  },