Using Client-Side Calculations on Pages in Creatio (formerly bpm’online)

There are times in Creatio you’ll need to do calculations on a page. To do this it is pretty simple but it does involve a little bit of JavaScript. In this article I will cover a scenario where a page has a total amount that a customer owes. The user will enter a percentage amount for how much of a deposit the customer owes now. Our code will do a calculation to figure out the deposit amount and the amount remaining.

Ryan has written up the steps for wiring up a change event, so we’ll be referring to those steps in this article.

For our scenario we have the following fields.

In my scenario the dollar amount is the total amount the customer owes, the percentage is a value the user enters for the deposit percentage for what the customer must pay now. The last two fields is where I will put my results of the calculation. My code will determine the amount of the deposit and the remaining balance. Here are the steps for putting this together.

First step to do is add an attribute to wire up the change. With this attribute we’ll create a method to be called when the columns change.

 attributes: { 
	"PaymentCalculation": {
		dependencies: [{
			columns: ["UsrDollarAmount", "UsrPercentDeposit"],
			methodName: "onPaymentCalculation"
		}]
	}
}, 

I want the calculation to trigger every time there is a change in the dollar amount or a change in the percentage amount. In the columns of my attribute I have both of these fields and every time either of the fields change it will call the method. This is what my method looks like.

 methods: {
	onPaymentCalculation: function() {
		var percent = this.get("UsrPercentDeposit") || 0;
		var amount = this.get("UsrDollarAmount") || 0;
		
		var deposit = amount * (percent / 100);
		var remaining = amount - deposit;
		
		this.set("UsrDepositAmount", deposit);
		this.set("UsrRemainingAmount", remaining);
	}
}, 

In this function we first have to get values for our fields, then do the calculations, and put our results into the fields for deposit and remaining amount. My example was to calculate a deposit but the same steps can apply for any calculation.