Getting Started with Writing Code for Creatio (formerly bpm’online)

If you’re just getting started working with bpm’online, it can be a bit intimidating to know where to start. More specifically, where exactly to put your code and how to accomplish some of the basics. The wizards (section and detail wizards) are crazy simple to use. However, one of the first things to understand is that what those wizards are actually doing is generating Javascript for you (specifically, a view model – as in the VM part of the MVVM pattern). The best part is, you can edit this generated javascript and then still continue to use the wizard for UI changes and your javascript you’ve added goes along for the ride.

When you look at the code generated by the wizards, you’ll see several sections. Two of the most important sections are likely the “diff” and the “methods” sections. The diff represents the UI . “Diff” meaning your “differences” to the base UI page you’re modifying. It is an array that contains the UI elements you’re adding, changing, or removing from the base page itself. This is mainly what the wizards generate for you, however you can edit this manually as well (and the wizards still work, even with your manual changes). How do you know what to type there? Take a look at the docs for the diff in the Academy. The methods, of course, is where your code goes.

Reading and Setting Property Values

Before we look at some important functions you can use, let’s look at some of the very basic things you’ll need. How to get property values on the page and how to set property values on the page.

Reading a Property

To read a property value, you’ll simply use this.get and pass the property name.

// get a property in your object. For example, if you're adding code to the 
// account page and want to get the account "Name" property
var accountName = this.get("Name");

Note, if the field you’re getting is a lookup, using this.get will return an object with two properties of “value” and “displayValue”. The “value” property will contain the ID of the selected lookup item and the “displayValue” will contain the text value. It’s a good idea to check to make sure you really have an object (meaning the lookup has a value and not blank). I like to use Ext.isEmpty to check for that. Something like this:

var myLookupProperty = this.get("UsrMyLookup");
if (!Ext.isEmpty(myLookupProperty)) {
    var id = myLookupProperty.value;
    var text = myLookupProperty.displayValue;
    // do something...

Setting a Property

To set a value you’ll use this.set.

// set a property in your object. For example, if you're adding code to the
// account page and want to set a new name
this.set("Name", "New Account Name");

Additionally, for lookup properties, I mentioned before that the values for lookups is an object with two properties. To set a lookup’s value, you’ll use the same sort of object:

this.set("UsrMyAccountLookup", {
    value: someId,
    displayValue: someAccountName

Technically, only the Id value (the “value” property of the object) is needed to really set the column value. However, for the control to display as “set” for the user, you need to also include the displayValue as well. Once the record is saved, the lookup will display correctly as long as you provided the value (the Id) only, but for the user to see the set value immediately, the displayValue is needed.

You can use these to get or set any property on the bound object the page is for, whether or not the property is actually used on the page.

Some Important Functions to Know

There are some important functions to be aware of that you’ll use often. These functions are functions that exist in the base page modules that you’ll override for special purposes. Bpm’online is built using the ExtJs javascript library. In ExtJs, when you override a function from a base module you’re extending, you use this.callParent to call the function you’re overriding from the base module. This is important and something you won’t want to forget. I’ll explain more about this in a bit. Here’s some of the important base functions to know and override when needed.

init – The init function happens when your page is instantiated. No data has been loaded here yet, so you don’t yet have any context to a particular record yet. However, this function can be useful to wire up other things you’ll need later. Just a place to get things ready. Note, in the sample below, the call to this.callParent(arguments).This is important to allow the base page modules to run the code they need. If you forget to add that your entire page will break (you’ll navigate to the page and see nothing at all).

init: function() {
    // your code here

onEntityInitialized – This is likely the most important function to be aware of. This happens when the data for the page has been loaded. At this point, you can read values from the record loaded. This is also a useful place to set some default values as well (if the page is in add mode)

onEntityInitialized: function() {

    // your code here, for example:
    var myValue = this.get("UsrSomeValue");
    // etc

save – The save function is exactly what it says it is. This is when the record is saved. The user clicks the “Save” button and this is what gets called. I mentioned before about calling this.callParent in an overridden function. It’s important to understand what that means here. The data for saved when this.callParent is called. So, you can add code before you call this.callParent to modify the record’s data before it is saved. For example, if you want to set some property and have it gets saved with the rest of the data, you can add that before you call this.callParent. You can do whatever you need after the record is saved after the call to this.callParent.

save: function() {
    // modify the record before it is saved here, for example
    this.set("UsrCode", "123456");
    // code that happens after the record has been saved here

One more thing to note about the save function. The actual saving of the record is asynchronous. When you call this.callParent, it does trigger the save, however, the code you add after may or may not fire after the record has been actually saved to the database. Why is this important? Let’s say you need to insert some related records to another object/table that relate to the current record. If you attempt to insert these before this record actually exists in the database you’ll get referential integrity errors. That is why the following onSaved function exists since that is what will truly fire when the data has actually been saved to the database.

onSaved – Similar to the save function, this one happens after the record has actually been saved to the database. First save is called (which triggers the asynchronous save process), then after the save is complete, onSaved is called.

onSaved: function() {
    // your code here

There are definitely other functions in the base page modules you’ll find useful. How do you know what functions you can override? When you open your page code, you can see what your page’s parent or base is.

Once you know that, you can look for that in the configuration and open it to see what functions it has and you can override. Also, you can see what that page’s parent is. Eventually, you’ll get the BasePageV2 (where most of the functions I’ve mentioned exist). All of these functions up the chain from yours can be overridden. If you want to completely replace what that function does, you can just omit calling this.callParent (although make sure you’re aware of the consequences).

Hopefully this article will help you get started and will help you get closer to feeling comfortable with jumping into adding code in pages generated by the wizards.

For getting started with debugging your client-side code, refer to the article:
Debugging Client Side Code in Creatio


Ryan Farley

Ryan Farley is the Director of Development for Customer FX and creator of He's been blogging regularly about SalesLogix, now Infor CRM, since 2001 and believes in sharing with the community. His new passion for CRM is Creatio, formerly bpm'online. He loves C#, Javascript, web development, open source, and Linux. He also loves his hobby as an amateur filmmaker.

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe To Our Newsletter

Join our mailing list to receive the latest Infor CRM (Saleslogix) and Creatio (bpm'online) news and product updates!

You have Successfully Subscribed!