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.
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.
Step2: Add a custom html to the layout tab and place the html as shown in below image.
Step3: Create the variables in the variables tab as shown in the below image.
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".
![]() |
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());
}
}
Adding a zip file as server file s fine but it throws error when I am adding the zip file to my coach view.
ReplyDelete