{"id":15588342,"url":"https://github.com/optimajet/workflow-designer-angular-sample","last_synced_at":"2025-04-15T17:00:24.447Z","repository":{"id":39796909,"uuid":"418842204","full_name":"optimajet/workflow-designer-angular-sample","owner":"optimajet","description":"WorkflowEngine Designer for Angular","archived":false,"fork":false,"pushed_at":"2025-04-01T10:40:02.000Z","size":104426,"stargazers_count":27,"open_issues_count":1,"forks_count":8,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-15T17:00:01.652Z","etag":null,"topics":["angular","designer","optimajet","sample","workflow"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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:46:20.000Z","updated_at":"2025-04-06T01:32:10.000Z","dependencies_parsed_at":"2024-05-06T21:29:53.117Z","dependency_job_id":"cebb3016-fdf5-42a8-a183-c6ad6fda852a","html_url":"https://github.com/optimajet/workflow-designer-angular-sample","commit_stats":{"total_commits":66,"total_committers":2,"mean_commits":33.0,"dds":"0.030303030303030276","last_synced_commit":"f403b3f7d042a8859c99634ec8c6908dfb740446"},"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-angular-sample","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/optimajet%2Fworkflow-designer-angular-sample/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/optimajet%2Fworkflow-designer-angular-sample/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/optimajet%2Fworkflow-designer-angular-sample/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/optimajet","download_url":"https://codeload.github.com/optimajet/workflow-designer-angular-sample/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249116231,"owners_count":21215142,"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":["angular","designer","optimajet","sample","workflow"],"created_at":"2024-10-02T22:22:52.356Z","updated_at":"2025-04-15T17:00:24.427Z","avatar_url":"https://github.com/optimajet.png","language":"TypeScript","readme":"# WorkflowEngine Designer for Angular Sample\n\n## Introduction\n\nWorkflowEngine Designer for Angular 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 using Angular. 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. That is all you need for further action.\n\n## Get Started\n\nFirst, you should install a command line utility to work comfortably with your Angular application. For this, run the following command:\n\n```shell\nnpm install -g @angular/cli\n```\n\nAfter executing this command, the Angular command line interface will be globally installed on your computer, and you can proceed to creating our project. For this, also run the following code:\n\n```shell\nng new workflow-designer-angular-sample\n```\n\nAfter execution, these two questions will be asked:\n\n- Use Angular Routing - No;\n- Preferred style sheet language (CSS, SCSS, etc.) - CSS.\n\nAfter confirmation, the Angular project will be created in the `workflow-designer-angular-sample` folder. The `workflow-designer-angular` package must be installed. To start, do the following:\n\n```shell\ncd workflow-designer-angular-sample\nnpm install @optimajet/workflow-designer-angular\nnpm start\n```\n\nNow, the `workflow-designer-angular-sample` folder contains all the necessary files for our web application. Their file hierarchy is presented below (depending on the version used, it may differ):\n\n```\n├── node_modules\n│   └── ...\n├── src\n│   ├── app\n│   │   ├── app.component.css\n│   │   ├── app.component.html\n│   │   ├── app.component.spec.ts\n│   │   ├── app.component.ts\n│   │   └── app.module.ts\n│   ├── assets\n│   │   └── .gitkeep\n│   ├── environments\n│   │   ├── environment.prod.ts\n│   │   └── environment.ts\n│   ├── favicon.ico\n│   ├── index.html\n│   ├── main.ts\n│   ├── poyfills.ts\n│   ├── styles.css\n│   └── test.ts\n├── angular.json\n├── karma.conf.js\n├── package.json\n├── package-lock.json\n├── README.md\n├── tsconfig.app.json\n├── tsconfig.json\n└── tsconfig.spec.json\n```\n\nNow let's go directly to connecting and displaying the Workflow Designer in this web application. First, we should add the WorkflowDesigner styles. For this, add the following import in the `style.css` file:\n\n```css\n@import '~@optimajet/workflow-designer/dist/workflowdesigner.min.css'\n```\n\nNext, we need to set up the Angular component. To do this, open the file `src/app/app.component.ts` and paste the following content:\n\n```typescript\nimport { Component } from '@angular/core';\nimport { WorkflowDesignerComponent } from '@optimajet/workflow-designer-angular';\n\n@Component({\n  selector: 'app-root'\n})\nexport class AppComponent {\n  schemeCode = '\u003cYOUR_SCHEME_CODE_VALUE\u003e';\n  processId = '';\n  designerConfig = {\n    apiurl: '\u003cYOUR_API_URL_VALUE\u003e',\n    widthDiff: 0,\n    heightDiff: 0\n  };\n}\n```\n\nThis code imports the WorkflowDesigner component for use in the markup code, and also sets the necessary parameters for passing them to the WorkflowDesigner component, namely:\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- `designerConfig` - are the direct settings for the Designer indicating all the necessary parameters, namely: the HTTP address of the WorkflowAPI for interacting with the server side of the application (`apiurl`), the difference between the total page width and the width available for the WorkflowDesigner (`widthDiff`), and the difference between the total page height and the height available for the WorkflowDesigner (`heightDiff`) to display the WorkflowDesigner window. For a more detailed list of the parameters, see the **Designer** section of the documentation page about the WorkflowEngine.\n\n\u003e **NOTE:** Be careful with the case of the characters when specifying the parameters. For example: `apiUrl` and `apiurl` are two completely different values.\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 empty string to the `processId`. In case you want to display the Workflow process, assign the empty string to the `schemecode`, and the required value to the `processId` variable of the WorkflowEngine process identifier.\n\n\nThen, paste the following code into the `src/app/app.component.html` file:\n\n```html\n\u003cworkflow-designer \n  [schemeCode]=\"schemeCode\"\n  [processId]=\"processId\"\n  [designerConfig]=\"designerConfig\"\n\u003e\u003c/workflow-designer\u003e\n```\n\nHere the WorkflowDesigner is drawn and its parameters, specified in the `src/app/app.component.ts` file, are initialized.\n\nAnd finally, all that remains is to edit the `src/app/app.module.ts` file as follows:\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { AppComponent } from './app.component';\nimport { WorkflowDesignerModule } from '@optimajet/workflow-designer-angular';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    WorkflowDesignerModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\nHere you just need to add the `WorkflowDesignerModule` initialization, and join it to the parameters of the application module.\n\nNow, run the `npm start` command and your page will display something like that (the Workflow diagram may differ):\n\n![Workflow Engine Designer Sample for Angular](./screens/good-result.png)\n\n## How to Call WorkflowDesigner Functions inside Angular Component\n\nThe `@optimajet/workflow-designer-angular` component is a wrapper over the usual WorkflowDesigner. Some of the most commonly used methods are wrapped in the `@optimajet/workflow-designer-angular` component for convenience. To use them, do the following:\n\n1. Import the `ViewChild` from `@angular/core` into your component, create a class variable using the `@ViewChild` decorator (e.g.`this.workflowDesigner`) of the `WorkflowDesignerComponent` type, and set the value `undefined` to it; in the `WorkflowDesigner` component, assign the value of the variable you created to the `ref` parameter:\n\n   ```javascript\n   import { Component, ViewChild } from '@angular/core';\n   import { WorkflowDesignerComponent } from '@optimajet/workflow-designer-angular';\n   \n   @Component({\n     selector: 'app-root',\n     templateUrl: './app.component.html',\n     styleUrls: ['./app.component.css']\n   })\n   export class AppComponent {\n     workflowDesignerParameters = {\n       schemeCode: '\u003cYOUR_SCHEME_CODE_VALUE\u003e',\n       processId: '',\n       designerConfig: {\n         name: 'wfdesigner',\n         apiurl: '\u003cYOUR_API_URL_VALUE\u003e',\n         templatefolder: '/templates/',\n         widthDiff: 0,\n         heightDiff: 0\n       }\n     };\n   \n     @ViewChild(WorkflowDesignerComponent) workflowDesigner?: WorkflowDesignerComponent = undefined;\n   \n     yourWorkflowFunction() {\n       // Your code here...\n     }\n   }\n   \n   ```\n\n2. Now you can use the methods of the `WorkflowDesigner` component directly in your component:\n\n   ```javascript\n   yourWorkflowFunction() {\n       this.workflowDesigner.methodName();\n   }\n   ```\n\nA complete list of the methods available for use from the `WorkflowDesigner` component is given below:\n\n| Method Name                          | Description                                                  |\n| ------------------------------------ | ------------------------------------------------------------ |\n| clearScheme()                        | Clears the designer, equivalent of creating empty scheme design |\n| getDesignerErrors()                  | Get Workflow Designer Errors\u003cbr/\u003e**Returns** Errors in Workflow Designer |\n| save(successCallback, errorCallback) | Save Workflow scheme\u003cbr/\u003e**successCallback** Function which will be executed if save was successful\u003cbr/\u003e**errorCallback** Function which will be executed if save operation failed |\n| downloadScheme()                     | Download XML file with Workflow Scheme description |\n| upload(uploadType, callback)         | Upload BPMN or XML file.\u003cbr\u003e**uploadType** Upload type, can be 'scheme' or 'bpmn'\u003cbr/\u003e**callback** Function that will be executed after uploading file |\n| isSchemeExist()                      | Check for scheme existence by the scheme code from props. \u003cbr\u003e**Returns** {boolean} If scheme exists true, otherwise, false |\n| isProcessExist()                     | Check for process existence by scheme code and process id given in props. \u003cbr\u003e**Returns** {boolean} If process exists true, otherwise, false |\n| refresh()                            | Refresh data in WorkflowDesigner                             |\n\nIn case you want some methods that are not presented in this table, use the WorkflowDesigner and call its methods directly without wrappers, for example:\n\n```js\nthis.workflowDesigner.innerDesigner.methodName();\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foptimajet%2Fworkflow-designer-angular-sample","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foptimajet%2Fworkflow-designer-angular-sample","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foptimajet%2Fworkflow-designer-angular-sample/lists"}