Initialize Sequential Workflow Editor with Angular

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

🚀 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-model sequential-workflow-editor-model sequential-workflow-editor sequential-workflow-designer sequential-workflow-designer-angular

🎬 Usage

At the beginning you need to import the SequentialWorkflowDesignerModule:

import { SequentialWorkflowDesignerModule } from 'sequential-workflow-designer-angular';

@NgModule({
  imports: [
    SequentialWorkflowDesignerModule,
    // ...
  ],
  // ...
})
export class AppModule {}

Now you may create your endpoint definition model. You can use the tutorial for JS or TS to see how to create the model.

import { createDefinitionModel } from 'sequential-workflow-editor-model';

export const definitionModel = createDefinitionModel((model) => { /* ... */ });

Next, in your component you need to create a few properties:

import { Definition } from 'sequential-workflow-model';
import { StepsConfiguration, ToolboxConfiguration, ValidatorConfiguration, StepEditorProvider, RootEditorProvider } from 'sequential-workflow-designer';

export class AppComponent {
  public definition: Definition = /* ... */;
  public stepsConfiguration: StepsConfiguration = {};
  public toolboxConfiguration?: ToolboxConfiguration;
  public validatorConfiguration?: ValidatorConfiguration;
  public stepEditorProvider?: StepEditorProvider;
  public rootEditorProvider?: RootEditorProvider;
  // ...

Now you can initialize the editor by creating the editor provider and setting the configuration properties:

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

public ngOnInit() {
  const editorProvider = EditorProvider.create(definitionModel, {
    uidGenerator: Uid.next
  });
  this.stepEditorProvider = editorProvider.createStepEditorProvider();
  this.rootEditorProvider = editorProvider.createRootEditorProvider();
  this.validatorConfiguration = {
    root: editorProvider.createRootValidator(),
    step: editorProvider.createStepValidator()
  };
  this.toolboxConfiguration = {
    groups: editorProvider.getToolboxGroups()
  };
}

Additionally, you may want to subscribe to the onReady and onDefinitionChanged events:

public onDesignerReady(designer: Designer) {
  this.designer = designer;
}

public onDefinitionChanged(definition: Definition) {
  this.definition = definition;
}

Now you can use the editor in your template:

<sqd-designer
  theme="light"
  [definition]="definition"
  [toolboxConfiguration]="toolboxConfiguration"
  [stepsConfiguration]="stepsConfiguration"
  [validatorConfiguration]="validatorConfiguration"
  [controlBar]="true"
  [areEditorsHidden]="false"
  [rootEditor]="rootEditorProvider"
  [stepEditor]="stepEditorProvider"
  (onReady)="onDesignerReady($event)"
  (onDefinitionChanged)="onDefinitionChanged($event)"
>
</sqd-designer>

That's it!