Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Powerful workflow editor builder for any workflow designer. Check outhttps://nocode-js.com

License

NotificationsYou must be signed in to change notification settings

nocode-js/sequential-workflow-editor

Repository files navigation

Sequential Workflow Editor

Sequential Workflow Editor

Build StatusLicense: MITView this project on NPM

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

📝 Check thedocumentation for more details.

🤩 Don't missthe pro version.

👀 Examples

Pro:

🚀 Installation

Install thesequential-workflow-editor-model package in your front-end project or your common project for front-end and back-end (checkthis article):

npm i sequential-workflow-editor-model

Install thesequential-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';exportinterfaceMyDefinitionextendsDefinition{properties:{inputs:VariableDefinitions;};}exportinterfaceLogStepextendsStep{type:'log';componentType:'task';properties:{message:string;};}

Now we can create a model for the step:

import{createStepModel,createStringValueModel}from'sequential-workflow-editor-model';exportconstlogStepModel=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';exportconstrootModel=createRootModel<MyDefinition>(root=>{root.property('inputs').value(createVariableDefinitionsValueModel({})););

Now we can create a definition model:

import{createDefinitionModel}from'sequential-workflow-editor-model';exportconstdefinitionModel=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 theEditorProvider.create method. The provider requires a unique identifier generator. You can use theUid class from thesequential-workflow-designer package.

import{EditorProvider}from'sequential-workflow-editor';import{Uid}from'sequential-workflow-designer';exportconsteditorProvider=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';constdesigner=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 ofour demo to see the final code.

💡 License

This project is released under the MIT license.

[8]ページ先頭
©2009-2025 Movatter.jp