Sample Applications / Order Form

  Adding the Order Form Page

Table of Contents
Sample Applications / Order FormPrint||
Adding the Order Form Page

Let’s create a new page in the application. Switch back to the web application generator, click on the “OrderForm” project name, and press Design.

The design environment allows you to change logical aspects of the project, and consists of two primary elements. The Project Designer, on the left side of the screen, displays a list of objects or properties of the selected object. On the right side of the screen, the Project Explorer allows you to browse and manipulate pages, controllers, and user controls. At the top of the screen, there are several buttons. The Generate button regenerates the web application and displays it in a built-in browser window, called Preview. The Browse button will regenerate the application and open it in your default browser. The Exit button goes back to the web application generator.

The Project Browser and Project Explorer panes of the Project Designer window.

Let’s add a new page called Order Form. In the toolbar of the Project Explorer, press the New Page icon.

New Page context menu option on the toolbar of the Project Explorer.

Give this page the following settings:

Property Value
Name OrderForm
Description This is the order management form.
Style Miscellaneous
About This Page This is the order management form.
Roles (blank)

Press OK to save the page. The page will be added to the bottom of the hierarchy. Drag the new Order Form page node to the right side of Home node to place it second in the hierarchy.

Dropping Order Form page node on the right side of Home page.    Order Form page has been placed second in the hierarchy.

We’ll need to add a container to this page to store the data views. In the Explorer, right-click on the Order Form page, and press New Container.

New Container context menu option on a page node in the Project Explorer.

None of the default properties need to be changed, so just press OK to save the container.

Let’s instantiate two controllers on the page. In the Project Explorer, switch to the Controllers tab. While holding Ctrl key, select Orders and OrderDetails nodes in that order. Right-click and select Copy.

Copy context menu option for Orders and OrderDetails controllers.

Switch back to the Pages tab. Right-click on the container and press Paste. The data controllers will be added to the container as data views.

Paste context menu option on container 'c101' in the Order Form page.     Orders and OrderDetails instantiated as data views on the Order Form.

Drag Order Form / c101 / view2 (OrderDetails) / grid1 / OrderID data field node onto Order Form / c101 / view1 (Orders) data view node. This will configure a master-detail relationship between the two views, with OrderID as the filtered field.

Dropping OrderID data field node onto view1 data view node to establish a master-detail relationship.     Master-detail relationship established between view2 and view1.

Double-click on Order Form / c101 / view2 (OrderDetails) data view node. Change the following settings:

Property New Values
Page Size 300
Show View Description false
Show View Selector false
Show Pager None

Press OK to save the data view. In the Project Explorer, right-click on Order Form page node, and press View in Browser.

View in Browser context menu option for Order Form page node.

Wait for the web application to be generated, and it will open in your default browser. Log in, and you will see Order Form page on the menu bar and the site map.

Order Form page present on the site menu and site map.

Click on the Order Form link, and you will see a list of orders.

A list of orders displayed on the Order Form.

Select an order, and relevant order details will appear underneath.

When an order is selected, order details are displayed underneath.