IBM Business Automation Workflow Creating a Reusable JavaScript Library
Setting up and using reusable JavaScript libraries.
Authors: Leonard Blunt, Greg Ekaprana, Okka Sudaryanto, Diorella Mari Tom
Introduction
In the process of developing workflows, it is not unusual to see an evolution of many duplicate JavaScript functions. Our time in writing and debugging code can be saved through the establishing of reusable scripts and functions.
This article will show how to setup reusable JavaScript functions for IBM Business Automation workflow.
Building Reusable JavaScript Function using Web Files
Reminder: When developing using Web Files, it is advisable to test it beforehand. If the system catches an error from Web and/or Server files, it will cause the entire application showing the error of the file rather than the module that using the function from the file.When writing Coach Views and Service Flows for IBM Business Automation Workflow projects their same functions will inevitably be created in several Client-Side Human Services, Coach Views, and Service Flows. We recommend you set out to discover these as quickly as possible so that you can promote reuse within the project team saving the time to write and debug similar code multiple times.
Timing is somewhat key here you need to start promoting reuse early in the development cycle and promote the reuse culture within the development team. The value of a common script library is significantly diminished if done as an afterthought, we typically do not recommend refactoring of code to achieve it. So, it is best done as a forward engineering approach.To minimize the time wasted in repetitive coding, developers can work create a library of reusable functions which get uploaded as JavaScript (.js) files to the Web/Server Files in the process Application. If you are working collaboratively with multiple developers, you should organize the way developers keep track, create, update and deploy the code. Use also tools to help with the process such as git. BAW process designer can’t directly integrate with external development tools but one practice we can do with git is by keeping the files in the git repository and only upload the latest .js files to BAW Web/Server files.
IBM Business Automation Workflow has a specific template for the JavaScript File that must be followed in order for it to read the functions inside a script file. The template requires that the developer:
- Check whether the name of the Function Library or Object already used inside the IBM Business Automation Workflow naming space Function or JavaScript in general. In order to minimize the conflict, it is advisable to name the Function Library by using uppercase for each first letter from each word and using the JavaScript name as the prefix for each function. The example for this part will be shown below.
- Check whether the name of the Function already used inside the IBM Business Automation Workflow naming space Function or JavaScript in general. As the file created outside the system, it’s suggestible to create the file for specific sets of function (i.e. JavaScript for processing date data, JavaScript for processing string data, etc.) and make documentation for the function.
An example of the syntax for these two checks follows
if(typeof <name of the Function Library> !== "object"){
<name of the Function Library> = {};
}//Function Structure
(function (){
if(typeof <name of the Function Library>.<name of function>
!== "function"){
//Put your code here
}//You can put more than one function. But remember to add the
//check around the function code.}());
Example of how this looks with two simple date functions follows:
if(typeof CheckDate !== "object"){
CheckDate = {};
}(function(){
// Function to parse Date to String
if(typeof CheckDate.parseDate !== "function"){
/**
* Parse a Javascript Date to a string format
* in: Date
* out: "dd/MMM/YYYY"
*
* Date Change By Comment
* =================================================
* 05/12/2019 G.Ekaprana Created
*
*/
checkDate.parseDate = function(val){
var listMonth = ["Jan", "Feb", "Mar",
"Apr", "May", "Jun",
"Jul", "Aug", "Sep",
"Oct", "Nov", "Dec"];
var myDate = new Date(val);
var day = mydate.getDate();
var month = myDate.getMonth();
var year = myDate.getFullYear();return day + "/" + listMonth[month] + "/" + year;
}
}if(typeof CheckDate.addDate != "function"){
/**
* Add two dates together
* in: First Date, Second Date
* out: "dd/MMM/YYYY"
*
* Date Change By Comment
* =================================================
* 05/12/2019 G.Ekaprana Created
*
*/
CheckDate.addDate = function(val, add){return val.setDate(val.getDate() + add);
}
}
}());
After a developer creates their script file the file needs to be uploaded into the Process Application.
Upload and Update Reusable JavaScript
To use the JavaScript script to Coach View or Service Flow, the JavaScript files need to be uploaded to the system. Here are the steps on how to upload the file to the system:
- Click the ‘File’ tab and click on the ‘+’ sign. It will show three types of New File to be uploaded (Web File, Server File, and Design File)
- Click Server File and it will prompt a pop-up window.
- Choose a file from your Local Computer by clicking on the document icon
- After you finished uploading the file, click the ‘Finish’ button.
When you are in the middle of the development, there will be an instance where the JavaScript file needs to be updated for a new function from the local machine and we need to update the file in the IBM Business Automation Workflow itself. Here are the steps on how to update the document:
- Click the ‘Files’ tab. It will show the list of File uploaded to the IBM Automation Workflow.
- Choose the file you want to be updated. It will show the page information of the file.
- Click on the small folder icons beside the file upload area as shown in red.
- After you finished uploading the file, click the ‘Upload’ button
Using a Reusable Script in a Service Flow
To use a reusable function in the Service Flow:
- Make sure that the file is uploaded to the WebFiles in the process application.
- Use the syntax <name of the Function Library>.<name of the Function>to call the function:
For example, let’s use the parseDate function from our earlier example:
...
var date = new Date();
var myDateString = CheckDate.parseDate(date);
//Continue your code hereUsage a Reusable Script in a Coach View
To use a reusable script Coach View
First, put the files into the ‘Included Scripts’ on your coach view by clicking the add (+) sign on the ‘Included Scripts’ folder and choose the file(s) that contain the scripts needed.
Once the script files are in place, the functions may be called from within the scripts of the coach view. Use this syntax:
<name of the Function Library>.<name of the Function>
Here is an example of calling functions:
...
var date = this.ui.get('dtp1').getDate();
var pDate = CheckDate.parseDate(date);
...This script only applies for Inline Script of the Coach View.
Drawback for using JavaScript File
When using JavaScript File as the reusable function in IBM Business Automation Workflow, there will be some drawbacks, and these are:
- It is hard to know whether the function is already created or not. To minimize a repeatable function, it is better to make documentation or git for each file. The documentation and/or the git should be accessible for the developer.
- There is no searchable document function in IBM Business Automation Workflow. Because of that, the file documentation and/or git is vital if working with a lot of developers.
