Main page

An order entry page example implemented as master-detail

Description

This example shows how to create a master-detail order entry page. A grid form is used to display a list of all the orders while a record and editable grid form display detailed information about a selected order.

Usage

To add a new order:

  1. Click on the 'Add' link at the bottom of the 'Orders' grid.
  2. In the 'Add/Edit Order' record form, select the 'Customer' and enter the 'Date' or click on the 'Date Picker' icon to select a date.
  3. Click on the 'Add' button.
  4. In the 'Order Items' editable grid, click on the 'Add Item' button then select a 'Product' and enter the 'Quantity'.
  5. To add another record repeat the operation above.
  6. After entering all the necessary information, click on the 'Submit' button to save the information.

To edit an order:

  1. Select the order by clicking on its id in the 'Orders' grid form.

To modify the order information:

  1. Modify the 'Customer' or 'Date' then click on the 'Submit' button of the 'Add/Edit Order' record form.

To modify the order items

  1. Change the 'Product' or the 'Quantity' of the item.
  2. To add a new record click on the 'Add Item' button then enter the item information.
  3. After entering the information click on the 'Submit' button to save the information.

Steps to recreate

  1. Create a HTML table with two columns.
  2. In the left column cell of the HTML table, use the Grid Builder to create the 'Orders' grid with three columns: order_id, customer_name and order_date.
  3. On Step 2 of the Grid Builder, click on the 'Build Query' button and select the following tables: orders and customers. Select [*] (all fields) in the orders table and the customer_name field in the customers table.
  4. After creating the grid, change the control type of the 'order_id' control from 'Label' to 'Link'.
  5. For the 'order_id' link, set the Href Source property to the current page and add a link parameter with the following properties: Data Source Type = DataSource Column, Parameter Source = order_id and Parameter name = order_id.
  6. Add the 'Add' hyperlink to the bottom of the grid and set its Href Source property to the current page.
  7. In the right column cell of the HTML table, use the Record Builder to create the 'store_orders_record' record form based on the orders table with the following two fields: order_customer_id and order_date.
  8. Convert the customer_id TextBox to a ListBox. For the ListBox set the Connection property to IntranetDB  and select customers in the Data Source property. Select customer_id in the Bound Column property, customer_name in the Text Column Property and Integer in the Data Type property.
  9. In the right column cell of the HTML table and below the record form, use the Editable Grid Builder to create the 'store_orders_items' editable grid with four columns: order_id, product_id, price and quantity.
    On Step 4 of the Editable Grid Builder select "No Sorting" and "No Page Navigator".
  10. In the Data Source property of the editable grid, add a URL Where parameter: order_id equals(=) order_id.
  11. Set the Empty Rows property of the editable grid to 30. This number defines the maximum number of empty rows which could possibly appear when you click on the 'Add Item' button.
  12. Change the type of the 'order_id' control to a Hidden control.
  13. Change the type of the 'product_id' control from Text Box to List Box and set its Connection property to 'IntranetDB'. For the Data Source property select products then select product_id in the Bound Column property and product_name in the Text Column Property. Set the Data Type property to Integer.
  14. Add a column to the editable grid after the 'Quantity' column and add the 'SumPrice' Text Box to it.
  15. Add a new row above the 'No Records' row of the editable grid.
  16. Add a 'Total_price' Text Box from the HTML tab of the Toolbox.
  17. Under the Format tab of the Properties window, activate the disabled property of the 'Total_price' and 'SumPrice' Text Boxes.
  18. Add an Add Item button to the bottom row of the editable Grid. Set the Enable Validation property to No and leave the Operation property blank.
  19. Switch to HTML mode and locate the table row <TR> in the editable grid where the product_id ListBox appears. Within the <TR> tag, add the attributes id="" and name="".
  20. Place the cursor within the value of the id attribute and add a Label control called RowIDAttribute. Do the same for the name attribute and add a Label control called RowNameAttribute. After the two attributes, add a RowStyleAttribute Label at the end of the <TR> tag.
  21. Set the Content property of the 'RowStyleAttribute' Label to HTML.
  22. Add a 'PriceArray' Label control to the top of the editable Grid and set it's Content property to HTML.
  23. Add custom code to the On Click client event of the 'Add Item' button, the On Load client event of the editable Grid and the On Change client events of the 'product_id' and 'quantity' fields.
  24. Switch to HTML mode and add the code for the Show_Total(), disable_record() and disable_editablegrid() JavaScript functions as shown in the example.
  25. Add code for the Before Show, Before Delete and the After Insert events of the 'Add/Edit Order' record form as shown in the example.
  26. Add code for the Before Show Row and the Before Build Insert events of the 'Order Items' editable grid as shown in the example.
  27. Add code for the Before Show event of the 'PriceArray' Label control as shown in the example.
  28. Make cosmetic changes as needed, by modifying the text and captions within the HTML.

Database Tables used

Database: Intranet

Tables: customers, orders, order_items

Programming Notes

The record form's Before Show event is used to hide the editable grid if there are no orders selected.

The record form's After Insert event is used to retrieve the last inserted key (order_id) after the order record is created. The retrieved value is then sent over the URL by appending it to the 'redirect' variable as a URL parameter.

The record form's Before Delete event is used to delete records from the 'order_items' table whenever an order record is deleted.

The editable grid's Before Show Row event is used to fill the id, name and style attributes of the <TR> tag depending on whether the row is empty or filled.

The editable grid's Before Build Insert event is used to update the hidden 'order_id' field with the current order id.

The Before Show event of the 'PriceArray' Label is used to create an array with the product prices that will be used to auto fill the 'Price' Text Box.