Triggering a Client-Side Event When a Field is Changed on a Page in Creatio (formerly bpm’online)

Often you’ll want to know when the user changes a field on a screen in bpm’online so you can perform some other actions. For example, show/hide something when a certain value is set, updating some fields when a certain checkbox is checked, get the primary contact for an account when an account is selected, etc. This is all very easy to do in bpm’online.

First of all, in your page schema, you’ll see a section for attributes. There are many purposes for attributes on a page, but for our purpose, we’ll use to to bind the change of a field to a method to be called. This is an example that will call our method onFieldChange whenever the field named UsrField is changed:

//...

attributes: {
  "FieldChange": {
    dependencies: [{
      columns: ["UsrField"], //field to trigger change event for
      methodName: "onFieldChange" //method to execute
    }]
  }
},

//...

methods: {
  onFieldChange: function() {
    // do something here
  }
},

//...

A few things to note here. First, your attribute can be named anything you’d like. That doesn’t really matter for this. Second, this will trigger the method to be called when the field is changed in the page’s model, not just by the user. If I change the value in code somewhere, such as:

this.set("UsrField", "Some value");

This will trigger the method to be called in the same way, just as if the user changed it. This is an important distinction. The change event is happening from the model, not a specific UI element (although the UI element is bound to the model property, so that does trigger the change). Obviously, there are no postbacks that happen here since bpm’online’s front end is a javascript application.

Also, you can wire up the change of several different fields to trigger the same change event. For example:

//...

attributes: {
  "ImportantChange": {
    dependencies: [{
      columns: ["UsrField", "UsrSomeOtherField", "Account"], //fields to trigger change event for
      methodName: "onImportantChange" //method to execute
    }]
  }
},

//...

When the onImportantChange method is triggered, the field name that triggered the event will be passed in as an argument.

If you’ve defined attributes on the page, you can also respond to changes to those attributes as well, however, you’ll wire them up a bit differently. To wire up a change event for an attribute, you can use “on” for the change event, like this:

this.on("change:SomeAttribute", this.onSomeAttributeChange, this);

Lastly, there’s one other way to accomplish a change event on UI controls. That is, wiring up standard HTML DOM events such as blur. Note, this method only triggers the change from the UI element, not the model. So, if some change happens to the bound field in the model, this won’t trigger the event. This will only trigger when the user changes the UI element (and in the case of blur, when the user exits the control). Add it to your diff as follows:

{
    "operation": "insert",
    ...,
    "values": {
        "blur": { "bindTo": "onUsrFieldExit" }
    }
}

Then add the corresponding method as well. When the view is rendered, you’ll have the blur event all wired up. This method works for most standard HTML DOM events.