Pages

  Using Drag and Drop to Configure a Master-Detail Page

Using Drag and Drop to Configure a Master-Detail Page

Master-detail pages can be quickly created in Code On Time web applications using drag and drop operations in the Project Designer.

Creating a Page

Start the Project Designer. In the Project Explorer toolbar, press New Page.

New Page toolbar option in the Project Explorer of web application designer.

Assign the following properties, and press OK to save the page.

Property Value
Name Master Detail Page

The page will appear at the bottom of the page hierarchy in the Project Explorer. Drop it on the right side of Home node to place it in the second position in the navigation menu.

Dropping Master Detail Page on the right side of Home page.     Master Detail Page placed after Home page in the Project Explorer.

Adding Data Views

Switch to the Controllers tab. While holding down Ctrl key, click on the controllers in this order: Customers, Orders, OrderDetails. Right-click on OrderDetails node and select Copy.

Copy context menu option for three selected controllers in the Project Explorer.

Switch back to the Pages tab. Right-click on Master Detail Page and press Paste. The three copied controllers will be pasted as data views each in their own container.

Paste context menu option for a page node in the Project Explorer.     Master Detail Page with three new data views in individual containers after pasting.

Configuring Master-Detail Relationships

The data views have been added to the page, but there are no relationships between them yet.

Expand to Master Detail Page / c102 / view2 / grid1 / CustomerID data field node. Drag CustomerID and drop on view1 node. The data view view2 will be configured to filter orders by the customer selected in view1 data view.

Dropping CustomerID data field from view2 to view1.     Data view 'view2' is now configured with a master-detail relationship with 'view1'. Records will be filtered according to the selected record in 'view1'.

Expand to Master Detail Page / c103 / view3 / grid1 / OrderID data field node. Drag OrderID and drop on view2 node. Data view view3 will be configured to filter order details by the order selected in view2 data view.

Dropping OrderID data field node on 'view2'.     Data view 'view3' is now configured with a master-detail relationship with 'view2'. Records will be filtered according to the selected record in 'view2'.

Testing the Three-level Master-Detail Page

In the Project Explorer, right-click on Master Detail Page node and press View in Browser.

View in Browser context menu option for a page node in the Project Explorer.

The web application will be generated and the page will open in your default browser. Select a customer, and a list of related orders will appear underneath. Select an order, and related order details will be displayed.

Master Detail Page configured with a three-level master-detail relationship.

Further Customization

The standard form views have their fields rendered top down. The screenshot shows form views of related customer and order.

The standard form views have their fields rendered top down.

Let’s customize the presentation of both form views.

Switch back to the Project Designer. In the Project Explorer, double-click on Master Detail Page / c101 / editForm1 / c1 category node.

Category c1 in editForm1 of Customers controller.

Change the Floating property to “Yes”, and press OK to save the category.

Property New Value
Floating Yes

In the Project Explorer, right-click on Master Detail Page / c102 / view2 / editForm1 / c1 node and press New Category.

New Category context menu option for the view 'editForm1'.

Assign the following properties.

Property New Value
Header Text Shipping Info
New Column Yes

Drag all the Ship- data fields from c1 – Orders category and drop them on c2 – Shipping Info category.

Dropping all shipping data fields on 'c2' category.     All shipping data fields have been moved into 'c2' category.

Right-click on Master Detail Page node, and press View in Browser.

View in Browser context menu option for Master Detail Page in the Project Explorer.

When the page loads, select a customer from the list. The form view will be more compact as the fields are floating. Click on an order – the data fields will be split in two columns.

Master Detail Page with customized categories for Customers and Orders. Master Detail Page with customized categories for Customers and Orders.

If you select an order detail record, it will show up in a modal window. This behavior has been configured automatically when the master-detail relationship was established between view3 (Order Details) and view2 (Orders) data views.

If you select an order detail record, it will show up in a modal window.

Table of Contents