How the Workflow Editor Works

In this document we would be discussing, how the workflow editor works and it’s various functions.

The basic purpose of the editor is that, it enables you to drag and drop the nodes in the editor and lets you edit the properties of the node and do the connection between the nodes. Now let us try and understand how the editor works in more details.

Try to drag and drop the state node from the right side to the editor. When you click on the node, you will see something as shown below:

You can see in the screenshot above that some icons are shown for the node, which denotes various actions that you can do for that node. Now these actions are as discussed below:

• Click to remove that object

  • This is the cross icon, when you click on this icon, you can basically remove that object.

    

• Click and drag to clone and connect the object

  • When you click on this icon, basically you clone the object as well as connect the current object with another object.

    

• Click and drag to clone the object

  • This is the icon, when you click on this, you clone the current object.

    

• Click and drag to connect the object

  • When you click on this icon, basically it enables you to connect the object with another object.

    

Now from the above icons you are able to connect the current object with the other object And/or clone the current object as well.

You can review in the screenshot above, that the state node is now also connected with another object (condition node). Now you can click on the “Arrow” and it will something like:

If you notice above that a small red-cross icon is appearing at the top of the arrow, this icon enables you to remove the arrow i.e. it removes the connection between the two nodes.

Also, once you have established connection between the nodes, then an additional icon appears, when you click on the node as shown here:

So when you click on this icon at the node, this basically enables you to break all the connections that you have made for the node in one go.

At the right hand side panel of the editor IDHub shows you the properties of the current node, as you can see in the screenshot below:

You are then able to edit the properties of the node, as per your workflow requirements.

The editor is also going to show you Errors for the nodes, if there is something wrong with the configuration for that node or some mandatory field is missing as you can review in the screenshot below:

System administrator needs to review all the errors in the custom workflow and correct it, so as to make sure that the workflow is properly implemented and configured.

Zoom in / Zoom out, Full Screen & Undo / Redo Functions

As you can see here in the screenshot below, you can click on the Plus icon in order to zoom in OR you can also click on the minus icon in order to zoom out. We have also provided you undo and redo functions, so you can click on the respective buttons in order to perform the undo and redo. Lastly we have also provided you a small icon (see below screenshot), which when clicked basically makes the browser window full screen. So if you don’t want to distracted from other tabs open in browser window, then you can click on this button in order to make the browser window full screen and then create your workflow in the editor accordingly.

Save as Draft / Cancel / Create Action buttons

We have provided these buttons at the bottom of the workflow creator page. Save as Draft, as the name suggests, it enables you to save the current progress of workflow editor and save it as a draft, so that you can later edit that accordingly.

Cancel button simply takes you out of the current editor, without saving. When you click on the cancel button, the system would show you the following dialog box:

This basically asks you to confirm, whether you want to discard the changes to the workflow that you are creating or not. If you click on YES, then system takes you out of the editor and if you click on NO, then nothing happens and you remain in the current editor in order to continue working on the workflow that you are creating.

And finally the create button as the name suggests, enables you to save and create the workflow.