NoCode JS

https://nocode-js.com/docs
Admin
A collection of workflow and process automation tools including Sequential Workflow Designer,...
Tokens:32,922
Snippets:525
Trust Score:7.3
Update:4 months ago
Show doc for...
Tokens:
Raw
### Install Designer Packages

Source: https://nocode-js.com/docs/sequential-workflow-designer/initialize-with-react

Install the core designer and the React-specific package using NPM.

```bash
npm i sequential-workflow-designer sequential-workflow-designer-react
```

--------------------------------

### Install Sequential Workflow Packages

Source: https://nocode-js.com/docs/sequential-workflow-machine/initialize-with-javascript-or-typescript

Install the necessary packages for sequential workflow modeling and machine execution using NPM.

```bash
npm i sequential-workflow-model sequential-workflow-machine  

```

--------------------------------

### Install Dependencies

Source: https://nocode-js.com/docs/sequential-workflow-editor/initialize-with-angular

Install the necessary packages for the Sequential Workflow Editor and its Angular integration.

```bash
npm i sequential-workflow-model sequential-workflow-editor-model sequential-workflow-editor sequential-workflow-designer sequential-workflow-designer-angular  

```

--------------------------------

### JavaScript Example for Step and Global Editors

Source: https://nocode-js.com/docs/sequential-workflow-designer/editors

Provides a basic JavaScript example demonstrating how to configure step and global editors. It shows how to create input elements and listen for changes to update step properties and notify the designer.

```javascript
const configuration = {
  editors: {
    stepEditorProvider: (
      step: Step,
      context: StepEditorContext,
      isReadonly: boolean)
    => {
      const root = document.createElement('div');
      const nameInput = document.createElement('input');
      nameInput.value = step.name;
      nameInput.addEventListener('input', () => {
        step.name = nameInput.value;
        context.notifyNameChanged();
      });
      root.appendChild(nameInput);
      // ...
      return root;
    },
    globalEditorProvider: (
      definition: Definition,
      context: GlobalEditorContext,
      definition: Definition,
      isReadonly: boolean)
    => {
      // ...
    }
  },
  // ...
};
```

--------------------------------

### Example Step Object

Source: https://nocode-js.com/docs/sequential-workflow-designer/features/step-icons

An example of a step object with componentType and type fields, which determine the step's icon.

```javascript
const step = {
    componentType: 'task',
    type: 'someType',
    // ...
};
```

--------------------------------

### Install Workflow Editor Package

Source: https://nocode-js.com/docs/sequential-workflow-editor/initialize-with-javascript-or-typescript

Install the sequential-workflow-editor package using npm. This is required for your front-end project.

```bash
npm i sequential-workflow-editor  

```

--------------------------------

### Full Designer Initialization Example

Source: https://nocode-js.com/docs/sequential-workflow-designer/initialize-with-javascript-or-typescript

Demonstrates creating a designer instance with a placeholder, definition, and a comprehensive configuration object including step, validator, toolbox, and editor settings.

```typescript
import { Designer } from 'sequential-workflow-designer';

const placeholder = document.getElementById('placeholder');

const definition = {
  properties: {
    'myProperty': 'my-value',
    // root properties...
  },
  sequence: [
    // steps...
  ]
};

const configuration = {
  theme: 'light', // optional, default: 'light'
  isReadonly: false, // optional, default: false
  undoStackSize: 10, // optional, default: 0 - disabled, 1+ - enabled

  steps: {
    // all properties in this section are optional

    iconUrlProvider: (componentType, type) => {
      return `icon-${componentType}-${type}.svg`;
    },

    isDraggable: (step, parentSequence) => {
      return step.name !== 'y';
    },
    isDeletable: (step, parentSequence) => {
      return step.properties['isDeletable'];
    },
    isDuplicable: (step, parentSequence) => {
        return true;
    },
    canInsertStep: (step, targetSequence, targetIndex) => {
      return targetSequence.length < 5;
    },
    canMoveStep: (sourceSequence, step, targetSequence, targetIndex) => {
      return !step.properties['isLocked'];
    },
    canDeleteStep: (step, parentSequence) => {
      return step.name !== 'x';
    }
  },

  validator: {
    // all validators are optional

    step: (step, parentSequence, definition) => {
      return /^[a-z]+$/.test(step.name);
    },
    root: (definition) => {
      return definition.properties['memory'] > 256;
    }
  },

  toolbox: {
    isCollapsed: false,
    groups: [
      {
        name: 'Files',
        steps: [
          // steps for the toolbox's group
        ]
      },
      {
        name: 'Notification',
        steps: [
          // steps for the toolbox's group
        ]
      }
    ]
  },

  editors: {
    isCollapsed: false,
    rootEditorProvider: (definition, rootContext, isReadonly) => {
      const editor = document.createElement('div');
      // ...
      return editor;
    },
    stepEditorProvider: (step, stepContext, definition, isReadonly) => {
      const editor = document.createElement('div');
      // ...
      return editor;
    }
  },

  controlBar: true,
  contextMenu: true,
};

const designer = Designer.create(placeholder, definition, configuration);
designer.onDefinitionChanged.subscribe((event) => {
  const definition = event.definition;
  // ...
});

```

--------------------------------

### Setting the Theme in Configuration

Source: https://nocode-js.com/docs/sequential-workflow-designer/features/themes

Set the 'theme' property in the start configuration to switch between 'light' and 'dark' themes. Defaults to 'light'.

```javascript
const configuration = {
    theme: 'light',
    // ...
};
```

--------------------------------

### Install Workflow Model Package

Source: https://nocode-js.com/docs/sequential-workflow-editor/initialize-with-javascript-or-typescript

Install the sequential-workflow-editor-model package using npm. This is required for your front-end or common project.

```bash
npm i sequential-workflow-editor-model  

```

--------------------------------

### Install Sequential Workflow Editor Dependencies

Source: https://nocode-js.com/docs/sequential-workflow-editor/initialize-with-react

Install the necessary packages for the Sequential Workflow Editor, designer, and React integration using npm.

```bash
npm i sequential-workflow-editor-model sequential-workflow-designer sequential-workflow-designer-react sequential-workflow-editor  

```

--------------------------------

### Install Sequential Workflow Editor Pro Dependencies

Source: https://nocode-js.com/docs/sequential-workflow-editor/initialize-pro

