Description

The @workflow-canvas/widget-sdk is a develop tool for Workflow Canvas Widget.

This library facilitates data exchange and control signals between the Workflow Canvas (WFC) and embedded Widgets. It defines a set of exchange topics, data structures, and a messaging bridge for efficient communication and interaction management.

Installation

ES Module

$ npm install --save  @workflow-canvas/widget-sdk

UMD locally

save https://cdn.jsdelivr.net/npm/@workflow-canvas/widget-sdk/dist/workflow-canvas-widget-sdk.umd.js locally

<script src="./workflow-canvas-widget-sdk.umd.js"></script>

UMD from CDN

<script src="https://cdn.jsdelivr.net/npm/@workflow-canvas/widget-sdk"></script>

CLI

If you are creating a widget from scratch, you can use the @workflow-canvas/cli package to easily create widgets.

Usage

ES Module

import { WidgetData, WidgetMessageBridge, WidgetResponseData } from "@workflow-canvas/widget-sdk";

// ---

const bridge = new WidgetMessageBridge({
    dataListener: (widgetData: WidgetData) => {
        console.log(widgetData);
    },
    saveConfirmListener: () => {
        // check data if required
        if (pass) {
            const widgetResponseData: widgetResponseData = {responseFBData: {inputPortDataList: []}};
            bridge.save(widgetResponseData);
        }
    },
    cancelConfirmListener: () => {
        bridge.cancel();
    }
});

// destory when remove the component
briget.destory();

UMD

    <!-- required, initialize WFC_Widget -->
    <script src="./workflow-canvas-widget-sdk.umd.js"></script>
    <!-- required -->
    <script>
        if (!WFCWidget) {
            console.error('WFCWidget is not defined, please include widget sdk file in your project');
        } else {
            const bridge = new WFCWidget.WidgetMessageBridge({
                dataListener: (widgetData) => {
                    console.log(widgetData);
                },
                saveConfirmListener: () => {
                    // check data if required
                    if (pass) {
                        const widgetResponseData = {responseFBData: {inputPortDataList: []}};
                        bridge.save(widgetResponseData);
                    }
                },
                cancelConfirmListener: () => {
                    bridge.cancel();
                }
            });

            // destory when remove the component
            briget.destory();
        }
    </script>