Feature Tour
Drag and Drop Development

Everything in a Code On Time web application project can be configured with drag and drop and Cut/Copy/Paste with multiple selection. For example, master-detail pages can be quickly configured by dragging and dropping project configuration elements.

Start the Project Designer and create a new page called “Master Detail Page”.

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

Drag the new page to the right side of the Home page and drop to have it moved.

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

While holding down Ctrl key, select Customers, Orders, OrderDetails data controllers and copy them to the clipboard.

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

Paste the controllers to the Master Detail Page.

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.

Drag CustomerID data field node onto view1. 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'.

Drag OrderID data field node onto view2. Data view view3 will be configured to filter order details by the order selected in view2 data view.

Dropping OrderID data field node onto view2.      View3 has been configured to filter order details by the selected order.

View the page in the browser.

View in Browser context menu option in the Project Explorer.

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.

Learn more about advanced configuration of master-detail pages.