Install the core editor package and the Pro model and Pro packages using npm. Ensure you have the correct registry configured in your .npmrc file.

```bash
npm i sequential-workflow-editor  
npm i @nocode-js/sequential-workflow-editor-model-pro  
npm i @nocode-js/sequential-workflow-editor-pro  

```

--------------------------------

### Install Sequential Workflow Designer Pro

Source: https://nocode-js.com/docs/sequential-workflow-designer/initialize-pro

Install the pro dependency for the Sequential Workflow Designer using npm. Ensure you are using compatible minor versions for designer and pro packages.

```bash
npm i @nocode-js/sequential-workflow-designer-pro  

```

--------------------------------

### Initialize Editor with Strings Value Editor Extension

Source: https://nocode-js.com/docs/sequential-workflow-editor/initialize-pro

Example of initializing the EditorProvider with the StringsValueEditorExtension. This demonstrates how to activate specific features from the modular Pro package.

```javascript
import { StringsValueEditorExtension } from '@nocode-js/sequential-workflow-editor-pro/value-editors/strings';  
  
const editorProvider = EditorProvider.create(definitionModel, {  
  extensions: [  
    StringsValueEditorExtension.create()  
  ],  
  // ...  
});  

```

--------------------------------

### Container Step Configuration

Source: https://nocode-js.com/docs/sequential-workflow-designer/step-components/container

This example demonstrates the basic structure for configuring a container step, specifically for a 'foreach' loop. Ensure the 'componentType' is set to 'container' and define 'itemsSource' within the 'properties' for loop iteration.

```javascript
const step = {
  componentType: 'container',
  id: '2a11d8498af26cdb67e2f27171e82f8e',
  type: 'foreach',
  name: 'Foreach of users',
  properties: {
    itemsSource: 'select * from users',
  },
  sequence: [
    // steps...
  ]
};
```

--------------------------------

### Install React Pro Package

Source: https://nocode-js.com/docs/sequential-workflow-designer/initialize-pro

Install the dedicated React pro package for the Sequential Workflow Designer. This package provides hooks and components for React integration.

```bash
npm i @nocode-js/sequential-workflow-designer-react-pro  

```

--------------------------------

### Recommended Version Compatibility

Source: https://nocode-js.com/docs/sequential-workflow-editor/initialize-pro

Use the same minor version for the editor and Pro packages to avoid compatibility issues. Examples show recommended and non-recommended versioning.

```json
✅ "sequential-workflow-editor": "^0.14.4",  
✅ "@nocode-js/sequential-workflow-editor-model-pro": "^0.14.4",  
✅ "@nocode-js/sequential-workflow-editor-pro": "^0.14.4"  
  
🚫 "sequential-workflow-editor": "^0.11.0",  
🚫 "@nocode-js/sequential-workflow-editor-model-pro": "^0.14.4",  
🚫 "@nocode-js/sequential-workflow-editor-pro": "^0.14.4"  

```

--------------------------------

### Icon Step Component Example

Source: https://nocode-js.com/docs/sequential-workflow-designer/step-components/icon

Defines the structure for an icon step component, specifying its type, ID, name, custom type, and properties including variable name and file path.

```javascript
const step = {
  componentType: 'icon',
  id: '2a11d8498af26cdb67e2f27171e82f8e',
  name: 'Save file',
  type: 'Save file',
  properties: {
    variableName: 'buffer',
    path: 'C:\\temp.txt'
  }
};
```

--------------------------------

### Workflow Tree Structure Example

Source: https://nocode-js.com/docs/sequential-workflow-designer/tree-traversal

Illustrates a typical tree structure of a workflow definition with conditional branching.

```text
if  
|___ true  
    |___ someTask  
|___ false  
    |___ someOtherTask  
```

--------------------------------

### Task Step Component Example

Source: https://nocode-js.com/docs/sequential-workflow-designer/step-components/task

Defines a task step component for saving a file. Ensure the 'componentType' is set to 'task' and provide a unique 'id'.

```javascript
const step = {
  componentType: 'task',
  id: '2a11d8498af26cdb67e2f27171e82f8e',
  type: 'saveFile',
  name: 'Save file to disk',
  properties: {
    path: 'C:\\temp.txt'
  }
};
```

--------------------------------

### Install Angular Pro Package

Source: https://nocode-js.com/docs/sequential-workflow-designer/initialize-pro

Install the dedicated Angular pro package for the Sequential Workflow Designer. This package provides integration for Angular projects.

```bash
npm i @nocode-js/sequential-workflow-designer-angular-pro  

```

--------------------------------

### Hide Toolbox

Source: https://nocode-js.com/docs/sequential-workflow-designer/features/toolbox

To hide the toolbox completely, set the `toolbox` property in the start configuration to `false`.

```javascript
const configuration = {
  toolbox: false,
  // ...
}
```

--------------------------------

### Enable Readonly Mode via Configuration

Source: https://nocode-js.com/docs/sequential-workflow-designer/features/editing-restrictions

Set the `isReadonly` property to `true` in the start configuration to disable all editing behaviors.

```javascript
const configuration = {
  isReadonly: true,
  // ...
};

```

--------------------------------

### Hiding Editors Configuration

Source: https://nocode-js.com/docs/sequential-workflow-designer/features/editors

Example of how to hide all editors in the designer by setting the 'editors' property to false in the configuration.

```javascript
const configuration = {
  editors: false,
};

```

--------------------------------

### Large Task Step Component Example

Source: https://nocode-js.com/docs/sequential-workflow-designer/step-components/large-task

This snippet demonstrates how to define a large task step component. Ensure the 'componentType' is set to 'largeTask'. The 'id' can be generated using the 'next()' function from the 'Uid' class for uniqueness.

```javascript
const step = {
  componentType: 'largeTask',
  id: '2a11d8498af26cdb67e2f27171e82f8e',
  type: 'callApi',
  name: 'Call API',
  properties: {
    arg1: '0xFF'
  }
};
```

--------------------------------

### Variable Scope Example

Source: https://nocode-js.com/docs/sequential-workflow-editor/workflow-variables

Demonstrates variable scope in the workflow editor. Parent scope variables are accessible in child scopes, but not vice versa. Duplicate variable definitions within the same scope are not allowed.

```text
|_ if (defines $x) ✅  
   |_ if (defines $x) ❌ $x is duplicated  
      |_ step2 (uses $x) ✅  


```

