An order entry page example implemented as master-detail
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.
To add a new order:
- Click on the 'Add' link at the bottom of the 'Orders' grid.
- 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.
- Click on the 'Add' button.
- In the 'Order Items' editable grid, click on the 'Add Item' button then
select a 'Product' and enter the 'Quantity'.
- To add another record repeat the operation above.
- After entering all the necessary information, click on the 'Submit' button
to save the information.
To edit an order:
- Select the order by clicking on its id in the 'Orders' grid form.
To modify the order information:
- Modify the 'Customer' or 'Date' then click on the 'Submit' button of the
'Add/Edit Order' record form.
To modify the order items
- Change the 'Product' or the 'Quantity' of the item.
- To add a new record click on the 'Add Item' button then enter the item information.
- After entering the information click on the 'Submit' button to save the information.
Steps to recreate
- Create a HTML table with two columns.
- 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
- 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.
- After creating the grid, change the control type of the 'order_id' control
from 'Label' to 'Link'.
- 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.
- Add the 'Add' hyperlink to the bottom of the grid and set its Href Source
property to the current page.
- 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
- 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.
- 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".
- In the Data Source property of the editable grid, add a URL
Where parameter: order_id equals(=) order_id.
- 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.
- Change the type of the 'order_id' control to a Hidden control.
- 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.
- Add a column to the editable grid after the 'Quantity' column and add the
'SumPrice' Text Box to it.
- Add a new row above the 'No Records' row of the editable grid.
- Add a 'Total_price' Text Box from the HTML tab of the Toolbox.
- Under the Format tab of the Properties window, activate the disabled
property of the 'Total_price' and 'SumPrice' Text Boxes.
- Add an Add Item button to the bottom row of the editable Grid. Set
the Enable Validation property to No and leave the Operation
- 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="".
- 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
- Set the Content property of the 'RowStyleAttribute' Label to HTML.
- Add a 'PriceArray' Label control to the top of the editable Grid
and set it's Content property to HTML.
- 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'
- Switch to HTML mode and add the code for the Show_Total(), disable_record()
- 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.
- Add code for the Before Show Row and the Before Build
Insert events of the 'Order Items' editable grid as shown in the
- Add code for the Before Show event of the 'PriceArray' Label
control as shown in the example.
- Make cosmetic changes as needed, by modifying the text and captions within
Database Tables used
Tables: customers, orders, order_items
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'