DOJO Multiselect control for IBM BPM

What is multiselect?

Control with ability to select multiple items. In IBM BPM we have option to make a dropdown as multiselect but it does not look good as we will have rows of values with checkbox.

With multiselect control, it is easy to select the values and also widget looks good with scrolling option if values are more.

So below are few steps to create a custom multiselect control in IBM BPM.

Step 1: Create a coach view and name it as multiselect. Drag an vertical section to layout area and create an output text for label and a custom HTML control as shown below.

Step 2: Create a variable to map the selected values as ‘Business Data’.

Step 3: Create a configuration option to map ajax service to get the values dynamically as shown below.

Step 4: In the custom HTML space paste the below code, where dom node with id ‘multiselect’ will have the multiselect control.

<select id=”multiselect”></select>
<style>
#dynamic{
height: 130px;
width: 180px;
}
</style>

here specifying height and the width is important.

Step 5: Create required AMD dependencies as shown below.

Step 6: Write the below code in ‘load’ event handler.

//Input for Ajax service. Here we don’t need it.
var inputText = {text: “Dummy”};
//Get the URL to call the ajax
var ajaxUrl = this.context.options.dataService.url;
var customers = [];
var _self = this;
//Prepare AJAX call
var xhrArgs = {
//Set the URL
url: ajaxUrl,
content: JSON.stringify(inputText),
//Specify the result type expected
handleAs: “json”,
//Headers are required when we run this in Mozilla or IE. Could not find why.
headers: {
“Content-Type”: “application/json”,
“Accept”: “application/json”,
},
load: function(response) {
//Copy the result to an object
customers = response.data.data.results.items;
//Get the dom using the id
var sel = dom.byId(‘multiselect’);
var n = 0;
//Loop for values and append it to the node inner HTML
for(var i=0;i<customers.length;i++){
//Creating element of type option as needed by any select controls
var c = win.doc.createElement(‘option’);
c.innerHTML = customers[i];
c.value = n++;
sel.appendChild(c);
}
//Creating an object of type DOJO Multiselect and adding values present in ‘sel’
var myMultiSelect = new MultiSelect({ name: ‘dynamic’ }, sel);
var submitButton = dojo.query(“.submitBtn”)[0];
//To get the selected values on click of some button
var myObject = {
id: “myObject”,
onClick: function(evt){
var selected = [];
selectedCustomers = [];
selected = myMultiSelect.get(‘value’);
//Get all the selected values and bind it to the object
for(var i=0;i<selected.length;i++){
selectedCustomers[i] = customers[selected[i]];
}
selectedCustomersString = selectedCustomers.toString();
_self.context.binding.set(“value”, selectedCustomersString);
},
};
//On click of the button, call onClick funtion to get the values to object binded.
dojo.connect(submitButton, “onclick”, myObject.onClick);
},
error: function(e) {
console.log(“service call failed: ” + ajaxUrl + e );
}
}
//Call the Ajax
xhr.post(xhrArgs);

Done. ! 🙂 Drag this coach view just like an UI element in the coach or other coach view to use.

DOJO Stand By for IBM BPM Coach

Problem: Fact is IBM BPM UI’s are slower than NON-BPM UI. And in IBM BPM 8.* versions, users won’t know that there is some background process running unless they see a small icon in top-right corner of the screen. This becomes a problem if user keeps clicking buttons when service is middle of something.

Solution: To avoid this problem, we have a option in DOJO which helps us blocking the user from doing anything in UI when something is running in the background. And that is ‘StandBy‘.

How to implement the same in IBM BPM?

Simple 😉 Already available here

Create a coach view and name it ‘Stand By’.

On the tab behavior add AMD dependency:

module id: dojox/widget/Standby

alias: STB

Put this below code in ‘Load’ event handler. And place the coach view in which ever the coach you wish to have this functionality.

Script on Load

And there you go, your BPM UI looks so cool when ‘Loading’ icon shows up 🙂

Custom Visibility Rule for Coach/Coach View

Quick Note on Visibility Rule: In IBM BPM 8.*, we have many ways to set the visibility for an UI element. But there comes some scenarios where visibility of an element depends on more than one element and in few other scenarios, OOB features won’t help.

In Such cases, we can create a custom coach view which will analyze ‘n’ number of data and gives the result which we can use for setting visibility.

A simple Visibility rule configuration options looks like:

Here we can use only one value on which visibility depends.

Eg: When variable1 is equals to “something”, then set visibility1 to “Hidden”.

This is a great and simple option when we are checking for single variable. What to do when we have more than 1 variable, which defines the visibility of an UI element?

Solution is to create a customized Visibility rule using Coach View which is very simple and can be used to analyze multiple data.

Below is a solution when we want to use 3 variables and in both AND and OR condition.

Step 1: Create the variable as shown in below diagram.

Lable for each variable(Helps when using as it is more descriptive):

leftValue1: When this Variable(leftValue1)

operator1: is

rightValue1 : this value

leftValue2 : AND when this variable(leftValue2)

operator2 : is

rightValue2 : this value

leftValue3 : OR when this variable(leftValue3)

operator3 : is

rightValue3 : this value

setVariable : Then set this variable

toValue : To

defaultValue : (Optional)Otherwise use this value

Left values are used to map the variables which needs to validated.

Right values are used to assign values to compare.

Operators helps in doing comparisons.

ToValue and default value are the actual visibility values(Like none, hidden, editable)

Create BO for Operator as shown below:

Create BO for Visibility as shown below:

Step2: Write a function to define operations for each operator in the inline JS of the CV.

Step 3: In the View event handler, write the below script.

//Getting the values from variables declared as configuration options to local variables.

var options = this.context.options,
leftValue1 = options.leftValue1.get(“value”),
leftValue2 = options.leftValue2.get(“value”),
leftValue3 = options.leftValue3.get(“value”),
operator1 = options.operator1.get(“value”),
operator2 = options.operator2.get(“value”),
operator3 = options.operator3.get(“value”),
rightValue1 = options.rightValue1.get(“value”),
rightValue2 = options.rightValue2.get(“value”),
rightValue3 = options.rightValue3.get(“value”),

setVariable = options.setVariable.get(“value”),
toValue = options.toValue.get(“value”),
defaultValue = options.defaultValue.get(“value”)
//Evaluating the values for each variables
if(typeof leftValue1 != “string”) {
rightValue1 = eval(rightValue1)
}

//The eval() function evaluates or executes an argument.
if(typeof leftValue2 != “string”) {
rightValue2 = eval(rightValue2)
}
if(typeof leftValue3 != “string”) {
rightValue3 = eval(rightValue3)
}
//Calling the function operations to do the operation on values.

//Depending on the return value, visibility is set from setVariable variable.
if((operations[operator1](leftValue1, rightValue1) && operations[operator2](leftValue2, rightValue2)) || operations[operator3](leftValue3, rightValue3)) {
if(setVariable != toValue) {
options.setVariable.set(“value”, toValue)
}

//If operations returns to false, default visibility value is set.
} else {
if(defaultValue && setVariable != defaultValue) {
options.setVariable.set(“value”, defaultValue)
}
}

Step 4: Write the below script in Change event handler to prevent this control from receiving its own change notifications.

if(event.property==’setVariable’)
return
else
this.view()

Once created and mapped, this is how the configuration for this coach view/visibility rule looks like:

So using this same approach, we can create the visibility rule for multiple variables. Hope this detailed explanation helps.

Any doubts?? Mail me @santhoshyadavnu@gmail.com