```text
|_ if (defines $x) ✅  
   |_ step1 (uses $x) ✅  
|_ if (defines $x) ✅  
   |_ step2 (uses $x) ✅  


```

--------------------------------

### Updating Old Definitions with DefinitionWalker

Source: https://nocode-js.com/docs/sequential-workflow-editor/updating-model

Use the DefinitionWalker class to update old definitions and ensure backward compatibility when new properties are added to steps. This example demonstrates how to add a missing 'nickname' property.

```javascript
import { DefinitionWalker } from 'sequential-workflow-model';  

const definition: Definition = { /* ... */ };  

const walker = new DefinitionWalker();  
walker.forEach(definition, step => {  
  if (step.type === 'myStep') {  
    if (step.properties.nickname === undefined) {  
      step.properties.nickname = step.properties.username;  
    }  
  }  
});  
```

--------------------------------

### Creating a Definition Model with a Configuration Provider

Source: https://nocode-js.com/docs/sequential-workflow-editor/dynamic-model

Illustrates how to instantiate a model using a configuration provider, which can be either the frontend or backend implementation. This code demonstrates the usage pattern after obtaining the configuration.

```javascript
const provider = // FrontendModelConfigurationProvider or BackendModelConfigurationProvider
const configuration = await provider.getConfiguration();
const definitionModel = createMyDefinitionModel(configuration);
```

--------------------------------

### Create Designer Instance (NPM)

Source: https://nocode-js.com/docs/sequential-workflow-designer/initialize-with-javascript-or-typescript

Instantiate the designer using the create method, passing a placeholder element, definition, and configuration object.

```javascript
// ...  
Designer.create(placeholder, definition, configuration);
```

--------------------------------

### Configure npm Registry and Auth Token

Source: https://nocode-js.com/docs/sequential-workflow-designer/initialize-pro

Set up your .npmrc file to use the GitHub Packages registry and authenticate with your auth token. Replace <YOUR_AUTH_TOKEN> with your actual token.

```bash
registry=https://registry.npmjs.org/  
@nocode-js:registry=https://npm.pkg.github.com/  
//npm.pkg.github.com/:_authToken=<YOUR_AUTH_TOKEN>  

```

--------------------------------

### Recommended Version Compatibility

Source: https://nocode-js.com/docs/sequential-workflow-designer/initialize-pro

Illustrates recommended and non-recommended versioning for the designer and pro packages to avoid compatibility issues. Always match minor versions.

```bash
✅ "sequential-workflow-designer": "^0.27.0",  
✅ "@nocode-js/sequential-workflow-designer-pro": "^0.27.0"  
  
🚫 "sequential-workflow-designer": "^0.21.0",  
🚫 "@nocode-js/sequential-workflow-designer-pro": "^0.27.0"  

```

--------------------------------

### Initialize Designer with Pro Extensions (JavaScript/TypeScript)

Source: https://nocode-js.com/docs/sequential-workflow-designer/initialize-pro

Initialize the Sequential Workflow Designer in JavaScript or TypeScript, including pro extensions like StepsProExtension and ModernWheelProExtension. Configure the designer with these extensions.

```javascript
import { Designer, DesignerConfiguration } from 'sequential-workflow-designer';  
import { StepsProExtension, ModernWheelProExtension } from '@nocode-js/sequential-workflow-designer-pro';  
  
const config: DesignerConfiguration = {  
  // ...  
  extensions: [  
    StepsProExtension.create(),  
    ModernWheelProExtension.create()  
  ]  
};
Designer.create(placeholder, definition, config);  

```

--------------------------------

### Build and Run Workflow Machine

Source: https://nocode-js.com/docs/sequential-workflow-machine/initialize-with-javascript-or-typescript

Initialize the workflow machine builder with the activity set, build the machine from the definition, and create an interpreter to run the workflow.

```typescript
import { createWorkflowMachineBuilder } from 'sequential-workflow-machine';

const builder = createWorkflowMachineBuilder<WorkflowGlobalState>(activitySet);
const machine = builder.build(definition);
const interpreter = machine.create({
  init: () => {
    return {
      html: null,
    };
  }
});
interpreter.onChange(() => { /* ... */ });
interpreter.onDone(() => { /* ... */ });
interpreter.start();

```

--------------------------------

### Get Step Parents Method Signature

Source: https://nocode-js.com/docs/sequential-workflow-designer/tree-traversal

Shows the method signature for retrieving the ancestors of a particular step using the Designer class.

```typescript
Designer.getStepParents(needle: Sequence | Step | string): (Step | string)[];  
```

--------------------------------

### Create Atom Activity for Download Step

Source: https://nocode-js.com/docs/sequential-workflow-machine/initialize-with-javascript-or-typescript

Implement an atom activity for the 'downloadHtml' step, defining its initialization, handler logic, and state management.

```typescript
import { createAtomActivity } from 'sequential-workflow-machine';  
  
interface DownloadHtmlStepState {
  attempt: number;
}

const downloadHtmlActivity = createAtomActivity<DownloadHtmlStep, WorkflowGlobalState, DownloadHtmlStepState>('downloadHtml', {
  init: () => ({
    attempt: 0,
  }),
  handler: async (step: DownloadHtmlStep, globalState: WorkflowGlobalState, activityState: DownloadHtmlStepState) => {
    globalState.html = await downloadHtml(step.properties.pageUrl);
    activityState.attempt++;
  },
});

```

--------------------------------

### Subscribe to OnSelectedStepIdChanged Event (JS/TS)

Source: https://nocode-js.com/docs/sequential-workflow-designer/events

Get notified when the selected step in the designer changes by subscribing to the onSelectedStepIdChanged event. It provides the new step ID or null if no step is selected.

```javascript
designer.onSelectedStepIdChanged.subscribe((stepIdOrNull) => {
  // ...
});
```

--------------------------------

### Initialize Workflow Definition

Source: https://nocode-js.com/docs/sequential-workflow-designer/initialize-with-react

Create or load your initial workflow definition object.

```typescript
const startDefinition: Definition = { /* ... */ };
```

--------------------------------

### Adding a New Property to a Step

Source: https://nocode-js.com/docs/sequential-workflow-editor/updating-model

