Code On Time: Master/Detail

Monday, August 6, 2012Print Subscribe

Using Drag and Drop to Configure a Master-Detail Relationship

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.

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.

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.

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.

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.

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.

Testing the Three-level Master-Detail Page

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

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.

Further Customization

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

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.

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.

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.

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

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.

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.

Labels: Designer, Master/Detail, User Interface, Web Application Generator

Saturday, June 30, 2012Print Subscribe

Action “Client Script”

Client Script actions allow execution of arbitrary JavaScript code. For example, an action with command name Client Script can select a page of data that contains a specific record in response to user actions. This example takes advantage of automatic tracking of selected records supported by the application framework.

The Employees table of the Northwind sample has a foreign key column ReportsTo that references the table itself. Code On Time generator automatically creates a master-detail relationship on the Employees page. Let’s configure an action on the Employees data controller to select a specific record in the master view.

There are two data views on the Employees page hooked to the Employees controller. Let’s tag the top view as a “master list” of employees.

Start the Project Designer. In the Project Explorer, double-click on Employees / container1 / view1 node.

Change the following properties:

Property	New Value
Tag	MasterList
Page Size	3

Press OK to save the data view.

Next, add an action to perform synchronization of the master list with a specific EmployeeID. Right-click on Customers / container1 / view1 / Actions / ag1 (Grid) node, and select New Action.

Give this action the following properties:

Property	Value
Command Name	Client Script
Command Argument	Web.DataView.find('MasterList', 'Tag').sync(this.fieldValue('EmployeeID'))
Header Text	Show in Master List

Press OK to save the action. On the toolbar, select Browse button.

On the Employees page, select Andrew Fuller from the list. An Employees child data view will open underneath. Activate the context menu for Steven Buchanan and select Show in Master List option.

The master data view will move to the page that contains Steven Buchanan with the corresponding row selected. The child data view will refresh showing employees reporting to Mr. Buchanan.

Using the context menu for Robert King, select Show in Master List.

Robert King will be selected on the third page of the master view.

Labels: Business Rules/Logic, Designer, Master/Detail, Web Application Generator

Thursday, May 17, 2012Print Subscribe

Limiting Access to Data Views With Roles

The visibility of a data view on a page can be controlled with Visible When expression written in JavaScript. For example, the child data view in a master-detail configuration may or may not be visible if a master field has a certain value.

Both, master and detail data views may have additional visibility requirements that have nothing to do with the data. The user identity may be a contributing factor. For example, only administrative users can see certain data views on the pages that are available to other user roles as well.

Property Roles allows introducing additional level of identity control to complement Visible When expression.

Start Project Designer for Northwind sample and select Customers page in the Project Explorer hierarchy.

Change Customers / container1 / view1 (Customers, grid) data view node.

Property	New Value
Activator	Tab
Text	Customers

Add two data views to the Customers / container1 node with the following properties.

Data View #1

Property	Value
Controller	Employees
Activator	Tab
Text	Employees
Roles	Administrators

Data View #2

Property	Value
Controller	Products
Activator	Tab
Text	Products
Roles	Administrators

Change Customers / Container2 / view2 (Orders, grid1) data view node.

Property	New Value
Roles	Administrators

Change Customers / Container2 / view3 (CustomerCustomerDemo, grid1) data view node.

Property	New Value
Roles	Administrators

This is the hierarchy of the modified Customers page.

Click Browse on the designer toolbar to generate the app. Sign in with the standard user account user/user123%.

This is the view of Customers page as seen by non-administrative user account.

Logout and sign in as admin/admin123%. This user belongs to the role Administrators.

This is how administrator sees the same page.

Labels: Application Factory, Master/Detail, Security, Workflow