Simple Grid Calculation Example

Needs technical review. 6/24

You can add JavaScript that dynamically updates totals as a user adds or modifies grid records. This example uses a Purchase Order object that has a 1-to-many relationship with a Line Item object. The Line Item object has three fields:

  1. An integer field with the integration name: quantity
  2. A currency field with the integration name: price
  3. A formula field with the integration name: total, a formula body: {!quantity}*{!price}, and a return type of currency.

The New Purchase Order page with a grid added will look like the following screen. Users adding line items must save the parent record before they can view the total quantity and price.

By adding an event handler, a script component, and JavaScript to perform the calculations, the grid totals will dynamically update when the user tabs out of the calculated fields, as shown below:

To recreate this example, follow these steps:

  1. Use the Page Editor to add a Grid Control to the Edit and New pages for Purchase Order objects. See Adding a grid control to a page for detailed procedures.
  2. Configure the grids as follows:
    1. Create a Purchase Order record. On the New page, click Configure Grid.
    2. Select the relationship Purchase Order-Line Item.
    3. Select these fields to be displayed in the grid: Quantity, Price, and Total.
    4. For Grid Totals, select the Quantity and Total columns and select the Total operation for both.
    5. In the JavaScript Event Handlers section onUpdate field, add the following call (the @@ symbol will be replaced at runtime with the current row number): 
      rbf_showGridRow(@@)
    6. Click Save & Synchronize.
    7. Select the Edit page.
    8. Click Save and the changes will be applied to both pages.
  3. Add the JavaScript for calculating totals:
    1. Click Design This Page.
    2. From the Create section of the left pane, drag a New Section component onto the page below the Grid Control.
    3. Select the new section and from the Properties section in the left pane remove the Section Title. Since the JavaScript will not display on the page, you don't want the title to show either.
    4. Drag a new Script Component from the left pane and drop it in the New Section.
    5. Click Edit.
    6. In the editor, add the following JavaScript: 
      <script>
 function rbf_showGridRow(rowIndex) { 
     var a = rbf_getFloat(rbf_getGridValue2(0, 'quantity', rowIndex)); 
     var p = rbf_getFloat(rbf_getGridValue2(0, 'price', rowIndex)); 
     var t = a*p; rbf_setGridContent2(0, 'total', rowIndex, rbf_formatCurrency(t)); 
 }
</script>
    7. Click Save & Synchronize.
    8. Select the Edit page.
    9. Click Save and the changes will be applied to both pages.
  4. Test by creating a new record and adding line items. Note that when you tab out of the quantity and price fields, the totals update automatically.