When adding a new property to a step, simply extending the model can cause the Sequential Workflow Editor to crash for older definitions. This example shows the problematic approach.

```javascript
myStep.property('username').value(createStringValueModel({}));  

// If you just add a new property:  

myStep.property('username').value(createStringValueModel({}));  
myStep.property('nickname').value(createStringValueModel({}));  

// the Sequential Workflow Editor will throw an error that the property 'nickname' is not defined for the old definitions.  
```

--------------------------------

### Configure Designer Options

Source: https://nocode-js.com/docs/sequential-workflow-designer/initialize-with-react

Configure the designer's toolbox, steps, and validation using `useMemo` for optimization.

```typescript
const toolboxConfiguration: ToolboxConfiguration = useMemo(() => ({ /* ... */ }), []);
const stepsConfiguration: StepsConfiguration = useMemo(() => ({ /* ... */ }), []);
const validatorConfiguration: ValidatorConfiguration = useMemo(() => ({ /* ... */ }), []);
```

--------------------------------

### Configure Toolbox with Step Groups

Source: https://nocode-js.com/docs/sequential-workflow-designer/features/toolbox

Define the toolbox content by specifying groups and the steps within each group. Each step includes its component type, type, name, and properties.

```javascript
const configuration = {
  toolbox: {
    groups: [
      {
        name: 'Group 1',
        steps: [
          {
            componentType: 'task',
            type: 'sendEmail',
            name: 'Save e-mail',
            properties: { /* ... */ },
          },
          // ...
        ],
      },
      {
        name: 'Group 2',
        steps: [
          // ..
        ],
      },
    ],
  },
  // ...
};
```

--------------------------------

### Custom Translation Dictionary and Function

Source: https://nocode-js.com/docs/sequential-workflow-designer/features/internationalization

Define a dictionary of translations and a function to retrieve them. This function will be used by the designer to get translated strings based on keys, falling back to a default value if a translation is not found.

```typescript
const DICTIONARY = {
  'controlBar.resetView': 'Reestablecer vista',
  'controlBar.zoomIn': 'Reestablecer vista',
  'controlBar.zoomOut': 'Disminuir el zoom',
  'controlBar.turnOnOffDragAndDrop': 'Activar/desactivar arrastrar y soltar',
  'controlBar.deleteSelectedStep': 'Eliminar paso seleccionado',
  'controlBar.undo': 'Deshacer',
  'controlBar.redo': 'Rehacer',
  'smartEditor.toggle': 'Alternar editor',
  'toolbox.title': 'Caja de herramientas',
  'toolbox.search': 'Buscar',
  'contextMenu.select': 'Seleccionar',
  'contextMenu.unselect': 'Deseleccionar',
  'contextMenu.delete': 'Eliminar',
  'contextMenu.resetView': 'Reestablecer vista',
  'contextMenu.duplicate': 'Duplicar',
};

function i18n(key: string, defaultValue: string): string {
  return DICTIONARY[key] || defaultValue;
}
```

--------------------------------

### Initialize Designer with Previous Undo Stack

Source: https://nocode-js.com/docs/sequential-workflow-designer/features/undo-redo

Initialize the designer with the undo stack from a previous session by providing the 'undoStack' property in the configuration. Ensure 'undoStackSize' is also set.

```javascript
const configuration = {
  undoStackSize: 10,
  undoStack: myUndoStack,
  // ...
};
```

--------------------------------

### Create a Simple Atom Activity

Source: https://nocode-js.com/docs/sequential-workflow-machine/introduction

Defines a basic 'downloadHtml' activity using `createAtomActivity`. This activity initializes state, downloads HTML content, and increments an attempt counter.

```javascript
const downloadHtmlActivity = createAtomActivity('downloadHtml', {
  init: () => ({ attempt: 0 }),
  handler: async (step, globalState, activityState) => {
    globalState.html = await downloadHtml(step.properties.pageUrl);
    activityState.attempt++;
  },
});
```

--------------------------------

### Instantiate Definition Model with Dynamic Categories

Source: https://nocode-js.com/docs/sequential-workflow-editor/dynamic-model

This snippet demonstrates how to instantiate the definition model by first fetching categories and then passing them to the model creation function. This follows the 'load data -> create model' pattern.

```typescript
const categories = await fetchCategories();
const definitionModel = createMyDefinitionModel({ categories });

```

--------------------------------

### Initialize Editor Provider and Configurations

Source: https://nocode-js.com/docs/sequential-workflow-editor/initialize-with-angular

Initialize the editor provider and set up configurations for step editing, root editing, validation, and the toolbox within the ngOnInit lifecycle hook.

```typescript
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()
  };
}

```

--------------------------------

### Apply Custom Theme Configuration

Source: https://nocode-js.com/docs/sequential-workflow-designer/features/custom-theme

Configure the designer to use a custom theme by specifying its name in the configuration object. Ensure the theme is correctly defined and registered.

```javascript
const configuration = {
  theme: 'myTheme',
  // ...
};

```

--------------------------------

### Import CSS Files (NPM)

Source: https://nocode-js.com/docs/sequential-workflow-designer/initialize-with-javascript-or-typescript

Import the necessary CSS files for styling the designer when using NPM. This includes base, light, and dark themes.

```typescript
import 'sequential-workflow-designer/css/designer.css';
import 'sequential-workflow-designer/css/designer-light.css';
import 'sequential-workflow-designer/css/designer-dark.css';
```

--------------------------------

### Create Designer Instance (CDN)

Source: https://nocode-js.com/docs/sequential-workflow-designer/initialize-with-javascript-or-typescript

Call the designer's create method using the globally available Designer object when using the CDN.

```javascript
sequentialWorkflowDesigner.Designer.create(placeholder, definition, configuration);
```

--------------------------------

### Configuring Icon URL Provider

Source: https://nocode-js.com/docs/sequential-workflow-designer/features/step-icons

Configure the 'iconUrlProvider' in the steps configuration to return an icon URL based on component type and step type. Returns null if no icon is to be provided.

```javascript
const configuration = {
  steps: {
    iconUrlProvider: (componentType: string, type: string) => {
      if (componentType === 'task') {
        switch (type) {
            case 'someType':
              return `task-someType.svg`;
            case 'anotherType':
              return `task-anotherType.svg`;
          }
        }
      }
      return null;
    },
  },
};
```

--------------------------------

### Launch Pad Step Configuration

