How to Implement Number Spinner Using Coach View and Jquery

In this post let us see on how to Implement Number Spinner using JQuery and Coach View. Below screen shot shows the Spinner created in IBM BPM 8.0 Coach.

IBM BPM Coach Number Spinner

jqeury-ui.js and jquery-1.10.2.min.js are the pre-requsites js files to create this. You can download these files from the links jquery-ui and jquery-1.10.2.min.js. Attach these files to the files section of IBM BPM as shown below.

Creating Coach View for Spinner :

Step1: Create a Coach view from the User interface palatte and in this example lets name it as JQSPINNER.

Step2: Add a custom html to the layout tab and place the html as shown in below image.

Layout tab of coach view

Step3: Create the variables in the variables tab as shown in the below image.

Variables  tab of Coach View

Step4: Go to the Behaviour tab, add the js files in the included scripts section. In the Event handler section, click on load and add the code as shown in below image.

Below code should be placed in "load".

var controlId=this.context.options.cntrlId.get("value");

var ele=this.context.element.getElementsByTagName('div')[1];

ele.innerHTML="<input></input>"

var inp=ele.getElementsByTagName('input')[0];

inp.id= controlId;

// the variable created as Configuration options in Variable section

var initVal = this.context.options.initVal.get("value");

var minVal = this.context.options.minVal.get("value");

var maxVal = this.context.options.maxVal.get("value");

var incrementBy = this.context.options.incrementStep.get("value");

inp.value=initVal;

$(function(){

// tBelow code will change input element as spinner.

  var spinner = $( "#"+controlId).spinner({

       min: minVal,

       max: maxVal,

       incremental: false,

       numberFormat: "n",

       step: incrementBy,

       change: function( event, ui ) {

       bindValue();}

   });  

});

// below script binds teh selected value to the binded variable.

var _this = this;

function bindValue(){

 if(_this.context.binding)

  { _this.context.binding.set("value",$( "#"+controlId ).val());

  }

} 

Creating Coach using the Coach View :

Step1:

Create a Coach , add the JQSPINNER (Coach View) to it and give values to the configuration variables, as shown in screen shot below.

Coach with Spinner

Now run the coach you can see the spinner as shown in the first image at the top.
Hope this is useful.