Workflow Designer SDK

the workflow designer sdk is used to create workflow service docid 3yv38kxhtmuykxynkwcdr and workflow service docid 3yv38kxhtmuykxynkwcdr this sdk is built with react, javascript, tailwind, and diagram js the following document describes the necessary steps to jobs and objectives docid\ bewqlcaf54oqv9pmeonxw install the sdk with that, we’ll discuss the sdk usages and methods provided by the sdk 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 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 and objectives docid\ bewqlcaf54oqv9pmeonxw sample for job workflow (type array of objects) 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 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 import { validate } from "@os1 platform/workflow designer"; ui notes maximum z index used is z index 10