Example: creating a Coach calling an Ajax service

IBM BPM, V8.0.1, All platforms > Create processes in IBM Process Designer > Create user interfaces for business processes > Coach and Coach View examples
Example: creating a Coach calling an Ajax service

You can quickly build Coaches that call Ajax services and display data from those services. Since Ajax services are a common form of service, understanding how to build Coaches that call them and use their data is a practical benefit to someone building a human service or a business process.

In this step-by-step example, you are shown how to create a Coach that will call an Ajax service, create the Ajax service and create another Coach to display information. It is a complete and self-contained sample and does not require any prerequisites. The Ajax service examines a letter. If it sees a Q, it returns the name QuickServ as the name of the supplier. If it sees a P, it returns the name ProServ as the name of the supplier. The second Coach displays product information from the supplier selected.

Procedure
Create a Human service, a Coach to call an Ajax service, and the Ajax service.
Beside User Interface, click + and select Human Service. Name the service Display Supplier Parts.

Drag a Coach from the palette to the left side of the canvas. Name the Coach Get Supplier Name. Drag a Server Script to the right of Get Supplier Name. Name the server script List Supplier Parts. Drag another Coach to the right of List Supplier Parts. Name the Coach Show Parts from Supplier. Save your work.
Double-click Get Supplier Name. The Coach editor opens. Drag a Text field to the canvas. Select the text field and in the Properties view select the General tab. Change the Label field to Enter Supplier: Q for QuickServ or P for ProServ.
Select the text field and in the Properties view select the Configuration tab. Select Enable Autocompletion. Beside Autocompletion Service, click New. The New Ajax Service window opens. Enter the name Get Supplier Name for the name of your Ajax service and click Finish.
Click Variables. If that the expected input and output variable names (text and results) and their types have already been created for you.
Click Diagram. Drag a Server Script from the palette to the canvas and name it Get Supplier Name. Select Get Supplier Name and click the Implementation tab in the Properties view. Add the following JavaScript. This code will select the QuickServ supplier name when Q is entered by a user and select the ProServ supplier name when P is entered.
tw.local.results = new Array();
if(tw.local.text=="Q"){
    tw.local.results[0]=("QuickServ");} else if(tw.local.text=="P"){
    tw.local.results[0]=("ProServ");}
Wire Start to Get Supplier Name and Get Supplier Name to End. Save your work. Close the Ajax editor.
Back in the Get Supplier Name Coach, drag a Button beneath the text field. Rename it Next. Save your work. Click Diagram.
Create a Server Script that lists the supplier data.
Double-click List Supplier Parts. In the Properties view, click the Implementation tab and add the following JavaScript:
tw.local.product = new tw.object.listOf.ProductLine();

switch (tw.local.supplier) {
case "QuickServ":
    tw.local.product[0] = new tw.object.ProductLine();
    tw.local.product[0].sku = "Z34RT1GF";
    tw.local.product[0].description = "Window Sill";
    tw.local.product[0].price = "$35.40";
    tw.local.product[1] = new tw.object.ProductLine();
    tw.local.product[1].sku = "YT76UJ8F";
    tw.local.product[1].description = "Glass Pane";
    tw.local.product[1].price = "$37.50";
    break;
case "ProServ":
    tw.local.product[0] = new tw.object.ProductLine();
    tw.local.product[0].sku = "Z34RT1GF";
    tw.local.product[0].description = "Door Latch";
    tw.local.product[0].price = "$20.39";
    tw.local.product[1] = new tw.object.ProductLine();
    tw.local.product[1].sku = "YT76UJ8F";
    tw.local.product[1].description = "Door Bell Chimes";
    tw.local.product[1].price = "$67.50";}
Click Variables and Add Private to create a variable for this data. Use private variables for data that should be hidden. Name the variable product. Click Is List as the variable will provide a list of items. Click New to define a business object that will contain the product data. Enter ProductLine for the business object name. When the Business Object editor opens, click Add in the Parameters section and add three variables: sku, description and price. Leave the type as a String. Save your work. Close the Business Object editor. Click Add Input to add a variable for the user's input which will determine the supplier, that is, a Q for QuickServ or a P for ProServ. Name the input supplier and leave the type as String. Save your work.
Click Coaches. Select Get Supplier Name and select the Text field. In the Properties view, select General. Beside Binding, click Select and choose supplier from the menu. Save your work. The binding in this case associates the input variable in the Human service with the text element. Save your work.
Create a Coach to display the supplier data.

Click Show Parts from Supplier. In the Coach editor, expand Variables and drag product from the palette to the canvas. A table with names taken from the product variable is created. Rename sku to Stock Keeping Unit. Save your work. If that you do not need to explicitly bind the product variable to this Coach as it was done for you when you selected product from the Variables section.

Drag a Button beneath the table. Rename it Close. Save your work.
Return to the Diagram view and wire your components together. Using Sequence Flow to create arrows, wire Start to Get Supplier Name. Wire Get Supplier Name to List Supplier Parts. Wire List Supplier Parts to Show Parts from Supplier. Finally, wire Show Parts from Supplier to End. Save your work.

Test your Human service.

Click the Run Service icon in the upper right corner of the Diagram view. In the first user interface, enter Q or P. The user interface should complete the supplier name with QuickServ or ProServ. Click Next.
In the next user interface you should see the parts from either the QuickServ or ProServ supplier. Click Close.
Coach and Coach View examples