Workflow-UI is a diagramatic web ui tool to create workflows in a visualize way using different controls and convert into a generic json format. It allows controls to be drag and drop with editable facility and also customizable output json.
- Why Workflow-UI v2.0.0
- Usage
- Technologies used
- Backend APIs
- How to Build, Run & Deploy
- Future release
- Drag/Drop facility for drawing workflows
- Debugger window (Displaying instant
jsondata andco-ordinatedetails for control/connectors) - Simple for use and great visualization
- Customizabe json data object format
- Drag connection from each direction of control and connect to any direction
- Movement of arrows
- key binding for movement
- On screen mouse click movement
- Toggle Yes/No direction in condition control
- Toggle expand/collapse for propery/control/link bars
- Angular CLI version 6.1.1.
- SVG (for drawing different shapes control)
- bootstrap version 4.1.3
- ngx-bootstrap version 3.0.1
- font-awesome version 4.7.0
Following API endpoints are configued in ui to fetch and post data from backend.
Find all the api endpoints in api-client file from below path
workflow-ui/src/app/apiclient/api-client.service.ts
Response format of each end points
GET: http://apidomain/workflows/getsteptypes
200 OK,
// response data
[{
stepType: 'WorkflowCore.Service.Demo.HelloWorldService',
stepName: 'HelloWorldService',
assembly: 'WorkflowCore'},
{ stepType: 'WorkflowCore.Service.Demo.AddNumbers',
stepName: 'AddNumbers',
assembly: 'WorkflowCore'},
{ stepType: 'WorkflowCore.Service.Demo.PrintMessageService',
stepName: 'PrintMessageService',
assembly: 'WorkflowCore'
}]
GET: http://apidomain/workflows/DataContextAttributes
200 OK,
// response data
{
Input: ['Value1', 'Value2', 'Value3', 'message'],
Output: ['Value1', 'Value2', 'Value3', 'Result']
}
GET: http://apidomain/workflows/GetAllWorkflows
200 OK,
// response data
[
{
"id": 1,
"name": "untitled_template_1",
"jsonObject": "{\"controls\":[{\"id\":1,\"type\":\"circle\",\"cordinate\":{\"x\":\"386\",\"y\":\"61\"},\"nextId\":[2],\"data\":{\"Id\":\"Start\",\"StepType\":\"Start\",\"NextStepId\":\"\"},\"isSelected\":false,\"isMultiConnect\":false,\"conditionYesId\":[],\"isIntial\":false},{\"id\":2,\"type\":\"activity\",\"cordinate\":{\"x\":\"269\",\"y\":\"191\"},\"nextId\":[3],\"data\":{\"Id\":\"Activity1\",\"StepType\":\"WorkflowCore.Service.Demo.PrintMessageService, WorkflowCore\",\"NextStepId\":\"\"},\"isSelected\":false,\"isMultiConnect\":false,\"conditionYesId\":[]},{\"id\":3,\"type\":\"circle\",\"cordinate\":{\"x\":398,\"y\":\"401\"},\"nextId\":[],\"data\":{\"Id\":\"End\",\"StepType\":\"Start\",\"NextStepId\":\"\"},\"isSelected\":false,\"isMultiConnect\":false,\"conditionYesId\":[],\"isIntial\":false}],\"links\":[{\"id\":1,\"fromId\":\"1\",\"toId\":2,\"cordinate\":{\"x1\":\"386\",\"y1\":81,\"x2\":344,\"y2\":\"191\"},\"fromDirection\":\"down\",\"direction\":\"down\",\"isSelected\":false},{\"id\":2,\"fromId\":\"2\",\"toId\":3,\"cordinate\":{\"x1\":344,\"y1\":241,\"x2\":398,\"y2\":381},\"fromDirection\":\"down\",\"direction\":\"down\",\"isSelected\":false}],\"parsedData\":{\"Id\":\"untitled_template_1\",\"DataType\":\"WorkflowCore.Models.DataContext, WorkflowCore\",\"Version\":\"1\",\"Steps\":[{\"Id\":\"Activity1\",\"StepType\":\"WorkflowCore.Service.Demo.PrintMessageService, WorkflowCore\",\"NextStepId\":\"\"}]}}",
"status": "active",
"addedOn": "Mon Sep 24 2018 12:08:05 GMT+0530 (India Standard Time)",
"_id": "b49714d9aa46481db7d86d47e3b9831e"
}
]
- Run
npm installto install all the dependencies used in this app (availabe inpackage.jsonfile) - Run
ng buildto build the project. - The build artifacts will be stored in the
dist/directory. Use the--prodflag for a production build. - Run
ng serveto run in local server. (it will run inhttp://localhost:4200the default port of angular-cli server, to run in different port useng serve --port=<YOURPORT>) - For deployment run
ng buildand deploy thedist/directory contents to any http server.
- Resizing the controls
- New controls in toolbar
- Real-time status notification of each workflow steps while executing from backend (using message queue)
- Undo/Redo feature
- Export/Import workflow json from local drive
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent