Workflow Designer: Integration
Reading time: 3 minutes
Reading time: 3 minutes
Being a software developer I have noticed that the most difficult aspect of working with WorkflowDesigner is its integration into multi-framework projects, especially those using different CSS Frameworks (for ex. Bootstrap or Mechanical). That is why I have decided to try and clear some issues up and created an example of such integration. For my experiment I have chosen Angular-based ASP.NET Boilerplate, a general purpose application framework which uses both Bootstrap and Mechanical.
Integration of different frameworks often causes Javascript global function and styling conflicts. Try integrating Semantic UI framework* into ASP.NET Boilerplate and you'll know what I mean!
*WorkflowDesigner uses Semantic UI for dialog editing
For more information on modal window problems see Screenshot 1. It turns out that some global functions are named equal in Bootstrap and Semantic UI which results in frameworks overlap and dialog and Z-index errors show up.
Scr. 1
I solved this problem quite easily by replacing styles (see Screenshot 2), but it in turn caused two more errors: incorrect checkbox appearance and page reload after clicking Create.
Scr. 2
These errors can also be debugged in a CSS, but further problems are still unavoidable. In such complex cases I suggest we should use IFrame integration.
IFrame is a powerful element and if used wisely it can help insert website content even in most complicated situations. It also allows to isolate JavaScript functions within itself.
First of all let's create a basic HTML-page in DIV, which will be used for WorkflowDesigner layout, and call it designer.html.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Workflow Engine Designer</title>
</head>
<body>
<script src="/assets/workflow/scripts/jquery.js" type="text/javascript"></script>
<script src="/assets/workflow/scripts/semantic.min.js" type="text/javascript"></script>
<script src="/assets/workflow/scripts/konva.min.js" type="text/javascript"></script>
<script src="/assets/workflow/scripts/ace.js" type="text/javascript"></script>
<script src="/assets/workflow/scripts/json5.js" type="text/javascript"></script>
<script src="/assets/workflow/scripts/jquery.auto-complete.min.js" type="text/javascript"></script>
<script src="/assets/workflow/scripts/workflowdesigner.min.js" type="text/javascript"></script>
<link href="/assets/workflow/styles/semantic.min.css" rel="stylesheet" type="text/css" />
<link href="/assets/workflow/styles/workflowdesigner.css" rel="stylesheet" type="text/css" />
<div id="wfdesigner"></div>
</body>
</html>Next we shall embed IFrame code into our application, setting the src attribute to the path that goes to designer.html page.
<iframe id="designer" src="/assets/workflow/designer.html"
frameborder="0"
border="0"
cellspacing="0"
style="border-style: none;width: 100%; height: 600px;"
>
</iframe>We have embedded styles and scripts and positioned the DIV over the frameset, and it's high time we initialized WorkflowDesigner. Mind that as the designer script was included into the frameset, the WorkflowDesigner variable will also be stored in the frame.
var contentWindow = window.frames["designer"].contentWindow;
this.wfdesigner = new contentWindow["WorkflowDesigner"]({
name: 'simpledesigner',
apiurl: '<api url>',
renderTo: 'wfdesigner',
imagefolder: '/assets/workflow/images/',
graphwidth: this.contentWindow.innerWidth,
graphheight: this.contentWindow.innerHeight
});
this.wfdesigner.create();Now there is no styling conflict and WorkflowDesigner is supposed to be displayed correctly. The JavaScript operation codes for WorkflowDesigner will be located on one of the pages of the main app. What's left to do is to write such basic functions as Load, Save, Resize, Download and Upload.
In this article I have briefly described the problem-solving approach which is highly recommended if you want to avoid design difficulties when dealing with script and styling conflicts as a result of WorkflowDesigner integration into multi-framework projects. For more information see the GitHub example. All changes made to the original ASP.NET Boilerplate template have been tagged WorkflowEngineSampleCode, so you could track them easily.