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 Dojo button control
This example shows how you can use the Dojo library to implement a Coach View.
This example provides steps for completing the following tasks:
- Adding custom HTML code to a Coach View
- Configure the load method event handler with a custom code
Procedure
- Add custom HTML code to a Coach View:
- In the Layout tab, drag the Custom HTML Advanced item onto the canvas.
- In the HTML properties, select the Text option and then provide your custom HTML code. For this example, you can use the following code to define a button control:
<input type="button" class="dojobutton" name="dbtnName" value="default"></input>- Configure the load event handler with a custom script:
- Register the Dojo button module and alias that the Coach View will load dynamically.
- In the Behavior tab, select AMD dependencies.
- Click Add and then specify the following information:
- In the Module ID column, type dijit/form/Button. This declares a dependency on dijit button module.
- In the Alias column, type Button. This is the alias name used in the code to refer to the dijit button.
- Under Event Handlers, select load and then provide the custom script. For this example, you can use the following script:
var buttonNode = this.context.element.querySelector("input"); label: this.context.options._metadata.label.get("value"), onClick: function() { _this.context.trigger(function() { console.log("dojo button boundary event handled");})} }, buttonNode);
If s about the script Item Description this.context.options._metadata.label.get("value") Retrieves the label value from the configuration options. this.context.trigger(...) Triggers a boundary event when the button is clicked. If the boundary event is wired to the next step in a Human service diagram, clicking the button triggers a transition (to the next step). - Save changes.
Results
The custom button will be available in the Coach palette.
Related tasks:
Adding custom AMD modules
Related information:
Coach and Coach View reference information