Source: https://nocode-js.com/docs/sequential-workflow-designer/step-components/launch-pad

Defines the configuration for a Launch Pad step component, including its type, ID, name, properties, and sequence.

```typescript
const step: SequentialStep = {
  componentType: 'launchPad',
  id: '2a11d8498af26cdb67e2f27171e82f8e',
  type: 'launchPad',
  name: 'Launch Pad',
  properties: {
    isEnabled: true
  },
  sequence: []
};

```

--------------------------------

### Project Structure for Shared Types

Source: https://nocode-js.com/docs/sequential-workflow-designer/sharing-types-between-frontend-and-backend

Illustrates a recommended project structure using NPM or Yarn workspaces for managing shared packages between frontend and backend applications.

```plaintext
@myapp/model - shared package  
  
@myapp/frontend - frontend package  
|_ dependencies:  
   |_ @myapp/model  
   |_ ...  
  
@myapp/backend - backend package  
|_ dependencies:  
   |_ @myapp/model  
   |_ ...
```

--------------------------------

### Configuring Root and Step Editors

Source: https://nocode-js.com/docs/sequential-workflow-designer/features/editors

Defines providers for root and step editors. The root editor configures global settings, while the step editor modifies step properties, name, and children. Use `notifyPropertiesChanged`, `notifyNameChanged`, and `notifyChildrenChanged` to signal changes to the designer.

```javascript
const editorsConfiguration = {
  rootEditorProvider: (definition, rootContext, isReadonly) => {
    const editor = document.createElement('div');
    // ...
    input.addEventListener('changed', () => {
      definition.properties['a'] = newA;
      rootContext.notifyPropertiesChanged();
    });
    // ...
    return editor;
  },

  stepEditorProvider: (step, stepContext, definition, isReadonly) => {
    const editor = document.createElement('div');
    // ...
    input.addEventListener('changed', () => {
      step.name = newName;
      stepContext.notifyNameChanged();

      step.properties['x'] = newX;
      stepContext.notifyPropertiesChanged();

      step.branches['newBranch'] = [];
      stepContext.notifyChildrenChanged();
    });
    // ...
    return editor;
  }
}

```

--------------------------------

### Create Definition Model with Dynamic User Steps

Source: https://nocode-js.com/docs/sequential-workflow-editor/dynamic-model

This function constructs a definition model that includes dynamically generated user steps. It maps an array of `UserStep` configurations to their respective step models.

```typescript
import { Step, createStepModel, createDefinitionModel } from 'sequential-workflow-editor-model'

function createUserStepModel(userStep: UserStep) {
  return createStepModel<Step>(userStep.type, 'task', step => {
    step.label(userStep.label);
    // ...
  });
}

function createMyDefinitionModel(configuration: { userSteps: UserStep[] }) {
  return createDefinitionModel(model => {
    // ...
    model.steps([
      ...userSteps.map(createUserStepModel)
    ]);
  });
}

```

--------------------------------

### Model Configuration Interfaces and Implementations

Source: https://nocode-js.com/docs/sequential-workflow-editor/dynamic-model

Defines the abstract interface for model configuration providers and provides concrete implementations for frontend and backend data fetching. Use the frontend provider for client-side data retrieval and the backend provider for server-side data retrieval.

```typescript
// @myapp/model  
interface ModelConfiguration {
  // ...
}
interface ModelConfigurationProvider {
  getConfiguration(): Promise<ModelConfiguration>;
}

// @myapp/frontend  
class FrontendModelConfigurationProvider implements ModelConfigurationProvider {
  // ...
  public async getConfiguration(): Promise<ModelConfiguration> {
    return (await fetch('https://api/configuration')).json();
  }
}

// @myapp/backend  
class BackendModelConfigurationProvider implements ModelConfigurationProvider {
  // ...
  public async getConfiguration(): Promise<ModelConfiguration> {
    return await dbStorage.getConfiguration();
  }
}
```

--------------------------------

### Using DefinitionWalker forEach to Iterate Steps

Source: https://nocode-js.com/docs/sequential-workflow-designer/tree-traversal

Shows how to iterate through all steps in a workflow definition using the forEach method and a callback function. The iteration can be stopped by returning false from the callback.

```typescript
import { DefinitionWalker } from 'sequential-workflow-model';  
const walker = new DefinitionWalker();  
  
walker.forEach(definition, (step: Step, index: number, parentSequence: Sequence) => {  
  if (check(step)) {  
    return false; // stop iteration  
  }  
  // ...  
});  
```

--------------------------------

### Enable Step Duplication

Source: https://nocode-js.com/docs/sequential-workflow-designer/features/editing-restrictions

Enable the 'Duplicate' option in the context menu by providing an `isDuplicable` function that returns `true` for the desired steps.

```javascript
const configuration = {
  steps: {
    isDuplicable: (step, parentSequence) => {
      return true;
    },
  },
  // ...
};

```

--------------------------------

### Create Definition Model with Dynamic Article Steps

Source: https://nocode-js.com/docs/sequential-workflow-editor/dynamic-model

This function creates a definition model that includes article steps with dynamically loaded categories. The categories are passed via a configuration object.

```typescript
import { createDefinitionModel } from 'sequential-workflow-editor-model'

function createMyDefinitionModel(configuration: { categories: string[] }) {
  return createDefinitionModel(model => {
    // ...
    model.steps([
      createCreateArticleStepModel(configuration.categories)
    ]);
  });
}

```

--------------------------------

### Create a Definition Model

Source: https://nocode-js.com/docs/sequential-workflow-editor/definition-activator

Defines a simple definition model with a single 'pingIp' task step and places it in the root sequence. This model serves as the blueprint for creating a definition.

```typescript
interface PingIpStep extends Step {
  type: 'pingIp';
  componentType: 'task';
  properties: {
    ip: string;
  }
}

const definitionModel = createDefinitionModel(model => {
  model.root((root) => {
    root.sequence().value(createSequenceValueModel({
      sequence: ['pingIp']
    }));
  });

  model.steps([
    createStepModel<PingIpStep>('pingIp', 'task', step => {
      step.property('ip').value(
        createStringValueModel({
          defaultValue: '127.0.0.1'
        })
      );
    })
  ]);
});

const editorProvider = EditorProvider.create(definitionModel, {
  uidGenerator: Uid.next
});

```

