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