{"id":15588229,"url":"https://github.com/optimajet/workflow-designer-javascript-sample","last_synced_at":"2025-10-13T01:52:01.160Z","repository":{"id":42186416,"uuid":"418843100","full_name":"optimajet/workflow-designer-javascript-sample","owner":"optimajet","description":"WorkflowEngine Designer for JavaScript","archived":false,"fork":false,"pushed_at":"2025-04-01T10:40:04.000Z","size":1103,"stargazers_count":9,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-24T04:52:12.476Z","etag":null,"topics":["designer","javascript","optimajet","sample","workflow"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/optimajet.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-10-19T08:49:13.000Z","updated_at":"2025-04-01T10:40:08.000Z","dependencies_parsed_at":"2024-01-19T13:51:30.871Z","dependency_job_id":"49647c35-fe27-420a-b4b9-fba40c0c403f","html_url":"https://github.com/optimajet/workflow-designer-javascript-sample","commit_stats":{"total_commits":63,"total_committers":2,"mean_commits":31.5,"dds":"0.031746031746031744","last_synced_commit":"452358994b5d6118ce5acbb7bdf806905f9e4f04"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/optimajet%2Fworkflow-designer-javascript-sample","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/optimajet%2Fworkflow-designer-javascript-sample/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/optimajet%2Fworkflow-designer-javascript-sample/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/optimajet%2Fworkflow-designer-javascript-sample/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/optimajet","download_url":"https://codeload.github.com/optimajet/workflow-designer-javascript-sample/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250566446,"owners_count":21451230,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["designer","javascript","optimajet","sample","workflow"],"created_at":"2024-10-02T22:21:59.085Z","updated_at":"2025-10-13T01:51:56.107Z","avatar_url":"https://github.com/optimajet.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"#  WorkflowEngine Designer for JavaScript Sample\n\n## Introduction\n\nWorkflowEngine Designer is a library developed to facilitate the use of this component. It provides a convenient way to interact and create the Workflow Designer on your web page. This section explains you how to add the Workflow Designer to your web application in a convenient format  - Get Started -  that thoroughly interprets the procedure, step by step.\n\n## Prerequisites\n\nTo run the example below, you should create the WorkflowEngine backend capable of handling requests from the Workflow Designer, the NodeJS runtime, and  the NPM package manager to download the required packages.\n\n## Get Started\n\nThe first step is to create a working directory where the project will be developed:\n\n```shell\nmkdir workflow-designer-sample\ncd workflow-designer-sample\nnpm init\n```\n\nThen, the `npm` is initialized. You can select all the default values, these parameters do not play any special role.\n\nAfter initialization, the `package.json` file will appear in the working directory. Its content is approximately as follows:\n\n```json\n{\n  \"name\": \"workflow-designer-sample\",\n  \"version\": \"1.0.0\",\n  \"description\": \"\",\n  \"main\": \"index.js\",\n  \"scripts\": {\n    \"test\": \"echo \\\"Error: no test specified\\\" \u0026\u0026 exit 1\"\n  },\n  \"author\": \"\",\n  \"license\": \"ISC\"\n}\n\n```\n\nThe next step is to install the necessary npm packages; in our case, it will be the only one package:\n\n```shell\nnpm install @optimajet/workflow-designer\n```\n\nThen, the `node_modules` folder, containing all the packages necessary for work, will appear in your working directory.\n\n\u003e Please, do not change the contents of the `node_modules` folder to avoid unexpected errors on starting the application.\n\nNow, we add the `src` folder and create two files in it, namely: `index.html` responsible for the appearance of the created page, and `index.js` containing the JavaScript code. In the result, you should obtain the following file hierarchy in the working directory:\n\n```\n├── node_modules\n│   └── ...\n├── src\n│   ├── index.html\n│   └── index.js\n├── package.json\n```\n\nThen, we create a \"skeleton\" of the web page. For this, open `index.html` and paste the following markup code:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003ctitle\u003eDesigner sample\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003ch1\u003eDesigner Sample\u003c/h1\u003e\n    \u003cdiv id=\"root\"\u003e\u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nThis page contains a title, and a `div` element with `id = \"root\"`, which will become the container to display the Workflow Designer.\n\nNow, we start writing the JavaScript code. For this, open the `index.js` file and paste the following code:\n\n```javascript\nimport WorkflowDesigner from '@optimajet/workflow-designer'\n//import '@optimajet/workflow-designer/localization/workflowdesigner.localization_ru'\n\nconst data = {\n    schemecode: \"\u003cYOUR_SCHEME_CODE_VALUE\u003e\",\n    processid: undefined\n};\n\nvar wfdesigner = new WorkflowDesigner({\n    apiurl: '\u003cYOUR_API_URL_VALUE\u003e',\n    renderTo: 'root',\n    templatefolder: '/templates/',\n    graphwidth: window.innerWidth,\n    graphheight: window.innerHeight,\n});\n\nif (wfdesigner.exists(data)) {\n    wfdesigner.load(data);\n} else {\n    wfdesigner.create();\n}\n```\n\nThis code snippet is everything you need to initially display the Workflow Designer on your web page. Let's analyze it in more detail:\n\n```javascript\nimport WorkflowDesigner from '@optimajet/workflow-designer'\n//import '@optimajet/workflow-designer/localization/workflowdesigner.localization_ru'\n```\n\nThis section is responsible for importing the `WorkflowDesigner` constructor. By uncommenting line 2, you can localize the workflow designer. By default, the workflow designer has the English localization.\n\n```javascript\nconst data = {\n    schemecode: \"\u003cYOUR_SCHEME_CODE_VALUE\u003e\",\n    processid: undefined\n};\n\nvar wfdesigner = new WorkflowDesigner({\n    apiurl: '\u003cYOUR_API_URL_VALUE\u003e',\n    renderTo: 'root',\n    graphwidth: window.innerWidth,\n    graphheight: window.innerHeight,\n});\n```\n\nIn this section:\n\n- `schemecode` - is the code for the Workflow diagram to be displayed in the Workflow Designer.\n- `processid` - is the identifier of the WorkflowEngine process.\n  \n- the `WorkflowDesigner` constructor takes an object with the designer settings and creates a new instance of the WorkflowDesigner class. The example specifies all the necessary parameters of the designer, namely: the HTTP address of the WorkflowAPI for interacting with the back-end of the application (`apiurl`), the available width (`graphwidth`) and height (`graphheight`) for displaying the WorkflowDesigner window, and the element ID, inside which the entire WorkflowDesigner interface is rendered (`renderTo`). For a more detailed list of the parameters, see the **Designer** section of the documentation page about the WorkflowEngine.\n\n\nIf you want to display the Workflow scheme in the Workflow Designer interface, set the required value to the `schemecode` variable, and assign the `undefined` value to the `processid`. In case you want to display the Workflow process, set the `undefined` value to the `schemecode`, and the required value to the `processid` variable of the WorkflowEngine process identifier.\n\n```javascript\nif (wfdesigner.exists(data)) {\n    wfdesigner.load(data);\n} else {\n    wfdesigner.create();\n}\n```\n\nThis section checks whether the above data exist and available for loading and displaying in the WorkflowDesigner. If the specified data exist, then they are loaded and rendered. Otherwise, a new empty Workflow diagram will be created.\n\n## Building and Running the Example\n\nWe use the webpack package to build our example.\n\n```shell\nnpm i -D webpack webpack-cli\n```\n\nNext, add the packages necessary for the correct webpack setup\n\n```shell\nnpm i -D @babel/preset-env @babel/core babel-loader css-loader html-webpack-plugin mini-css-extract-plugin terser-webpack-plugin\n```\n\nThe next step is to create the `webpack.config.js` file in the project root.\n\n```js\nconst HtmlWebpackPlugin = require('html-webpack-plugin'); // for generate an HTML5 file\nconst path = require('path')\nconst MiniCssExtractPlugin = require(\"mini-css-extract-plugin\"); // to extract CSS into separate files\nconst TerserPlugin = require('terser-webpack-plugin'); // to minify your JavaScript\nconst webpack = require('webpack');\n\nmodule.exports = () =\u003e ({\n    entry: {\n      wfesample: './src/index.js',\n    },\n    output: {\n        path: path.resolve(__dirname, 'dist'), \n        filename: '[name].min.js',\n        libraryTarget: \"umd\",\n    },\n    mode:'production',\n \n    optimization: {\n        minimizer: [new TerserPlugin()],\n    },\n    module: {\n        rules: [\n            {\n              test: /\\.css$/i,\n              use: [MiniCssExtractPlugin.loader, \"css-loader\"],\n            },\n            {\n              test: /\\.m?js$/,\n              exclude: /(node_modules|bower_components)/,\n              use: {\n                  loader: 'babel-loader',\n                  options: {\n                    presets: ['@babel/preset-env']\n                  },\n              },\n          },\n        ],\n    },\n    plugins: [\n        new HtmlWebpackPlugin({ template: './src/index.html' }),\n        new MiniCssExtractPlugin(),\n        new webpack.ContextReplacementPlugin(/moment[/\\\\]locale$/, /en/),\n    ]\n});\n```\n\nTo run the build, you should edit the `package.json` file. Add the `\"build\": \"webpack\"` property to the `scripts` object.\n\nTo start the build of the application, run the following command in the project root:\n\n```shell\nnpm run build\n```\n\nAfter the build is completed, the following three files will appear in the `dist` folder: `index.html`, `wfesample.css`, and `wfesample.min.js`\n\nTo run this example, simply open the `index.html` file in a browser or use Visual Studio Code after installing the Live Server extension and enabling it in your working directory.\n\nAt the end of the procedure, the following will be displayed on your screen:\n\n![Workflow Engine Designer Sample for JavaScript](./screens/good-result.png)\n\n## IE11 Support\n\nTo support successful performance of the designer in IE11, we should slightly modify the webpack configuration in `webpack.config.js`, but first we should add another package to transpile and modify our JavaScript.\n\n```shell\nnpm i -D @babel/plugin-proposal-decorators\n```\n\nNow, add the `target: ['web', 'es5']` property in the webpack config, and change the `babel-loader` rule in`module.rules` to the following:\n\n```js\n//...\nrules: [\n    //...\n    {\n        test: /\\.(js|jsx)$/,\n        exclude: /@babel(?:\\/|\\\\{1,2})runtime|core-js/,\n        use: {\n            loader: 'babel-loader',\n            options: {\n                babelrc: false,\n                configFile: path.resolve(__dirname, 'babel.config.js'),\n                compact: false,\n                cacheDirectory: true,\n                sourceMaps: false,\n            },\n        },\n    },\n],\n//...\n```\n\nThe only thing left to do is to create the `babel.config.js` file in the project root. The file should contain the following babel configuration:\n\n```js\nmodule.exports = function (api) {\n    api.cache(true);\n    const presets = [\n        [\n            '@babel/preset-env',\n            {\n                corejs:\"3\",\n                useBuiltIns: 'entry',\n                targets: {\n                    browsers: [\n                        \"edge \u003e= 16\",\n                        \"safari \u003e= 9\",\n                        \"firefox \u003e= 57\",\n                        \"ie \u003e= 11\",\n                        \"ios \u003e= 9\",\n                        \"chrome \u003e= 49\"\n                    ]\n                }\n            }\n        ]\n    ];\n    const plugins= [\n        [\"@babel/plugin-proposal-decorators\", { decoratorsBeforeExport: true }],\n        [\"@babel/plugin-proposal-class-properties\", { \"loose\": true }],\n        [\"@babel/plugin-transform-spread\"]\n    ];\n    return {\n        presets,\n        plugins\n    }\n}\n```\n\nThe configuration is completed successfully, so you can enjoy using the WorkflowDesigner in IE11.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foptimajet%2Fworkflow-designer-javascript-sample","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foptimajet%2Fworkflow-designer-javascript-sample","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foptimajet%2Fworkflow-designer-javascript-sample/lists"}