Scenario 1: Purchase Order Form

Purchase order form scenario shows how you can use a Base Form container to create and repeat line items, code scripts to automatically calculate values, and update a value on data change event.

Requirements

A purchase order form which:

• captures information about quantity and rate as a line item.

• automatically calculates the amount by multiplying quantity and rate and displays it as a line item.

• starts with one line item and provides an option to add as many line items as required.

• automatically calculates the total amount by adding each line item amount.

Design

1. Create a form.

2. Add a Base Form container on the form and set the Display Mode to Grid, to create line items.

3. Add three Number controls on the Base Form container to capture quantity and rate and display the amount, as a line item.

4. Add a Number control on the form to display the total amount.

Scripts

5. Code the script as follows for the Value property of the Amount control to automatically calculate the amount:

   qty=control.findByXmlNode("Quantity").value;
   rate=control.findByXmlNode("Rate").value;
   return qty*rate;

6. Code the script as follows for the On Data Change property of the Amount control to automatically calculate the total amount:

   control.findByXmlNode("TotalAmount").value= control.sumByXmlNode("Amount");

Note: The sumByXmlNode() method adds the value of each instance of the specified control.