At this point, you've reviewed the UI design requirements for order process. In this section, we will design the order form.

Creating new "Order" form     Open the CustomerOrders data model and navigate to the forms perspective. The default form will be displayed. Click on the "New" icon to create a new form.

Renaming the new form     Rename the form. Double click on the form name.     "Grid Name" dialog box will be displayed.  Enter "Orders Form" in the name field and click on the "OK" button.

Designing form layout     Delete columns D and E. Update the width of columns A and C to 30px. Similarly, update the width of column B to 900px.     Insert and delete icons can be used to design the form layout.

Implementing business rules     Navigate to the rules perspective. Create two public cells: "CustomerPhoneNumber" and "CustomerRef". Since the customer phone number will be unique, the sales team will use this information to identify an existing customer. Based on the phone number, the customer details must be retrieved. Write the following rule in the "CustomerRef" cell. =DSEARCH(Customer.Phone= CustomerPhoneNumber) Create a formula reference using the connect option to establish a relationship between CustomerOrders and Customer data model. This reference (many-one relationship) can be used to display the parameters from the customer model using the many-one widget.

Displaying customer details     Insert a grid as shown in the screen capture. The customer details form fields will be inserted in this grid. Section Title: "Customer Details" Form display fields: Customer phone number     Add the form input fields using the named cell widget. Add a text box for customer phone number. Apply styles using the "Cell Styles" option.

Insert a many-one form grid using the "CustomerRef(Customer)" reference to display customer details.      Add the form input and diaply fields. Customer Name Customer ID Apply styles using the "Cell Styles" option.

Displaying order summary     Insert a grid as shown in the screen capture. The customer order summary details will be inserted in this grid. Section Title: "Order Summary" Form display fields: Order ID, Order Date, Order Amount, Number of Items, Min Item Price, Max Item Price     Add the form input fields using the named cell widget. Add a textbox for Order ID Add a label widget for Order Date, Order Amount, Number of Items, Min Item Price, Max Item Price Apply styles using the "Cell Styles" option.

Displaying order details     Insert a grid as shown in the screen capture. The order details form fields will be inserted in this grid. Section Title: "Order Details" Form display fields: Category Description, Product Description, Product Colour, Product Size, Product Price, Quantity and Amount     A parent-child relationship exists between the CustomerOrders and ProductOrders data model. Use the one-many widget to insert the order details from ProductOrders data model. Add the form input fields using the named cell widget. Add a combo box for Category Description, Product Description, Product Colour, Product Size Add a label widget for Product Price and Amount Add a textbox widget for Quantity Apply styles using the "Cell Styles" option.

Insert a column in the one-many grid as shown in the screen capture.      Use the actions widget to insert a delete button in the order details row. Apply styles using the "Cell Styles" option.

Previewing order form     Click on the preview tab to preview the order form.

At this point, you've implemented the category form and product form. You've also built all the order form and added the necessary form field elements. The next step is to implement the process design for the order process. So let's get started with process design.