Displaying a Process Flow Diagram in Nintex Form

As named, if you would like to include a high level “process flow diagram” on a form, here is my sharing on direction and quick start to do that. The concept and requirement I got here is a high level process state diagram of the document/process flow, showing Past, Current, and Future state of the business process on the form. The diagram below shows the sample outcomes of the form on Office 365 with a Process Flow/State Diagram in the top banner of the form.

The solution is accomplished by flowchart.js Javascript Library which is based on Raphaël—JavaScript Library​. It draws the “Process Flow Diagram” on the fly when the Form is open for viewing or editing. The data of the diagram is saved as “Multiple lines of text” column of the Sharepoint list, as such it could be updated by Nintex workflow action(s) to change the state of the flowchart when needed. I have named my “Multiple lines of text” in my example as “WorkflowStatus“, which is linked to Nintex Form’s “Multi line textbox” as shown in the below diagram.

The two Javascript libraries (http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js ​, http://flowchart.js.org/flowchart-latest.js ) to be included in the Form settings as shown here.

Include the following “Custom Javascript” to the “Form Settings“. Line 3 to 10 in the script defines the diagram to be displayed. Line 37 to line 73 are attributes of the diagram allowing you to define the attributes such as color code, line length, etc. of the diagram. (i.e. you may refer to flowchart.js​ on all the available settings).

NWF$(document).ready(function(){  
    var code    = 'st=>start: Start\n'
            + 'e=>end\n'
            + 'op1=>operation: Manager Approval\n'
            + 'op2=>operation: Finance Approval\n'
            + 'op3=>operation: Procurement\n'
            + 'st(right)->op1(right)->op2(right)->op3(right)->e\n'
         ;

  if (NWF$('#'+workflowstatus).val()==''){
  NWF$('#'+workflowstatus).val(code);
  }

  NWF$("div.nf-filler-control[data-controlname^='WorkflowStatus']").add("div.nf-filler-control[data-controlname^='workflowstatus']").each(function () {    
       var codeUI = NWF$(this).find("div.nf-filler-control-inner");        
       var codeO365View = NWF$(codeUI).find("div");        
       var codeO365Edit = NWF$(codeUI).find("textarea");    
       var codeOnPrem = NWF$(codeUI).find("input[type=text]");    
       var codeContent;     

    if (codeOnPrem.length != 0) {   
        codeContent = codeOnPrem.val();    
       } else if (typeof codeO365Edit.val()== 'undefined') {
    codeContent = codeO365View.html().replace(/<br>/g,'').replace(/&gt;/g,'>');
    } else {
    codeContent = codeO365Edit.val()
    }   

       //codeContent = ((typeof codeO365Edit.val()== 'undefined')? codeO365View.html().replace(/<br>/g,'').replace(/&gt;/g,'>'): codeO365Edit.val());   
    codeUI.css('visibility','hidden');
    codeUI.after('<div id="canvas"></div>');
    codeContent = ((codeContent == '') ? code : codeContent);
       var chart = flowchart.parse(codeContent);
       chart.drawSVG('canvas', {
                      // 'x': 30,
                      // 'y': 50,
                      'line-width': 3,
                      'line-length': 25,
                      'text-margin': 5,
                      'font-size': 14,
                      'font': 'normal',
                      'font-family': 'Helvetica',
                      'font-weight': 'normal',
                      'font-color': 'black',
                      'line-color': 'black',
                      'element-color': 'black',
                      'fill': 'white',
                      'yes-text': 'yes',
                      'no-text': 'no',
                      'arrow-end': 'block',
                      'scale': 1,
                      'symbols': {
                        'start': {
                          'font-color': 'red',
                          'element-color': 'green',
                          'fill': 'yellow'
                        },
                        'end':{
                          'class': 'end-element'
                        }
                      },

                      'flowstate' : {
                        'past' : { 'fill' : '#CCCCCC', 'font-size' : 12},
                        'current' : {'fill' : 'yellow', 'font-color' : 'red', 'font-weight' : 'bold'},
                        'future' : { 'fill' : '#FFFF99'},
                        'request' : { 'fill' : 'blue'},
                        'invalid': {'fill' : '#444444'},
                        'approved' : { 'fill' : '#58C4A3', 'font-size' : 12, 'yes-text' : 'yes', 'no-text' : 'no' },
                        'rejected' : { 'fill' : '#C45879', 'font-size' : 12, 'yes-text' : 'n/a', 'no-text' : 'REJECTED' }
                      }
                    });
  });
});

As my actual workflow is performing a series of complex workflow actions, I do not expect the business users to visit for details such as which state it is executing, I include the following sample workflow actions to update the “Multiple lines of text” item property which will reflect the “Process Flow Diagram” on the Form for business users.

I am leaving the update of the “Multiple lines of text” open as I believe it could be or should be done in a better approach than my sample here….