Please enable JavaScript to view this site.

Navigation: Advanced topics > Events > Sample events > Appearance

Show order total on the Edit page as the details table is updated

Scroll Prev Next More

 

We edit the order header and order details on the same page and want to show the order total on the master table Edit page as we add or edit order details.

 

In this example, the master table is Orders and the details table is Order Details.

 

This is how it looks like in action:

video_order_total

Instructions

Link Orders and Order Details tables as master-details. Check off the Display details table data on Edit page option.

1. Insert a placeholder for the order total display

The Total is calculated as a sum of UnitPrice * Quantity for all Order Details records.

 

Proceed to the Page Designer and insert a text element ( Insert -> Text ). Enter 0 there. Rename its Item ID to total.

 

You can insert this element to either the master Edit page or details List page. It is only a question of appearance, as your design requires. You may also want to add another text element with the word 'Total'.

order_total_page_designer

 

Right-align the content of this cell so order total is aligned with the quantity.

2. custom_functions.js

This code needs to be added to custom_functions.js section under Event Editor.

 

Note: the details table and the field names are in red. Replace them with the actual details table and field names. All table and field names are case-sensitive.

In this example, we multiply Quantity by UnitPrice. Your formula might be different.

 

var orderDetailsTable = 'Order Details';
function setOrderTotal( value, pageObj ) {
  //    update totals if the 'totals' element is inserted into the master page
   pageObj.findItem('total').text( parseFloat(value).toFixed(2) );
 
  //    update totals if the 'totals' element is inserted into the details page
  var detailsPage = pageObj.getDetailsPage(orderDetailsTable);
   detailsPage.findItem('total').text( parseFloat(value).toFixed(2) );
}
 
function updateOrderTotal( pageObj ) {
  var detailsPage = pageObj.getDetailsPage(orderDetailsTable);
  if( !detailsPage )
      return;
  var records = detailsPage.getAllRecords();
 
  // actual calculation. Multiply Quantity by UnitPrice and sum the results.
  // total = sum( Quantity * UnitPrice )
  var total = 0;
   records.forEach( function( r ) {
    total +=
           ( parseFloat( r.getFieldValue('Quantity') ) || 0 ) *
           ( parseFloat( r.getFieldValue('UnitPrice') ) || 0 );
   });
 
   setOrderTotal( total, pageObj );
}

 

updateOrderTotal is the main calculation function. The rest of the code only calls it at the right moments.

3. Orders ( master ) - Edit page - Javascript OnLoad event

Calculate the totals on the Edit page loading.

 

updateOrderTotal( pageObj );

4. Order Details ( details) - List page - Javascript OnLoad event

This code tells ASPRunnerPro to recalculate the total on the page loading, and after adding or modifying records in the details table.

 

pageObj.updateTotals = function() {
  var masterPage = pageObj.getMasterPage();
  if( masterPage )  
       updateOrderTotal( masterPage );
}
 
this.on('afterInlineEdit', pageObj.updateTotals );
this.on('afterInlineAdd', pageObj.updateTotals );
 
pageObj.updateTotals();

5. Order Details - Field events

The last step is to tell your application to recalculate the totals immediately on editing the Quantity and UnitPrice fields in an Inline mode.

 

Proceed to the Fields screen, open the Order Details page there. Then open the Quantity field properties and click Field events.

 

Select the change event and add a new event handler.

 

Add this code to the Client Before event:

 

if( pageObj.updateTotals ) {  
   pageObj.updateTotals();
}
return false;

 

Then assign the same event handler to the change event of the second field, UnitPrice.

See also:

getDetailsPage

getMasterPage

getAllRecords

findItem

ctrl.on

Master-Details relationship

Insert Text and Image

Field events

Tri-part events