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!