Workflow Designer SDK

16min
The Workflow Designer SDK is used to create Workflow﻿ and Macros﻿. This SDK is built with React, Javascript, Tailwind, and Diagram-js. 
The following document describes the necessary steps to Objectives﻿ install the SDK. With that, we’ll discuss the SDK usages and methods provided by the SDK.
Installation
Text
npm install @os1-platform/workflow-designer
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 fields with default expression($expr) field values. An example is provided below:
JSON
{
    "ExecutionTaskId1": {
        "inputField1": "$.inputs.fieldNameToFetchValueFrom",
        "inputField2": "$.inputs.inputField2"
    },
    "ExecutionTaskId2": {
        "inputField1": "$.inputs.inputField1",
        "inputField2": "$.inputs.fieldNameToFetchValueFrom",
        "message": "$.inputs.message"
    },
}
{
    "ExecutionTaskId1": {
        "inputField1": "$.inputs.fieldNameToFetchValueFrom",
        "inputField2": "$.inputs.inputField2"
    },
    "ExecutionTaskId2": {
        "inputField1": "$.inputs.inputField1",
        "inputField2": "$.inputs.fieldNameToFetchValueFrom",
        "message": "$.inputs.message"
    },
}
﻿
Import
Import the package in your app, use it as a component, and provide all the required props.
JS
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
/>;
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
JS
interface BaseUrl {
  restUrl: string;
  graphqlUrl: string;
}
interface BaseUrl {
  restUrl: string;
  graphqlUrl: string;
}
﻿
Interface for headers
JS
interface headers {
  requestId: string;
  tenantId: string;
  accessToken: string;
  userInfo?: object;
}
interface headers {
  requestId: string;
  tenantId: string;
  accessToken: string;
  userInfo?: object;
}
﻿
Interface for Tag
JS
interface Tag {
  name: string;
  value: string;
}
interface Tag {
  name: string;
  value: string;
}
﻿
Samples
Objective Workflow
An Objective is one or more execution tasks to be performed as a workflow for a Container or set of Containers at a given location. For more information, see .
Sample for Objective Workflow (type object):
JS
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
      },
    ],
  },
};
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
      },
    ],
  },
};
﻿
Job Workflow
A Job is the sequence of workflows to be executed to complete a single leg of an expected path of an order (point to point). For more information, see Jobs﻿.
Sample for Job Workflow (type array of objects):
JS
allApplicableReasonCodes = [
  {
    value: "R-0070",
    label: "PICKUP_OBJ_SUCCESS",
  },
  {
    value: "R-0071",
    label: "PICKUP_OBJ_FAILURE",
  },
];
allApplicableReasonCodes = [
  {
    value: "R-0070",
    label: "PICKUP_OBJ_SUCCESS",
  },
  {
    value: "R-0071",
    label: "PICKUP_OBJ_FAILURE",
  },
];
﻿
Dynamic Values in Form Execution Tasks
Form Execution Tasks (ET) in Workflow Designer enable admin users to incorporate various input fields such as text boxes, radio buttons, and more into their workflows. These fields prove useful for gathering real-time input data when the workflow requires it. As admins design the flow, they can configure Form ET to accept dynamic values.
Incorporating Dynamic Values
Follow the steps below to incorporate dynamic values into Form ET.
Choose the Input Field
Select the desired input field, (e.g., Drop Down) for your workflow
Configure 'Unique Key' Parameter
The unique key parameter in the configuration section of Form ET contains the identifier for the data expected to come at runtime. For example, if the unique key = phoneNumbers, you can include the same parameter in the input from the Dispatch SDK
Set up the Choices Parameter
Use the choices parameter to define the path that identifies the values. The path should start with $.meta.phoneNumbers in the choices parameter. This ensures that the data is properly resolved when accessing the path during runtime.
Methods
The Workflow Designer SDK provides the following methods:
Save the workflows as draft or publish:
saveAsDraft: Save the workflow as a draft that can be fetched afterward.
publish: Publish the workflow so that it can be used in a live workflow.
JS
import { saveAsDraft, publish } from "@os1-platform/workflow-designer";
import { saveAsDraft, publish } from "@os1-platform/workflow-designer";
﻿
Validate the workflow before publishing:
validate: Validate the workflow to know whether the flow made on the canvas is valid or not. Workflow can be published only if it is valid.
JS
import { validate } from "@os1-platform/workflow-designer";
import { validate } from "@os1-platform/workflow-designer";
﻿
UI Notes
Maximum z-index used is z-index: 10.