Workflow Designer SDK

Suggest Edits

The Workflow Designer SDK is used to create Execution Workflows and Macros. This SDK is built with React, Javascript, Tailwind, and Diagram-js. See Workflow Documentation to learn more about Workflow.

The following document describes the necessary steps to install the SDK. With that, we’ll discuss the SDK usages and methods provided by the SDK.

📘

Workflow Wrapper API

Check out the API Reference section to try out the Workflow Wrapper API.

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 fields with default expression($expr) field values. An example is provided below:

{
    "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.

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;
}

Interface for Tag

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 Objectives.

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
      },
    ],
  },
};

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):

allApplicableReasonCodes = [
  {
    value: "R-0070",
    label: "PICKUP_OBJ_SUCCESS",
  },
  {
    value: "R-0071",
    label: "PICKUP_OBJ_FAILURE",
  },
];

Methods

The Workflow Designer SDK provides the following methods:

  1. 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. 
import { saveAsDraft, publish } from "@os1-platform/workflow-designer";
  1. 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. 
import { validate } from "@os1-platform/workflow-designer";

UI Notes

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

Updated 5 months ago