Code On Time: Web Application Generator

Friday, September 7, 2012Print Subscribe

The Northwind database features a many-to-many relationship between Territories and Employees.

The app generator will create a page for EmployeeTerritories that allows editing records directly.

EmployeeTerritories is also available as a child data view on the Employees page. Selecting an employee will reveal a list of related territories.

Let’s create a many-to-many field on the employee edit form that will allow selecting territories in a check box list. Each option in the list will represent a territory from the Territories table. The checkbox next to the territory name will be checked if there is a record in the EmployeeTerritories table linking the selected employee with the territory. The relevant EmployeeTerritories records will be inserted or deleted when the user changes the selection of checkboxes and saves the employee record.

Start the Project Designer. In the Project Explorer, switch to the Controllers tab. Right-click on Employees / Fields node, and press New Field.

Give this field the following values:

Property	Value
Name	Territories
Allow null values	true
The value of this field is computed at run-time by SQL expression.	true
Label	Territories
Items Style	Check Box List
Items Data Controller	Territories
Data Value Field	TerritoryId
Data Text Field	TerritoryDescription
Target Controller	EmployeeTerritories

Press OK to save the field.

Drag Employees / Fields / Territories field node onto Employees / Views / editForm1 view node.

Double-click on Employees / Views / editForm1 / Territories data field node.

Change the Columns property:

Property	Value
Columns	5

Press OK to save. Switch to the Pages tab. Right-click on Employees page node, and press View in Browser.

View the details for an employee. Territories field will display a comma-separated list of values associated with the employee.

Press Edit button. All territories will be rendered as a check box list.

Check or uncheck several values, and press OK to save the record. Select the record to verify that the changes were persisted.

Changing the Child Views

The Employee Territories child data view is now unnecessary.

Switch back to the Project Designer. In the Project Explorer, right-click on Employees / container2 / view4 node, and press Delete.

Drag view3 node on the left side of view2 to place it in the first position.

Right-click on Employees page node, and press View in Browser.

Select an employee from the list, and the Orders and Employees child data view tabs will appear below. The Employee Territories child data view tab is no longer present. The picture also shows the many-to-many field Territories in the master grid view.

Labels: Tutorials, Web Application Generator

Friday, September 7, 2012Print Subscribe

Configuring Charts

Let’s create a chart that will graphically present orders broken down by quarter.

Creating the View

Start the Project Designer. In the Project Explorer, activate the Controllers tab. Right-click on Orders / Views node, and press New View.

Give this view the following properties:

Property	Value
Id	OrdersByQuarter
Type	Chart
Label	Orders By Quarter

Press OK to save the view.

A chart requires at least two fields. One field will represent the values, and the other will form the x-axis of the chart that will group values by a certain criteria. A chart may have more than one field representing values.

For example, to display a chart of orders grouped by quarter, the OrderID field will represent values and OrderDate will represent the x-axis.

In the Project Explorer, expand the Orders / Fields node. Using Ctrl key, select OrderID and OrderDate fields, and drag them onto Orders / Views / OrdersByQuarter view node.

This will create two data fields. Double-click Orders / Views / OrdersByQuarter / OrderID data field node.

Assign the following values:

Property	Value
Aggregate	Count
Chart	Bar (Cylinder)

Press OK to save the data field. Double-click Orders / Views / OrdersByQuarter / OrderDate data field node.

Assign these values:

Property	Value
Data Format String	MMM yyy
Chart	X, Quarter

Press OK to save.

Viewing the Results

On the Project Designer toolbar, press Browse.

Navigate to the Order Manager page. Select a customer from the first data view. Use the View Selector in the top right corner of Orders data view to switch to Orders By Quarter view.

The chart will be displayed, showing the number of orders in each quarter filtered by the selected customer.

If you select another customer, the orders will change to reflect the new selection.

Labels: Charts, Tutorials, Web Application Generator

Thursday, September 6, 2012Print Subscribe

Allow Query-by-Example

The application generator automatically configures all data controller fields for adaptive filtering. Only “blob” fields such as pictures and long text fields are excluded. Fields created manually will have filtering disabled. The Allow Query-by-Example property controls if adaptive filtering is allowed for a field.

Disable Filtering

Query-by-Example can be disabled to prevent filtering on a field.

Start the Project Designer. In the Project Explorer, double-click on Products / Fields / ProductName node.

Disable Allow Query-by-Example.

Property	New Value
Allow Query-by-Example	false

Press OK to save the field. On the toolbar, press Browse.

Navigate to the Products page. Click on the Product Name header. No filtering options will be available.

The Product Name field will not be available for search in the advanced search bar.

Enable Filtering on Large Text Fields

Large text fields do not have filtering enabled because most search operations would not work, such as auto-complete, sampling, and multiple values. For Microsoft SQL Server, the only available search options are “contains” and “does not contain”.

Let’s enable filtering for the Description field in the Categories controller.

In the Project Explorer, double-click on Categories / Fields / Description node.

Enable Query-by-Example.

Property	New Value
Allow Query-by-Example	true

Press OK to save the field.

In the Project Explorer, double-click on Categories / Views / grid1 / Description data field node.

Change the Search Options property.

Property	New Value
Search Options	$disablesamples, $disablemultiplevalues, $disableautocomplete, $contains, $doesnotcontain

Press OK to save the data field. On the toolbar, press Browse.

Navigate to the Categories page. Activate the dropdown in the Description column header. Two text filters are now available – contains and does not contain.

The filters will also be available on the advanced search bar.

Labels: Tutorials, Web Application Generator