Skip to main content

Initialize with JavaScript or TypeScript

The designer is written in TypeScript but you may use it for vanilla JavaScript applications as well.

🚀 Installation​

To use the designer you should add JS/TS files and CSS files to your project.

Install by NPM​

Install this package by NPM command:

npm i sequential-workflow-designer

To import the package:

import { Designer } from 'sequential-workflow-designer';

If you use css-loader or similar, you can add CSS files to your bundle:

import 'sequential-workflow-designer/css/designer.css';
import 'sequential-workflow-designer/css/designer-light.css';
import 'sequential-workflow-designer/css/designer-dark.css';

To create the designer write the below code:

// ...
Designer.create(placeholder, definition, configuration);

Install by CDN​

Add the below code to your head section in HTML document.

<head>
...
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.6.0/css/designer.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.6.0/css/designer-light.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.6.0/css/designer-dark.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.6.0/dist/index.umd.js"></script>

Call the designer by:

sequentialWorkflowDesigner.Designer.create(placeholder, definition, configuration);

🎬 How to Use​

The below code shows how to create an instance of the designer. Be sure that the passed placeholder is attached to the DOM.

import { Designer } from 'sequential-workflow-designer';

const placeholder = document.getElementById('placeholder');

const definition = {
  properties: {
    'myProperty': 'my-value',
    // global properties...
  },
  sequence: [
    // root steps...
  ]
};

const configuration = {
  theme: 'light', // optional, default: 'light'
  isReadonly: false, // optional, default: false
  undoStackSize: 10, // optional, default: 0 - disabled, 1+ - enabled

  steps: {
    // all properties in this section are optional

    iconUrlProvider: (componentType, type) => {
      return `icon-${componentType}-${type}.svg`;
    },
    validator: (step, sourceSequence) => {
      return /^[a-z]+$/.test(step.name);
    },
    isDraggable: (step, parentSequence) => {
      return step.name !== 'y';
    },
    isDeletable: (step, parentSequence) => {
      return step.properties['isDeletable'];
    },
    canInsertStep: (step, targetSequence, targetIndex) => {
      return targetSequence.length < 5;
    },
    canMoveStep: (sourceSequence, step, targetSequence, targetIndex) => {
      return !step.properties['isLocked'];
    },
    canDeleteStep: (step, parentSequence) => {
      return step.name !== 'x';
    }
  },

  toolbox: {
    groups: [
      {
        name: 'Files',
        steps: [
          // steps for the toolbox's group
        ]
      },
      {
        name: 'Notification',
        steps: [
          // steps for the toolbox's group
        ]
      }
    ]
  },

  editors: {
    globalEditorProvider: (definition, globalContext) => {
      const editor = document.createElement('div');
      // ...
      return editor;
    },
    stepEditorProvider: (step, stepContext) => {
      const editor = document.createElement('div');
      // ...
      return editor;
    }
  },

  controlBar: true,
};

const designer = Designer.create(placeholder, definition, configuration);
designer.onDefinitionChanged.subscribe((newDefinition) => {
  // ...
});

You can hide default UI components by setting the corresponding configuration property to false.

const configuration = {
  toolbox: false,
  editors: false,
  controlBar: false,
  // ...
}

We prepared multiple examples how to use the designer. Check them in the examples directory.