FtWorkflow

This library was generated with Angular CLI version 18.2.0.

Overview

This library contains a Workflow Management System built using Angular 18 and the drawflow plugin. The system allows users to create, update, and manage workflows visually, with each action represented as a node in the workflow. The JSON structure generated by the drawflow plugin is essential for API calls and UI rendering.

Npm Package url

https://www.npmjs.com/package/ft-workflow

Dependencies

• Angular: v18.
• Nodejs: v18.19.1.
• nvm: v0.39.5.
• npm: v10.2.4.

Library Setup

• Go to you project.

# Install dependencies
npm install ft-workflow@latest --force

# Install below libraries
npm install bootstrap@latest --force
npm install @fortawesome/fontawesome-free --force
npm install @popperjs/core --force

# Also install all dependencies
npm install --force

• Add the below code to angular.json file to initialize dependencies

"styles": [
  "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.scss"
],

• Add routings to use the library component

export const routes: Routes = [
  { path: '', loadChildren: () => import('ft-workflow').then(m => m.FtWorkflowModule) },
  { path: '', redirectTo: '', pathMatch: 'full' }
];

• Add library tag to view in html

<lib-ft-workflow></lib-ft-workflow>

• Import FtWorkflowComponent

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet,FtWorkflowComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})

• To get the list of workflows

# Import FtWorkflowModule

import {FtWorkflowComponent, FtWorkflowModule, LocalstorageService} from "ft-workflow";

export class AppComponent {
  constructor(private localstorageService: LocalstorageService) {
    this.getData();
  }
  getData(){
    const workflowData = this.localstorageService.getItem('workflowData');
  }
}

• To get the workflow based on srNo.

import {FtWorkflowComponent, FtWorkflowModule, LocalstorageService} from "ft-workflow";

export class AppComponent {
  constructor(private localstorageService: LocalstorageService) {
    this.getWorkflowBySrNo();
  }
  getWorkflowBySrNo(){
    const selectedWorkflow = this.localstorageService.getSingleItemData(1)
  }
}