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 root 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: {
    rootEditorProvider: 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.