SAP Workflow – Graphical view in UI5 using D3

Most of you are aware of SAP Workflow and workflow builder transaction PFTC or SWDD which displays workflow design time graphical view. This is where we model workflow templates. Workflow runtime tools also have capability display this modelled template with runtime information to show how the current workflow instance is being executed.

Would it be possible to display this modelled template in UI5?

Workflow template in UI5

How about creating a control to render SAP workflow graphical view in UI5?  That was the question that I asked myself late last year. COVID forced holiday at home, here my attempt to create that control.

Below is a sample workflow graphical view, this is of course without icons that are shown in workflow editor. Icons to denote step(node) type can be added, but not done here.

Workflow graph in UI5 control

In Workflow editor

How?

Obviously to render this template in UI5, we need workflow design time data. SAP Workflow graph is kind of flowchart but is little different. SAP internally saves the definition in bunch of tables (SWDSMLINES, SWDSMNODES etc.,) as you can expect. Idea is to read these tables and generate the graph in UI5 using d3. Check function module SWD_GET_WORKFLOW_DEFINITION if you are interested in workflow definition data.

From workflow definition data, noticed that nodes have X and Y positions. So created a wireframe with blocks and positioned the nodes inside this, that was easy with d3. I won’t go into details of how nodes can be placed in SVG using d3 functions, but you can find a lot of examples here

Thought connecting these nodes using quadratic or cubic-bezier curves should also be easy enough as we know the positions of the nodes. But these curves do not respect existence of other nodes and line would overlap on nodes in it’s path.  Also these lines would not create a symmetric graphical view that looked nicer. So had to figure out logic to find SVG line path to connect nodes. Basically determine where successor node exists in the matrix and then derive path. While drawing this path, determine where the curves should be. These lines are nothing but SVG path element with quadratic curves.

Next steps

Tested on couple of templates with varying complexity and worked ok, but  may not be complete and may not work for all complex templates out there. This is still work in progress, improvements on this would be add icons, make connector nodes (rounded rectangles with circle inside in the graphic above) disappear or make them more subtle. Detect multiple lines starting from same point and distribute them more evenly etc.

This is another demonstration of using d3 to draw a graph and integrating it with UI5. Most of the code is in d3 routines and UI5 provides only a container for SVG elements. Now this can be extended to display other information about workflow nodes and those would be UI5 controls like dialogs.

You can find the control here and data that I used for the above graphic here