Skip to main content

Initialize Sequential Workflow Editor with React

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

🚀 Installation

You may use the editor with any designer, but in this tutorial we will focus on the Sequential Workflow Designer. At the beginning you need to install the following dependencies:

npm i sequential-workflow-editor-model sequential-workflow-designer sequential-workflow-designer-react sequential-workflow-editor

🎬 Usage

Check the below code snippet to see how to initialize the editor with React.

To create the endpointDefinitionModel model check the tutorial for JS or TS.

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

const [definition, setDefinition] = useState(() => wrapDefinition(startDefinition));

const editor = useMemo(() => {
const editorProvider = EditorProvider.create<EndpointDefinition>(endpointDefinitionModel, {
uidGenerator: Uid.next
});
return {
rootEditor: editorProvider.createRootEditorProvider(),
stepEditor: editorProvider.createStepEditorProvider(),
rootValidator: editorProvider.createRootValidator(),
stepValidator: editorProvider.createStepValidator(),
stepLabelProvider: editorProvider.createStepLabelProvider(),
toolboxGroups: editorProvider.getToolboxGroups()
};
}, []);

return (
<SequentialWorkflowDesigner
definition={definition}
rootEditor={editor.rootEditor}
stepEditor={editor.stepEditor}
validatorConfiguration={{
root: editor.rootValidator,
step: editor.stepValidator
}}
controlBar={true}
stepsConfiguration={{}}
onDefinitionChange={setDefinition}
toolboxConfiguration={{
groups: editor.toolboxGroups,
labelProvider: editor.stepLabelProvider
}}
/>
);

That's it! Now you can use the editor in your React application.