How To

How do I use RequireJS to load dependencies inside a workflow in IDM 5.x, 6 and OpenIDM 4.x?

Last updated Apr 17, 2019

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. This information does not apply to IDM 6.5 and later because that uses the Vue JS framework.


Background information

Key things to understand about loading dependencies inside a workflow:

  • Workflow definitions are manged 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.
    • JDK 7 uses the Rhino JavaScript engine bundled within the JVM; this version of Rhino is pre-CommonJS support.
    • 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/OpenIDM (which does support CommonJS). 
  • Workflow XHTML forms utilize the UI library loading mechanism; the library loading mechanism in the IDM/OpenIDM UI is based on RequireJS:
    • Workflow forms are loaded as follows:
      1. The UI interrogates the workflow engine via a REST call.
      2. It extracts the form definition from the process definition.
      3. 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 Integrator's Guide › 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.

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:

  1. 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/OpenIDM (All versions)?

How do I migrate my existing BPMN workflows after upgrading to IDM 5.5 or applying Security Advisory #201705?

Integrator's Guide › Integrating Business Processes and Workflows

Related Training

N/A

Related Issue Tracker IDs

N/A



Copyright and TrademarksCopyright © 2019 ForgeRock, all rights reserved.
Loading...