--------------------------------

### Create String Value Model Configuration

Source: https://nocode-js.com/docs/sequential-workflow-editor/value-models/string

Configure a string property with a default value, minimum length, and a regular expression pattern.

```typescript
import { createStringValueModel } from 'sequential-workflow-editor-model';

builder
  .property('foo')
  .value(
    createStringValueModel({
      defaultValue: 'lorem ipsum',
      minLength: 10,
      pattern: /^https:\/\/ப்புகளை
    })
  );
```

--------------------------------

### Setting Placeholder Configuration in Designer

Source: https://nocode-js.com/docs/sequential-workflow-designer/features/conditional-placeholders

Apply the placeholder configuration to the designer by setting it within the main configuration object.

```javascript
const configuration = {
  placeholder: placeholder,
  // ...
};

```

--------------------------------

### Create Log Step Model

Source: https://nocode-js.com/docs/sequential-workflow-editor/initialize-with-javascript-or-typescript

Create a model for a 'log' step using `createStepModel`. This defines the properties and their types for the step.

```typescript
import { createStepModel, createStringValueModel } from 'sequential-workflow-editor-model';  
  
export const logStepModel = createStepModel<LogStep>('log', 'task', step => {  
  step.property('message')  
    .value(  
      createStringValueModel({  
        minLength: 1  
      })  
    )
    .label('Message to log');
});  

```

--------------------------------

### Create Choice Value Model

Source: https://nocode-js.com/docs/sequential-workflow-editor/value-models/choice

Configures a property with a choice value model, specifying the available choices and an optional default value. Ensure 'sequential-workflow-editor-model' is imported.

```javascript
import { createChoiceValueModel } from 'sequential-workflow-editor-model';  
  
builder  
  .property('foo')  
  .value(  
    createChoiceValueModel({
      choices: [  
        'red',  
        'blue',  
        'green'  
      ],  
      defaultValue: 'blue'  
    })
  );
```

--------------------------------

### Define Designer Configuration

Source: https://nocode-js.com/docs/sequential-workflow-designer/initialize-with-svelte

Import and define configurations for steps, toolbox, and validators. These objects customize the designer's behavior and available elements.

```typescript
import type { StepsConfiguration, ToolboxConfiguration, ValidatorConfiguration } from 'sequential-workflow-designer';

const steps: StepsConfiguration = { /* ... */ };
const toolbox: ToolboxConfiguration = { /* ... */ };
const validator: ValidatorConfiguration = { /* ... */ };
```

--------------------------------

### Creating a Container Activity

Source: https://nocode-js.com/docs/sequential-workflow-machine/activities/container-activity

Defines a container activity for a 'block' step type. It includes initialization, onEnter, and onLeave functions to manage the activity's state and interact with global state.

```typescript
import { SequentialStep } from 'sequential-workflow-model';
import { createContainerActivity } from 'sequential-workflow-machine';

interface BlockStep extends SequentialStep {
  type: 'block';
  componentType: 'container';
  /* ... */
}

const blockActivity = createContainerActivity<BlockStep, MyGlobalState, MyActivityState>('block', {
  init: () => ({}),
  onEnter: async (step: BlockStep, globalState: MyGlobalState, activityState: MyActivityState) => {
    /* ... */
  },
  onLeave: async (step: BlockStep, globalState: MyGlobalState, activityState: MyActivityState) => {
    /* ... */
  }
});

```

--------------------------------

### Create Editor Provider

Source: https://nocode-js.com/docs/sequential-workflow-editor/initialize-with-javascript-or-typescript

Create an editor provider by passing the definition model and a unique identifier generator to `EditorProvider.create`.

```typescript
import { EditorProvider } from 'sequential-workflow-editor';  
import { Uid } from 'sequential-workflow-designer';  
  
export const editorProvider = EditorProvider.create(definitionModel, {  
    uidGenerator: Uid.next  
});  

```

--------------------------------

### Create Number Value Model

Source: https://nocode-js.com/docs/sequential-workflow-editor/value-models/number

Configures a property with a number value model, setting a default value and optional minimum/maximum constraints.

```javascript
import { createNumberValueModel } from 'sequential-workflow-editor-model';

builder
  .property('foo')
  .value(
    createNumberValueModel({
      defaultValue: 128,
      min: 8,
      max: 1024
    })
  );
```

--------------------------------

### Activate a Full Definition

Source: https://nocode-js.com/docs/sequential-workflow-editor/definition-activator

Activates the entire definition using the EditorProvider. This method generates the complete definition object, including all its steps and properties.

```typescript
const definition: Definition = editorProvider.activateDefinition();
/* =>
{
  "properties": {},
  "sequence": [
    {
      "id": "1fc989343ad4f48f48ee9b9b03c32fb5",
      "type": "pingIp",
      "componentType": "task",
      "properties": {
        "ip": "127.0.0.1"
      },
      "name": "PingIp"
    }
  ]
}
*/

```

--------------------------------

### Creating a For Loop Activity

Source: https://nocode-js.com/docs/sequential-workflow-machine/activities/loop-activity

Defines a 'for' loop activity using `createLoopActivity`. It includes configurations for loop naming, initialization, entry/leave actions, and the loop condition. The condition function determines if the loop should continue.

```typescript
import { SequentialStep } from 'sequential-workflow-model';
import { createLoopActivity } from 'sequential-workflow-machine';

interface ForStep extends SequentialStep {
  type: 'for';
  componentType: 'loop';
  /* ... */
}

const forActivity = createLoopActivity<ForStep, MyGlobalState, MyActivityState>('for', {
  loopName: step => `FOR_${step.id}`,
  init: step => { /* ... */ },
  onEnter: async (step: ForStep, globalState: MyGlobalState, activityState: MyActivityState) => {
    /* ... */
  },
  onLeave: async (step: ForStep, globalState: MyGlobalState, activityState: MyActivityState) => {
    /* ... */
  },
  condition: async (step: ForStep, globalState: MyGlobalState, activityState: MyActivityState) => {
    return true; // `false` if the loop should be stopped
  }
});
```

--------------------------------

### Create Activity Set

Source: https://nocode-js.com/docs/sequential-workflow-machine/initialize-with-javascript-or-typescript

Assemble all defined activities into an activity set, which the workflow machine will use to resolve step types.

