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.