Workflow Designer

Introduction

This package is used to create objective and job workflows. Built with React, Diagram-js, Javascript, Tailwind.

Installation and Usage

Peer dependencies:

{
  "@apollo/client": ">=3.6.9",
  "axios": ">=0.27.2",
  "graphql": ">=15.5.1",
  "react": ">=17.0.2"
}

Installation

npm install @os1-platform/workflow-designer

Usage

NOTE: Add a json file in the public folder of the application named expressionConfig.json containing all the field with default expression($expr) field values.Example:

{
    "ExecutionTaskId1": {
        "inputField1": "$.inputs.fieldNameToFetchValueFrom",
        "inputField2": "$.inputs.inputField2"
    },
    "ExecutionTaskId2": {
        "inputField1": "$.inputs.inputField1",
        "inputField2": "$.inputs.fieldNameToFetchValueFrom",
        "message": "$.inputs.message"
    },
}

//import the package in your app, use as a component and provide all the required props
import WorkflowDesigner from "@os1-platform/workflow-designer";


NOTE: Required API endpoints-
```js
  GRAPHQL_SERVER: "graphql", (for graphqlUrl)
  (for restUrl)
  WORKFLOWS: "workflow-wrapper/workflows",
  MACROS: "workflow-wrapper/macros",
  DRAFTS: "workflow-wrapper/drafts",
  JOBS: "workflow-wrapper/job-workflows",
  JOBS_DRAFTS: "workflow-wrapper/job-drafts",
```

<WorkflowDesigner
baseUrl={{
    restUrl: "https://{tenant}.{env}.example.io/",
    graphqlUrl: "https://{tenant}.{env}.example.io/graphql/",
  }}
headers={{
    tenantId: "", // pass tenantId (mandatory)
    accessToken: "", // pass accessToken (mandatory)
    requestId: "", // pass requestId (mandatory)
    userInfo: {}, // pass userInfo (optional)
  }}
designerType="OBJECTIVE | JOB"
workflowId="" // pass workflow id to open a workflow
allApplicableReasonCodes={{}} //format for applicable reason codes is mentioned below
defaultExpressionsFilePath="" // path to file where the default expression value is stored, MANDATORY for Objective Workflow. Not needed for JOB-WORKFLOW
searchTagsOptions={Array<Tag>} // list of Tags, to filter objective listing in Job Workflows. Format for tag is mentioned below.
connectionType="STRAIGHT | CURVED | BOTH" // (optional) connection type prop to enable straight-connections or curved-connections on canvas. default -> CURVED
/>;

// Interface for baseUrl
interface BaseUrl {
  restUrl: string;
  graphqlUrl: string;
}

// Interface for headers
interface headers {
  requestId: string;
  tenantId: string;
  accessToken: string;
  userInfo?: object;
}

// Inteface for Tag
interface Tag {
  name: string;
  value: string;
}

//sample for objective workflow (type object)
allApplicableReasonCodes = {
  ET_ID1: {
    // Execution task id
    "E-010": [
      //success RCs
      {
        value: "R-011", //reason code
        label: "PICKUP_DONE", //reason code title/label
      },
    ],
    "E-011": [
      //failure RCs
      {
        value: "R-019", //reason code
        label: "REFUSED_TO_SIGN", //reason code title/label
      },
    ],
  },
  ET_ID2: {
    // Execution task id
    "E-010": [
      //success RCs
      {
        value: "R-012", //reason code
        label: "DELIVER_DONE", //reason code title/label
      },
    ],
    "E-011": [
      //failure RCs
      {
        value: "R-021", //reason code
        label: "CONSIGNEE_UNAVAILABLE", //reason code title/label
      },
    ],
  },
};

//sample for job workflow (type array of objects)
allApplicableReasonCodes = [
  {
    value: "R-0070",
    label: "PICKUP_OBJ_SUCCESS",
  },
  {
    value: "R-0071",
    label: "PICKUP_OBJ_FAILURE",
  },
];

Methods

Methods provided via sdk:

1. Save the workflows as draft or publish:

import { saveAsDraft, publish } from "@os1-platform/workflow-designer";

2. Validate the workflow before publishing:

import { validate } from "@os1-platform/workflow-designer";

UI Notes

1. Max z-index used is z-index: 10.