Blog: Posts from October, 2012

Blog

Posts from October, 2012

Friday, October 19, 2012Print Subscribe

When creating a new order, the first item that will be entered will probably be the customer. Due to the denormalized nature of Northwind database, the customer information is stored in the table Customers, and the Orders table references a customer via a foreign key field CustomerID. Upon creating a new order, it would be convenient if the user were prompted to either select an existing customer or create a new one. When the customer is selected, the shipping information should be copied from the customer to the order.

Switch back to the Designer. In the Project Explorer, double-click on Order Form / c101 / view1 / grid1 / CustomerID –> CustomerCompanyName / CustomerID (String(5)) field reference node.

Enter the following settings for CustomerID:

Property	New Value
Data Value Field	CustomerID
Data Text Field	CompanyName
Copy	ShipName=ContactName ShipAddress=Address ShipCity=City ShipRegion=Region ShipPostalCode=PostalCode ShipCountry=Country
Search on Start	true
Activate If Blank	true
Lookup Window Description	Select a customer.

Press OK to save the field.

When the customer has been selected, we’d want the application to prompt the user to select the employee handling the order. To make this part easier, let’s add photos of each employee in the lookup.

In the Project Explorer, double-click on Order Form / c101 / view1 (Orders) / grid1 / EmployeeID –> EmployeeLastName / EmployeeID (Int32) field reference node.

Change the following settings for EmployeeID:

Property	New Value
Activate If Blank	true
Lookup window description	Select an employee.

Press OK to save the record.

Switch to the Controllers tab at the bottom of the Project Explorer. Expand the Fields and Views nodes of Employees controller. Drag and drop Employees / Fields / Photo (Byte[]) field node onto Employees / Views / grid1 view node.

On the Project Designer toolbar, press Browse, and wait for the application to load. Navigate to the Order Form page, and press New Orders on the action bar. You will be prompted to select a customer.

When you search for and select a customer, you will then be prompted to select an employee. You can see the photo for each employee as well.

Select the employee, and you will see that the shipping fields have been populated from the selected customer.

Labels: Designer, Tutorials, Web Application Generator

Friday, October 19, 2012Print Subscribe

Order Form Sample–Part 8

Now that the Order Form page has been set up, we will want to customize several settings. First, we shall optimize the Orders controller. The list of order is currently displayed in alphabetical order of Customer Company Name. It would make more sense to sort the orders according to the date the order was made.

Switch back to the Designer. In the Project Explorer, double-click on Order Form / c101 / view1 (Orders) / grid1 data view node.

Change the Sort Expression to the following:

Property	New Value
Sort Expression	OrderDate desc

Press OK to save the view. On the toolbar, press Browse to regenerate the application. If you navigate to Order Form page, you will see that the orders are sorted in descending order of Order Date.

Labels: Designer, Tutorials, Web Application Generator

Friday, October 19, 2012Print Subscribe

Order Form Sample–Part 7

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.

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.

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.

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.

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.

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.

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.

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.

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

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

Labels: Designer, Tutorials, Web Application Generator