Sequential Workflow Designer Events

The Sequential Workflow Designer provides a number of events that can be used to handle various workflow designer actions.

OnReady

The onReady event is triggered when the designer is ready to be used and fully initialized.

// JS or TS, Angular
designer.onReady.subscribe(() => {
  // ...
});

This event is not available in React package, because the designer is ready to be used when the component is mounted.

OnDefinitionChanged

The onDefinitionChanged event is triggered when the workflow definition is changed.

For JS/TS and Angular, the event payload is a DefinitionChangedEvent object:

export interface DefinitionChangedEvent {
  definition: Definition;
  changeType: DefinitionChangeType;
  stepId: string | null;
  duplicatedStepIds?: DuplicatedStepId[];
}

// JS or TS, Angular
designer.onDefinitionChanged.subscribe((event) => {
  const definition = event.definition;
  // ...
});

// React
<SequentialWorkflowDesigner
  onDefinitionChange={(newDefinition) => { /* ... */ }}
  ... />

OnRootComponentUpdated

The onRootComponentUpdated event is triggered when the root component and all its children are rerendered.

For JS/TS this event is exposed by the Designer class as:

designer.onRootComponentUpdated.subscribe(() => {
  // ...
});

OnPreferencesChanged

The onPreferencesChanged event is triggered when any of the designer preferences has changed.

For JS/TS this event is exposed by the Designer class as:

export interface PreferenceChange {
  key: string;
  value: string;
}

export interface PreferencesChangedEvent {
  stepId: string;
  changes: PreferenceChange[];
}

// JS or TS
designer.onPreferencesChanged.subscribe((event) => {
  const { stepId, changes } = event;
  // ...
});

OnSelectedStepIdChanged

The onSelectedStepIdChanged event is triggered when the selected step is changed. The event handler receives the new selected step ID or null if no step is selected.

// JS or TS
designer.onSelectedStepIdChanged.subscribe((stepIdOrNull) => {
  // ...
});

// React
<SequentialWorkflowDesigner
  onSelectedStepIdChanged={(stepIdOrNull) => { /* ... */ }}
  ... />

OnIsToolboxCollapsedChanged

The onIsToolboxCollapsedChanged event is triggered when the toolbox is collapsed or expanded.

// JS or TS, Angular
designer.onIsToolboxCollapsedChanged.subscribe((isCollapsed) => {
  // ...
});

This event is not available in React package yet.

OnIsEditorCollapsedChanged

The onIsEditorCollapsedChanged event is triggered when the editor is collapsed or expanded.

// JS or TS, Angular
designer.onIsEditorCollapsedChanged.subscribe((isCollapsed) => {
  // ...
});

This event is not available in React package yet.