```typescript
import { createActivitySet } from 'sequential-workflow-machine';

const activitySet =  createActivitySet<WorkflowGlobalState>([
  downloadHtmlActivity,
]);

```

--------------------------------

### Create Dynamic User Step Models

Source: https://nocode-js.com/docs/sequential-workflow-editor/dynamic-model

This function creates individual step models based on user-defined step configurations. It maps the `UserStep` properties to the `createStepModel` function.

```typescript
import { Step, createStepModel, createDefinitionModel } from 'sequential-workflow-editor-model'

function createUserStepModel(userStep: UserStep) {
  return createStepModel<Step>(userStep.type, 'task', step => {
    step.label(userStep.label);
    // ...
  });
}

```

--------------------------------

### Include Designer CSS and JS (CDN)

Source: https://nocode-js.com/docs/sequential-workflow-designer/initialize-with-javascript-or-typescript

Add the designer's CSS and JavaScript files to the HTML head section when using a CDN.

```html
<head>
...
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.17.0/css/designer.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.17.0/css/designer-light.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.17.0/css/designer-dark.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.17.0/dist/index.umd.js"></script>

```

--------------------------------

### Prepare Workflow Definition Object

Source: https://nocode-js.com/docs/sequential-workflow-machine/initialize-with-javascript-or-typescript

Construct the workflow definition object according to the defined interface, including properties and the sequence of steps.

```typescript
const definition: MyDefinition = {
  properties: {
    verbose: true,
  },
  sequence: [
    {
      id: '0x00001',
      componentType: 'task',
      type: 'downloadHtml',
      name: 'Download google.com',
      properties: {
        pageUrl: 'https://www.google.com',
      },
    },
  ],
};

```

--------------------------------

### Handle Designer Ready and Definition Changed Events

Source: https://nocode-js.com/docs/sequential-workflow-editor/initialize-with-angular

Implement methods to capture the designer's ready state and any changes made to the workflow definition.

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

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

```

--------------------------------

### Fetch User-Defined Steps

Source: https://nocode-js.com/docs/sequential-workflow-editor/dynamic-model

This function fetches configuration data for user-defined steps from a REST API. It returns a Promise that resolves to an array of `UserStep` objects.

```typescript
interface UserStep {
  label: string;
  type: string;
  // ...
}

function fetchUserSteps(): Promise<UserStep[]> {
  return (await fetch('https://api/user-steps')).json();
}

```

--------------------------------

### Importing Shared Types in Frontend or Backend

Source: https://nocode-js.com/docs/sequential-workflow-designer/sharing-types-between-frontend-and-backend

Demonstrates how to import and use the shared types (MyDefinition, SendEmailStep, IfStep) defined in the '@myapp/model' package within either the frontend or backend application.

```typescript
// @myapp/frontend or @myapp/backend  
  
import { MyDefinition, SendEmailStep, IfStep } from '@myapp/model';
```

--------------------------------

### Create Dynamic Value Model

Source: https://nocode-js.com/docs/sequential-workflow-editor/value-models/dynamic

Configures a property with a dynamic value model, allowing users to select from predefined value models. The first model in the list is set as the default.

```typescript
import {
  createDynamicValueModel,
  createNumberValueModel,
  createNullableVariableValueModel
} from 'sequential-workflow-editor-model';

builder
  .property('foo')
  .value(
    createDynamicValueModel({
      models: [
        createNumberValueModel({ /* ... */ }),
        createNullableVariableValueModel({ /* ... */ })
      ]
    })
  );
```

--------------------------------

### Folder Step Component Definition

Source: https://nocode-js.com/docs/sequential-workflow-designer/step-components/folder

Defines the basic structure of a folder step component, including its type, ID, name, properties, and a sequence for child steps. This is a Pro component.

```javascript
const step = {
  componentType: 'folder',
  id: 'my-unique-id',
  name: 'my-name',
  properties: {
    // ...
  },
  sequence: [
    // children steps
  ]
};
```

--------------------------------

### Subscribe to OnReady Event (JS/TS, Angular)

Source: https://nocode-js.com/docs/sequential-workflow-designer/events

Use the onReady event to execute code when the designer is fully initialized. This event is not available in the React package.

```javascript
designer.onReady.subscribe(() => {
  // ...
});
```

--------------------------------

### Creating New and Hiding Old Steps

Source: https://nocode-js.com/docs/sequential-workflow-editor/updating-model

When a step requires a complete update, create a new step model and hide the old one in the toolbox. This ensures old definitions work with the old step, and new definitions use the new step.

```javascript
createStepModel<PostMessageStep>('postMessage', 'task', step => {  
  step.toolbox(false);  
  step.property('username').value(createStringValueModel({}));  
});  

createStepModel<PostMessageV2Step>('postMessageV2', 'task', step => {  
  step.property('username').value(createStringValueModel({}));  
  step.property('nickname').value(createStringValueModel({}));  
});  
```

--------------------------------

### Import CSS Files for Designer

Source: https://nocode-js.com/docs/sequential-workflow-designer/initialize-with-svelte

Add these CSS imports to your global CSS file to ensure the designer's styles are applied correctly. This includes base, light, and dark themes.

```css
@import 'sequential-workflow-designer/css/designer.css';
@import 'sequential-workflow-designer/css/designer-light.css';
@import 'sequential-workflow-designer/css/designer-dark.css';
```

--------------------------------

### Attach Editor Provider to Designer

Source: https://nocode-js.com/docs/sequential-workflow-editor/initialize-with-javascript-or-typescript

Configure the Sequential Workflow Designer by passing the editor provider's root and step providers, along with validators.

```typescript
import { Designer } from 'sequential-workflow-designer';  
  
const designer: Designer<MyDefinition> = Designer.create(placeholder, startDefinition, {
  editors: {
    rootEditorProvider: editorProvider.createRootEditorProvider(),
    stepEditorProvider: editorProvider.createStepEditorProvider()
  },
  validator: {
    step: editorProvider.createStepValidator(),
    root: editorProvider.createRootValidator()
  },
  // ...  
});  

