How do I use RequireJS to load dependencies inside a workflow in IDM 6?
The purpose of this article is to provide information on loading dependencies (external libraries) inside a workflow using RequireJS. You might want to load dependencies to either reuse JavaScript® methods, or call standard jQuery or jQuery UI functions. An example is given in this article to embed the jQuery UI Datepicker function in a workflow.
Note
This article does not apply to IDM 6.5 and later because they use the Vue JS framework instead.
Background information
Key things to understand about loading dependencies inside a workflow:
- Workflow definitions are managed by Activiti; the JavaScript engines used by Activiti do not support CommonJS, which includes RequireJS. This means you need to load the RequireJS library (r.js) in order to load dependencies:
- JDK 8 uses the Nashorn JavaScript engine, which does not support CommonJS.
- Activiti uses the JVM's ScriptEngineManager to locate a supported JavaScript engine, which means the JDK's embedded version of Rhino is always used instead of the version bundled with IDM (which does support CommonJS).
- Workflow XHTML forms utilize the UI library loading mechanism; the library loading mechanism in the IDM UI is based on RequireJS:
- Workflow forms are loaded as follows:
- The UI interrogates the workflow engine via a REST call.
- It extracts the form definition from the process definition.
- It dynamically renders it using different mechanisms based on the form type.
- The entire form file is loaded with RequireJS provided you use the recommended activiti:formKey attribute to refer to the HTML template in the workflow definition. See Using Custom Templates for Activiti Workflows for further information.
- Module Loader is available from within the form since Module Loader has jQuery in its scope (as '$').
- jQuery is included in the UI dependencies.
- jQuery-ui is not included in the UI dependencies, which means jQuery UI functions are not available by default in the UI. To use jQuery UI functions, you therefore need to load them from the form using RequireJS.
- Workflow forms are loaded as follows:
Loading dependencies using RequireJS
You can load external libraries within a workflow using RequireJS as follows, depending on where the call is coming from:
- Workflow definition - scriptTask: <scriptTask id="test" name="Test Task" scriptFormat="javascript" activiti:autoStoreVariables="false"> <script> load("path/to/r.js"); require(["path/to/module"], function(module) { //some code}); </script> </scriptTask>
- Workflow XHTML form: <script> require(["path/to/module"], function(module) { //some code}); </script>
Datepicker example
You can load jQuery UI functions using RequireJS. The following example demonstrates this by loading the jQuery UI Datepicker function into a workflow XHTML form:
- Include the following in your workflow XHTML form to provide the Datepicker input, load the jQuery-ui library and dynamically load the CSS: <div class="form-group"> <p>Enter Date: <input type = "text" id = "datepicker"></p> </div> ... <script> function loadCss(url) { var link = document.createElement("link"); link.type = "text/css"; link.rel = "stylesheet"; link.href = url; document.getElementsByTagName("head")[0].appendChild(link); } $(document).ready(function() { loadCss("https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css") require(["https://code.jquery.com/ui/1.10.4/jquery-ui.js"], function() { $( "#datepicker" ).datepicker(); }) }); </script>
The above example code renders a Datepicker in the workflow form as follows:
See Also
How do I use workflow scripts to make calls back to IDM 6.x?
Integrating Business Processes and Workflows
Related Training
N/A
Related Issue Tracker IDs
N/A