Friday, April 19, 2013

Auto-Complete using JQuery in heritage Coach

This Post will illustrate an example on how to implement auto-complete operation over a text-box in IBM BPM  Heritage coach (Not the new coach which comes in 8.x versions) using an Ajax service.

Steps for implementation:
Step1:
Create an Ajax Service which will takes String value as input (variable name: text) and list of String as output and build the require logic inside the service. In this example, let create a service which get the users from LSW_USR table based on the input string value. Input and output structure is as shown in the below figure.

Step2:
Create human service with a heritage coach, with one input text field (control Id: InputText0). And add a Custom Html and inlcude the below script.


*****************************************************************
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> 
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
 <script> 

 var availableTags;
 function AjaxRetrieveUsers(inp){

 var updateHTML = function(data) {
   availableTags = data['results']; 
  };

  var serviceInputs = "<input name='elementValue'>"
    + "<variable name='text' type='String'>" + inp + "</variable>"
    + "</input>";
  tw.coach.callService('GetUsers', serviceInputs , updateHTML);

 }

 $('#InputText0').bind('keyup', function() { 

      AjaxRetrieveUsers(document.getElementById('InputText0').value)

       $( "#InputText0" ).autocomplete({ 
                source: availableTags  
       }); 
       
    }); 
       
</script>

***********************************************************

Our Human Coach with Auto Complete is ready.

Step 3:
Run the Service. You can see the screen as below.







No comments:

Post a Comment