Behavior: Calculate


The Calculate behavior is sugar for calculating a form element based on the values of other form elements. For example, Project.Timesheet.Edit.xslt includes UnitCount, Rate and AmountMoney fields, where AmountMoney = UnitCount * Rate.

  <input type="text" id="UnitCount"/>
  <input type="text" id="Rate"/>
  <input type="text" id="AmountMoney" data-behavior="Calculate" data-calculate-options="{{'depends': 'UnitCount,Rate', 'calculate': 'multiply'}}" />

This is simply more concise than:

  <input type="text" id="UnitCount" onchange="calculateAmount();"/>
  <input type="text" id="Rate" onchange="calculateAmount();"/>
  <input type="text" id="AmountMoney" />
  <script type="text/javascript">
function calculateAmount()
{'AmountMoney').value = "";
  if (!isNaN('UnitCount').value) && !isNaN('Rate').value)) {'AmountMoney').value = parseFloat('UnitCount').value) * parseFloat('UnitCount').value);

Behavior Options

Options for the Calculate behavior comprise:
  • depends (String, required): comma-separated list of element id's to consider in the calculation
  • defaultValue (String, defaults to ''): default value to set if there are not enough values to perform the calculation
  • calculate (String, defaults to 'sum'): name of the calculation function defined in the qbo3.Calculator object
The qbo3.Calculator object is used to define calculation functions; by default it contains 'sum' and 'multiply'.  If you need more complex calculation logic, you can implement as follows:

qbo3.Calculator = Object.merge(qbo3.Calculator || {}, {
myCalc: function (element, depends, options) { ... }

and then reference it with:

<input type="text" id="AmountMoney" data-behavior="Calculate" data-calculate-options="{{'depends': 'UnitCount,Rate', 'calculate': 'myCalc'}}" />

See qbo.ApplicationWeb > Scripts > qbo.Math.js for the behavior, including the definition of sum and multiply in the qbo3.Calculator object.