```

--------------------------------

### Import Designer Module (NPM)

Source: https://nocode-js.com/docs/sequential-workflow-designer/initialize-with-javascript-or-typescript

Import the Designer class from the sequential-workflow-designer package when using NPM.

```typescript
import { Designer } from 'sequential-workflow-designer';
```

--------------------------------

### Tree Structure with Parent Pointers

Source: https://nocode-js.com/docs/sequential-workflow-designer/tree-traversal

Visual representation of a workflow tree highlighting parent-child relationships and branch names.

```text
root  
|__ step0  
|__ step1  
|__ ⏫ switch0  
    |__ 'true'  
        |__ step2  
        |__ step3  
    |__ ⏫ 'false'  
        |__ ⏫ step4  
        |__ step5  
```

--------------------------------

### Create Definition Model

Source: https://nocode-js.com/docs/sequential-workflow-editor/initialize-with-javascript-or-typescript

Create the main definition model for the workflow editor. This combines root properties, value types, and available steps.

```typescript
import { createDefinitionModel } from 'sequential-workflow-editor-model';  
  
export const definitionModel = createDefinitionModel<MyDefinition>(model => {  
  model.valueTypes(['string', 'number']);  
  model.root(rootModel);
  model.steps([logStepModel]);
});  

```

--------------------------------

### Define a Static Article Step Model

Source: https://nocode-js.com/docs/sequential-workflow-editor/dynamic-model

This snippet shows the static definition of an article step model with a predefined category choice. It uses `createStepModel` and `createChoiceValueModel` for configuration.

```typescript
interface CreateArticleStepModel extends StepModel {
  type: 'createArticle';
  properties: {
    category: string;
  };
}

const createArticleStepModel = createStepModel<ChoiceStepModel>('createArticle', 'task', step => {
  // ...
  builder.property('category').value(createChoiceValueModel({
    choices: ['red', 'blue', 'green'],
  }));
});

```

--------------------------------

### Creating a Fork Activity

Source: https://nocode-js.com/docs/sequential-workflow-machine/activities/fork-activity

Defines a 'if' type fork activity that branches based on global state. It initializes an empty activity state and handles branching logic in the handler.

```typescript
import { BranchedStep } from 'sequential-workflow-model';
import { createForkActivity, interrupt, branchName } from 'sequential-workflow-machine';

interface IfStep extends BranchedStep {
  type: 'if';
  componentType: 'switch';
  /* ... */
}

const ifActivity = createForkActivity<IfStep, MyGlobalState, MyActivityState>('if', {
  init: () => {
    return {}; // Initial activity state
  },
  handler: async (step: IfStep, globalState: MyGlobalState, activityState: MyActivityState) => {
    if (globalState.temperature < 0) {
      return interrupt();
    }
    if (globalState.temperature > 10) {
      return branchName('true');
    }
    return branchName('false');
  }
});

```

--------------------------------

### Initialize Sequential Workflow Editor in React

Source: https://nocode-js.com/docs/sequential-workflow-editor/initialize-with-react

Initialize the Sequential Workflow Editor within a React component using the EditorProvider and SequentialWorkflowDesigner. Ensure endpointDefinitionModel is defined elsewhere.

```javascript
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  
    }}  
  />  
);  

```

--------------------------------

### Create Root Model for Inputs

Source: https://nocode-js.com/docs/sequential-workflow-editor/initialize-with-javascript-or-typescript

Create a root model for workflow inputs using `createRootModel`. This defines the structure for root-level properties.

```typescript
import { createRootModel, createVariableDefinitionsValueModel } from 'sequential-workflow-editor-model';  
  
export const rootModel = createRootModel<MyDefinition>(root => {  
  root.property('inputs')  
    .value(  
      createVariableDefinitionsValueModel({})
    );
);

```

--------------------------------

### Confirm Step Insertion

Source: https://nocode-js.com/docs/sequential-workflow-designer/features/editing-restrictions

Ask for user confirmation before inserting a step using the `canInsertStep` function. The designer will not insert the step if the user cancels.

```javascript
const configuration = {
  steps: {
    canInsertStep: (step, targetSequence, targetIndex) => {
      return confirm('Are you sure?');
    },
  }
};

```

--------------------------------

### Using getStepParents to Retrieve Parents

Source: https://nocode-js.com/docs/sequential-workflow-designer/tree-traversal

Demonstrates how to use the getStepParents method to obtain all parent steps and branch names for a given step.

```typescript
const designer = Designer.create(/* ... */);  
  
const step: Step = /* ... */;  
const result: (Step | string)[] = designer.getStepParents(step);  
// result[0] = { componentType: 'switch', type: 'if', ... }  
// result[1] = 'true'  
// result[2] = step  
```

--------------------------------

### Assign Custom Editors to Designer

Source: https://nocode-js.com/docs/sequential-workflow-designer/initialize-with-svelte

Import your custom root and step editor components and assign them to the SequentialWorkflowDesigner using the 'rootEditor' and 'stepEditor' props.

```svelte
<script lang="ts">
  import StepEditor from './step-editor.svelte';
  import RootEditor from './root-editor.svelte';
</script>

<SequentialWorkflowDesigner
  ...
  stepEditor={StepEditor}
  rootEditor={RootEditor} />
```

--------------------------------

### Configuring Conditional Placeholders

Source: https://nocode-js.com/docs/sequential-workflow-designer/features/conditional-placeholders

Define the placeholder configuration object with your custom canCreate and canShow functions. This object is then passed to the designer's configuration.

```javascript
const placeholder = {
  canCreate(sequence, index, definition) {
    // your logic here
    return true;
  },
  canShow(sequence, index, draggingStepComponentType, draggingStepType, definition) {
    // your logic here
    return true;
  }
};

```

--------------------------------

### Create SendEmailStep Model

Source: https://nocode-js.com/docs/sequential-workflow-editor/introduction

Creates a model for the 'sendEmail' step using `createStepModel`. This model is used to declaratively define the editor's structure and properties.

```typescript
import { createStepModel } from 'sequential-workflow-editor-model';

export const sendEmailStepModel = createStepModel<SendEmailStep>('sendEmail', 'task', step => {
  step.property('to').value(
    createStringValueModel({})
  );
  step.property('addFooter').value(
    createBooleanValueModel({})
  );
});
```

--------------------------------

### Wrap and Memorize Definition

Source: https://nocode-js.com/docs/sequential-workflow-designer/initialize-with-react

Use the `wrapDefinition` function to prepare the definition for the React component and manage its state.

```typescript
const [definition, setDefinition] = useState(() => wrapDefinition(startDefinition));
```
Tokens:
Raw