Performing Client-Side Calculations to Improve Performance

Follow

Problem

A common implementation is to have a field that automatically calculates and displays a total based on the values of other fields in a table or coach. Generally a boundary event is triggered every time one of these fields is updated and a server script is used to recalculate the new total. Depending on the complexity of the implementation, the performance of these boundary events can slow as the number of server side calls increases.

For example, the number spinner control can be used to increment/decrement an integer or decimal field by a specified step size. Each click up or down fires a boundary event that triggers a server script. While the number spinner has a max speed at which it registers clicks, under certain conditions it is possible to change the control faster than the whole process can relay feedback to the user. This can be the case in large or complex editable tables where there is a boundary event > server script > table update cycle. The sequential server calls combined with the triggered refreshes to the table can result in update lag that impacts the user experience. The following solution shows how to improve performance by using a custom coach view to perform calculations client-side.

Example

1. In the below table, a user would enter a price for the “Unit Price” field and then could increment/decrement the “Quantity” and each time this happens a boundary event will fire and update the “Total Price.”

2. As you can see below, a boundary event has been set to trigger when “Quantity” is updated and a server script calculates the new “Total Price” variable.

Solution

The solution is to build a custom coach view that does the calculation for you client side.

1. Create a custom coach view for the "Total Price" field.

2. Pass in the unitPrice and quantity variables as configuration options and make totalPrice a business data variable.

3. In the Behavior tab, add the totalPrice calculation to the load event handler. This way, the code that calculates the totalPrice value will run on page load.

4. Staying in the Behavior tab, add the totalPrice calculation to the change event handler. The change handler will be slightly modified as it should only run when there are changes to either the quantity or price, and not when there are changes such as visibility changes.

5. Add the Total Price custom coach view to the table, bind the variable and map the configuration variables.

6. Now whenever the “Quantity” field or “Unit Price” field changes, this calculation will update client side rather than triggering a boundary event that calls a server script.

Have more questions? Submit a request

Comments

Powered by Zendesk