Workflow Designer SDK

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.


npm install @os1-platform/workflow-designer




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 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-
  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",

    restUrl: "https://{tenant}.{env}",
    graphqlUrl: "https://{tenant}.{env}",
    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;


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",


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.