Tutorials

Let’s create a page with a three-level master-detail relationship between Customers, Orders, and Order Details controllers.

Creating the Page

Start the Project Designer. On the toolbar of the Project Explorer, click on the New Page icon.

Enter “OrderManager” in the page Name and press OK to create a new page.

The Order Manager page will be added to the bottom of the list of pages in the Project Explorer. Drag Order Manager node to the right side of Home node to place it after the page.

Switch to the Controllers tab in the Project Explorer. While holding Ctrl, select the controllers in the following order: Customers, Orders, OrderDetails. Right-click on OrderDetails, and press Copy.

Switch back to the Pages tab. Right-click on Order Manager page node, and press Paste option. The controllers will be instantiated as data views in separate containers on the page.

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

Navigate to the Order Manager page. Three views will be available on the page, but they do not have any master-detail relationships established between them. The three data views are completely independent from each other.

Establishing Master-Detail Relationships

Switch back to the Project Designer. In the Project Explorer, drag the data field node Order Manager / c102 / view2 / grid1 / CustomerID onto the view node Order Manager / c101 / view1. This will configure a master-detail relationship between view2 and view1, with CustomerID as the filter field.

Next, drag the data field node Order Manager / c103 / view3 / grid1 / OrderID and drop it onto view node Order Manager / c102 / view2.

On the toolbar, press Browse.

Only the Customers data view is now visible on the Order Manager page.

Select a record from the list of customers, and orders related to the selection will appear in a data view underneath.

Select an order, and order details for that order will be displayed.

Select a child order detail. The record will be displayed in a modal form.

If a master data view enters “New” mode, the child data views will automatically become hidden.

For example, if a new customer is created, the data views Orders and Order Details will be invisible. If a new order is created, only Order Details data view will disappear.

Note that the field being used to filter must have Allow Query-by-Example enabled.

The Project Designer allows customizing the pages and data controllers of the web application.

To activate the Project Designer, click on a project name on the start page of the application generator.

Then, click on the Design button.

The Project Designer will open.

On the left side of the screen is the Project Browser. The right side contains the Project Explorer.

Project Browser

The Project Browser allows navigating the project configuration elements. The tabs display lists of pages, data controllers, user controls, commands, fields, views, and data fields.

Navigate to the properties page of an element by clicking on the link in the first column or using the context menu option Open.

The properties page of the project configuration element will open. The breadcrumbs in the path area above the Project Browser show the location of the object. The tabs at the top of the page will change to reflect project configuration elements that belong to the currently selected element.

Quickly access the Learning System article for the selected project configuration element by clicking on the question mark icon in the top right corner.

The Project Explorer can be synchronized with the current Project Browser element by using the Sync command on the action bar or pressing Ctrl+Period keyboard shortcut (“Ctrl” key and “.” key).

Project Explorer

The Project Explorer displays a logical hierarchy of project configuration elements separated into three tabs: Pages, Controllers, and User Controls.

Double-click on a node in the Project Explorer or use the Open context menu option to display the properties page for the relevant element.

Drag project elements to change the application configuration. As an alternative, you can use Cut/Copy/Paste options in the context menu of project configuration element nodes. These operations can be performed on multiple selected elements of the same type.

Node names of project configuration elements can be changed using the Rename context menu option.

Navigate To

The Navigate To window will search for project configuration elements by property values as soon as you type a sample search criteria.

The window can be activated by clicking on the Navigate To icon on the Project Explorer toolbar or pressing the Ctrl+Comma keyboard shortcut (“Ctrl” key and “,” key).

The Navigate To window will open. Start typing search terms. Matching entries will appear as soon as you stop typing.

Highlight a result and press OK or press Enter on the keyboard to open the properties page of the element in the Project Browser and have it highlighted in the Project Explorer.