Skip to main content

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!