Awesome

Sequential Workflow Editor

Powerful workflow editor builder for sequential workflows. Written in TypeScript. Mainly designed to work with the Sequential Workflow Designer component. To execute your model you may use the Sequential Workflow Machine or any other workflow engine. It supports front-end and back-end strict validation of the model. 0 external dependencies.

📝 Check the documentation for more details.

🤩 Don't miss the pro version.

👀 Examples

• 🛠 Playground
• 📖 Editors
• 🎯 Placement Restrictions
• 🚩 Internationalization
• 🚢 Vanilla JS

Pro:

• 📖 Pro Editors

🚀 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.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.

💡 License

This project is released under the MIT license.