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:


Procedure

  1. Add custom HTML code to a Coach View:

    1. In the Layout tab, drag the Custom HTML Advanced item onto the canvas.

    2. 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>

  2. Configure the load event handler with a custom script:

    1. Register the Dojo button module and alias that the Coach View will load dynamically.

      1. In the Behavior tab, select AMD dependencies.

      2. 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.

    2. 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).

  3. Save changes.


Results

The custom button will be available in the Coach palette.

Coach and Coach View examples


Related tasks:
Adding custom AMD modules


Related information:
Coach and Coach View reference information