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. New Page toolbar option in the Project Explorer of web application designer.](/blog/2012/08/feature-drag-and-drop-everywhere/image02.png)
Drag the new page to the right side of the Home page and drop to have it moved.
![Master Detail Page placed after Home page in the Project Explorer. Master Detail Page placed after Home page in the Project Explorer.](/blog/2012/08/feature-drag-and-drop-everywhere/image06.png)
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. Copy context menu option for three selected controllers in the Project Explorer.](/blog/2012/08/feature-drag-and-drop-everywhere/image08.png)
Paste the controllers to the Master Detail Page.
![Master Detail Page with three new data views in individual containers after pasting. Master Detail Page with three new data views in individual containers after pasting.](/blog/2012/08/feature-drag-and-drop-everywhere/image12.png)
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.
![Data view 'view2' is now configured with a master-detail relationship with 'view1'. Records will be filtered according to the selected record in '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'.](/blog/2012/08/feature-drag-and-drop-everywhere/image16.png)
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.
![View3 has been configured to filter order details by the selected order. View3 has been configured to filter order details by the selected order.](/blog/2012/08/feature-drag-and-drop-everywhere/image20.png)
View the page in the browser.
![View in Browser context menu option in the Project Explorer. View in Browser context menu option in the Project Explorer.](/blog/2012/08/feature-drag-and-drop-everywhere/image22.png)
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. Master Detail Page configured with a three-level master-detail relationship.](/blog/2012/08/feature-drag-and-drop-everywhere/image24.png)
Learn more about advanced configuration of master-detail pages.