Skip to main content

Initialize Sequential Workflow Designer Pro

If you read this page, you probably bought the pro version of the designer. Thank you for your support! This article will help you to initialize the pro version of the designer.

At the beginning create a new auth token for your GitHub account with the read:packages permission. Next, create the .npmrc file in the root folder of your project and pass there your auth token.

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

Next, install the pro dependency.

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

We strongly recommend using the same minor version for the designer and pro packages, as different minor versions may lead to compatibility issues.

✅ "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"

The next steps depends on what framework you use.

JavaScript or TypeScript​

You need to attach CSS files to your HTML document. If you use css-loader or similar, you can add CSS files to your bundle:

import 'sequential-workflow-designer/css/designer.css';
import 'sequential-workflow-designer/css/designer-light.css';
import 'sequential-workflow-designer/css/designer-dark.css';
import '@nocode-js/sequential-workflow-designer-pro/css/designer-pro.css';
import '@nocode-js/sequential-workflow-designer-pro/css/designer-pro-light.css';
import '@nocode-js/sequential-workflow-designer-pro/css/designer-pro-dark.css';

The pro package is modular. You can choose features what you want to activate.

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);

That's it!

React​

For React we prepared a dedicated package with hooks.

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

You need to attach CSS files to your React application.

import 'sequential-workflow-designer/css/designer.css';
import 'sequential-workflow-designer/css/designer-light.css';
import 'sequential-workflow-designer/css/designer-dark.css';
import '@nocode-js/sequential-workflow-designer-pro/css/designer-pro.css';
import '@nocode-js/sequential-workflow-designer-pro/css/designer-pro-light.css';
import '@nocode-js/sequential-workflow-designer-pro/css/designer-pro-dark.css';

The React component allows you to pass the extensions by the extensions property. Don't forget to memorize the array of extensions.

import { StepsProExtension, ModernWheelProExtension } from '@nocode-js/sequential-workflow-designer-pro';

const extensions = useMemo(() => [
  StepsProExtension.create(),
  ModernWheelProExtension.create(),
], []);

<SequentialWorkflowDesigner
  ...
  extensions={extensions}>
  />

Angular​

For Angular we prepared a dedicated package.

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

You need to attach CSS files to your Angular application. Add CSS files to your angular.json file.

{
  "projects": {
    "YOUR_APP": {
      "architect": {
        "build": {
          "styles": [
            "./node_modules/sequential-workflow-designer/css/designer.css",
            "./node_modules/sequential-workflow-designer/css/designer-light.css",
            "./node_modules/sequential-workflow-designer/css/designer-dark.css",
            "./node_modules/@nocode-js/sequential-workflow-designer-pro/css/designer-pro.css",
            "./node_modules/@nocode-js/sequential-workflow-designer-pro/css/designer-pro-light.css",
            "./node_modules/@nocode-js/sequential-workflow-designer-pro/css/designer-pro-dark.css",
          ]
        }
      }
    }
  }
}

Next, create a public property in your component that will store the extensions.

import { StepsProExtension, ModernWheelProExtension } from '@nocode-js/sequential-workflow-designer-pro';

public readonly extensions = [
  StepsProExtension.create(),
  ModernWheelProExtension.create(),
];

Finally, pass the extensions to the component.

<sqd-designer
  ...
  [extensions]="extensions">
</sqd-designer>