Skip to main content

Initialize Sequential Workflow Designer with JavaScript or TypeScript

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

Examples

Check our online examples.

🚀 Installation

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

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);

CDN

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

<head>
...
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.17.0/css/designer.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.17.0/css/designer-light.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.17.0/css/designer-dark.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.17.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',
// root properties...
},
sequence: [
// 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`;
},

isDraggable: (step, parentSequence) => {
return step.name !== 'y';
},
isDeletable: (step, parentSequence) => {
return step.properties['isDeletable'];
},
isDuplicable: (step, parentSequence) => {
return true;
},
canInsertStep: (step, targetSequence, targetIndex) => {
return targetSequence.length < 5;
},
canMoveStep: (sourceSequence, step, targetSequence, targetIndex) => {
return !step.properties['isLocked'];
},
canDeleteStep: (step, parentSequence) => {
return step.name !== 'x';
}
},

validator: {
// all validators are optional

step: (step, parentSequence, definition) => {
return /^[a-z]+$/.test(step.name);
},
root: (definition) => {
return definition.properties['memory'] > 256;
}
},

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

editors: {
isCollapsed: false,
rootEditorProvider: (definition, rootContext, isReadonly) => {
const editor = document.createElement('div');
// ...
return editor;
},
stepEditorProvider: (step, stepContext, definition, isReadonly) => {
const editor = document.createElement('div');
// ...
return editor;
}
},

controlBar: true,
contextMenu: 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,
contextMenu: false,
// ...
}

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