Skip to main content

Initialize Sequential Workflow Editor with JavaScript or TypeScript

In this tutorial we will show you how to initialize the Sequential Workflow Editor with JavaScript or TypeScript.

🚀 Installation

Install the sequential-workflow-editor-model package in your front-end project or your common project for front-end and back-end (check this article):

npm i sequential-workflow-editor-model

Install the sequential-workflow-editor package in your front-end project:

npm i sequential-workflow-editor

🎬 Usage

At the beginning you need to create a model of your workflow for the editor. In this short tutorial let's consider the following workflow:

import { Definition, Step } from 'sequential-workflow-model';

export interface MyDefinition extends Definition {
properties: {
inputs: VariableDefinitions;
};
}

export interface LogStep extends Step {
type: 'log';
componentType: 'task';
properties: {
message: string;
};
}

Now we can create a model for the step:

import { createStepModel, createStringValueModel } from 'sequential-workflow-editor-model';

export const logStepModel = createStepModel<LogStep>('log', 'task', step => {
step.property('message')
.value(
createStringValueModel({
minLength: 1
})
)
.label('Message to log');
});

If your workflow contains global properties you can create a root model:

import { createRootModel, createVariableDefinitionsValueModel } from 'sequential-workflow-editor-model';

export const rootModel = createRootModel<MyDefinition>(root => {
root.property('inputs')
.value(
createVariableDefinitionsValueModel({})
);
);

Now we can create a definition model:

import { createDefinitionModel } from 'sequential-workflow-editor-model';

export const definitionModel = createDefinitionModel<MyDefinition>(model => {
model.valueTypes(['string', 'number']);
model.root(rootModel);
model.steps([logStepModel]);
});

To create an editor provider you need to pass a definition model to the EditorProvider.create method. The provider requires a unique identifier generator. You can use the Uid class from the sequential-workflow-designer package.

import { EditorProvider } from 'sequential-workflow-editor';
import { Uid } from 'sequential-workflow-designer';

export const editorProvider = EditorProvider.create(definitionModel, {
uidGenerator: Uid.next
});

We have everything to attach the editor provider to a designer. For the Sequential Workflow Designer you need to pass the following options:

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

const designer: Designer<MyDefinition> = Designer.create(placeholder, startDefinition, {
editors: {
globalEditorProvider: editorProvider.createRootEditorProvider(),
stepEditorProvider: editorProvider.createStepEditorProvider()
},
validator: {
step: editorProvider.createStepValidator(),
root: editorProvider.createRootValidator()
},
// ...
});

That's it! Check the source code of our demo to see the final code.