Neil Kolban

2016-04-13

Custom Coach View – Walk through

In this document we will walk through the creation of a Custom Coach view. The new Coach View
will provide a "dialog" box. This walk-through assumes that you are familiar with IBM BPM 8.8.

1. Create a new Process App. Use Process Center to create a new Process App called "Dialog
Coach View".

2. Open the new Process App in the browser based process designer.

3. Create a new Coach View type instance

Page 1
 4. Name the new Coach View "Dialog".

5. Switch to the Layout tab and insert a Custom HTML component found in the "Advanced"
folder.

6. For the HTML of the Custom HTML entry, supply Text that contains:
<div id="$$viewDOMID$$_dialog">

Page 2
 7. Insert a Context Box Coach view into the layout south of the Custom HTML. The Context Box
Coach View can be found in the Advanced folder.

8. Insert a second Custom HTML south of the Content Box. Set the HTML of this instance to be:
</div>

9. Switch to the Variables tab of the Coach View editor.

10. Set the Business Data variable to be called "show" of type "Boolean":

11. Add a configuration option called "modal" of type "Boolean":

Page 3
 12. On your operating system, create a text file called "AMD.js" and enter the following within it:
require({
paths: {
"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min",
"jqueryUI": "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min"
}
});

13. Add the new "AMD.js" file as a Web File from the Files menu:

14. Switch to the Behavior tab of the Coach View editor.

15. Add new Included Scripts entry referencing the "AMD.js" file we just added:

Page 4
 16. Add a new entry into the Inline CSS that contains:
@import "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css";

17. Select the "AMD Dependencies" and add two dependencies:

Module ID Alias
jquery jquery_BPM
jqueryUI jqueryUI_BPM

Page 5
 18. Select the load Event Handler and enter the following code:
// Find the area within the injected HTML that will be used to host
// the dialog. It will the div that has an id of "<viewid>_dialog".
var widgetNode = $("#" + this.context.viewid + "_dialog");

// Determine whether we are to be a modal dialog.

if (this.context.options.modal) {
var modal = this.context.options.modal.get("value");
} else {
var modal = false;
}

// Create the jQuery UI dialog widget

widgetNode.dialog({
autoOpen: false,
modal: modal,
title: this.context.options._metadata.label.get("value"),
close: $.proxy(function(event, ui) {
this.context.binding.set("value", false);
}, this)
});

if (this.context.binding.get("value") === true) {

widgetNode.dialog("open");
}

19. Select the change handler and insert the following code:

Page 6
var widgetNode = $("#" + this.context.viewid + "_dialog");

// If the bound variable changed that is controlling the visibility of the dialog
// then act upon it. If the value becomes true, open the dialog. If the value
// becomes false, close the dialog.
if (event.type !== "config") {
if (event.newVal === true) {
if (widgetNode.dialog("isOpen") === false) {
widgetNode.dialog("open");
}
} else {
if (widgetNode.dialog("isOpen") === true) {
widgetNode.dialog("close");
}
}
}

20. In the Overview page of the Coach View editor, click the box "Supports a Label":

21. Create a new Client Side Human Service for testing. Call it "Test".

22. Create a new Private variable called "show" of type "Boolean" and give it a default value of
"false":

Page 7
 23. Open the Coach for the new human service.

24. Drag and drop the Dialog Coach View into the canvas area.

25. Insert some text fields into the dialog.

26. Rename the button currently called "OK" to be "Open".

27. Bind the button to the "show" variable.

Page 8
 28. In the Configuration of the button, check "Allow multiple clicks":

29. Select the dialog Coach View on the canvas and bind it also to the "show" variable.

30. Switch to the Configuration tab of the "dialog" Coach View and set the "modal" value to be
"true":

31. In the Diagram view of the Human Service, remove the link between the Coach and the End
nodes.

Page 9
 32. Run the Human Service. The Coach will appear:

Click the Open button and the dialog will appear:

Page 10
End.

Page 11