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.