SPARK UI Custom Control

Another approach for creating custom control on SPARK UI controls :

Example : Add minimum and maximum value that an integer control can restrict the user to enter to.

1. Copy Integer control from BPM UI to your Process App or toolkit and rename it .

2. Add minValue and maxValue variables under configuration options
3. Add the custom JS functions and attach the necessary event to the node after the instantiation of the control

bpmext_control_InitDecimal.call(this, bpmext, utilities, domClass, domAttr, domConstruct, false, i18n, numberHelper, null);

//fetch the min value and max value
 var minValue = this.context.options.....

//dynamically fetch the element id
 if(element != undefined){
     var id = element.id;
 }






//After the dom is ready attach the neccessary eventhandler ,in this case keypress
require(["dojo/ready", "dojo/dom", "dojo/query", "dojo/keys","dojo/parser", "dijit/form/Button"],
function(ready, dom,query,keys){
      ready(80, function(){
               query("input[id*="+id+"]").on("keypress", function(event) {
                    return true or false
            }
          });
      });
});

Process Portal Load Issues

Process portal takes long time to load  or unable to load . To fix this look for any hung  threads in the System Out.log and kill those process id's.

Coach View ,List Event Handlers

Change event handling for a coach view bound to a list of complex business object is different to event handling for a coach view bound to a simple type.The change handler scenarios that needs to be considered for the list of complex BO is as follows:

1. Handle changes when the list itself is updated?adding an item and removing an item to the list.
2. Handle changes when any element in the item of the list is updated ? (consider bindALL)
3. Handle changes when only one element of the item changes ?(Consider bind)

(Slightly modified example Referring : IBM BPM Coach Framework in Your Organization , page 80).


Sequence of execution and executable code:

1.Coach View Load event handler :

this.addHandles();

2. Inline Java Script:
//JS Array Objects holding the event handlers of the list of complex BO
this.connectHandles = [];

//JS Array Object holding row total
var rows = [] ;
//initialize
var finalTotal = this.context.options.finalTotal;
var totals;

//Add handles for all relevant actions through this function.:
this.addHandles = function () {
    this.bindAllHandle =this.context.binding.get("value").bindAll(this.bindAllChangeHandler, this);
    totals = this.context.binding.get("value");
    for (var x = 0; x < totals.length(); x++) {
    //Flavor 1:
    //this.setBindingHandler( { item: totals.get(x) } );
    //Flavor 2:
    this.setBindingHandler( totals.get(x),x );
    }
}
//setBindingHandler()
//flavor1
//this.setBindingHandler = function(config) {
//flavor2
this.setBindingHandler = function(item,x) {
    //Flavor 1
    //var item = config.item;
    //push(handler);
    this.connectHandles.push(
    //bindAll(changeHandler,scope)
        item.bindAll( function ( /*data1 */) {                                 
            var costs = this.get("costs") ? this.get("costs") : 0;
            var people = this.get("people") ? this.get("people") : 0;
            var ttl = people * costs;
            item.set("total",ttl);
            rows[x] = ttl;
            var temp = 0.0;
            for(var i=0;i<rows.length;i++){
                temp = temp+rows[i];
            }
        finalTotal.set("value", temp);  
        }, item)
    );
}
//If a new item is added to the totals list, refresh the bindings:
this.bindAllChangeHandler = function(event) {
   //update rows with the totals
    rows = [];
    var tempAllChangeHandler = 0.0;
    for(var i=0;i<totals.length();i++){
       rows[i] = totals.items[i].total;
       tempAllChangeHandler = tempAllChangeHandler+rows[i];
    }   
    finalTotal.set("value", tempAllChangeHandler);
    if ( event.newVal !== null &&
    event.newVal !== undefined &&
    event.newVal !== event.oldVal ) {
        this.refreshItemBindings();
    }
}
//Refresh all handles by removing them and then adding them again:
this.refreshItemBindings = function () {
    this.removeHandles();
    this.addHandles();
}
//You can remove all active handles through the remove handles function:
this.removeHandles = function () {
    if (this.bindAllHandle) { this.bindAllHandle.remove(); }
    array.forEach(this.connectHandles, function(handle) {
    if ( handle ) { handle.remove(); }
    });
    this.connectHandles = [];
   
}

Reference : 1.http://www.ibm.com/support/knowledgecenter/SSFTBX_8.5.0/com.ibm.wbpm.wle.editor.doc/develop/topics/rbindingdata.html
2.IBM BPM Coach Framework in Your Organization book , page 80

CSS Required asterisk on Stock controls

If we have a requirement to show the asterisk next to selective control labels on the coach view ,we can achieve the requirement in two steps.

1.For each control label that needs the asterisk sign ,add the CSS class "myRequired" on the HTML attributes

2.
/*custom class ,select all the nodes and apply*/
.myRequired *.text.controlLabel:after {
    content: "*";
    color: #ff0000;
}


Note : Visibility setting of  "Required " on a stock control also enables the asterisk