Example: creating a Dojo button control

This example shows how you can use the Dojo library to implement a coach view.

1. Add custom HTML code to a coach view:
   1. In the Layout page, 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");
      var _this = this;
      
      var button = new Button({
      label: this.context.options._metadata.label.get("value"),
      onClick: function() {
      _this.context.trigger(function() { console.log("dojo button boundary event handled");})
      }
      }, buttonNode); 

      Table 1. Notes 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 heritage uman service diagram, clicking the button triggers a transition (to the next step).

3. Save changes.