Code On Time: Master/Detail

Blog

Master/Detail

Thursday, April 19, 2012Print Subscribe

Code On Time web applications allow flexible configuration of complex master/detail pages. Child views are automatically displayed when a master record is selected. There is no limit on the number master/detail levels on a page.

Consider the following master/detail page Customers with the Classic layout. The top data view displays a list of customers with one customer selected. Child data views Orders, Customer Demo, and Order Details are accessible via tabs and displayed related child records. This screen shot is taken from the Northwind sample.

There are situations when a detail view must be displayed only if the master record meets a certain criteria.

Consider the master list of employees from the same sample. Two employees in the list have other employees reporting to them. Mr. Fuller leads the company with top managers reporting directly to him. Mr. Buchanan leads the sales team and have subordinates as well.

The Employees page does have a detail data view of employees linked to the master data view shown above. It makes sense to create a condition that will make the detail data view visible if the master employee’s Title is “Vice President, Sales” or “Sales Manager”.

Select the project on the start page of the application generator and choose Design option.

Select the Employees / container2 / view2 (Employees, grid1) data view node in Project Explorer on Pages tab and change its properties as follows.

Property	New Value
Visible When	[Master.Title] == 'Vice President, Sales' \|\| [Master.Title] == 'Sales Manager'

Click OK button to save the changes and Browse the application. Navigate to the Employees page and you will notice that the child view in the master/detail relationship Employees.ReportsTo => Employees.EmployeeID is working in conditional fashion. The child data view Employees is not displayed when an employee other than Fuller or Buchanan is selected.

The expression in Visible When property is written in JavaScript. This expression is being evaluated at runtime. The word Master refers to the master data view. Any name following after “Master.” placed in square brackets is considered to be the value of the field in the master data view, whatever that master data view happens to be.

If a master record does not meet the criteria, then the child data view Employees / container2 / view2 (Employees, grid1) is hidden on the page.

If a master record does meet the criteria, then the child data view Employees / container2 / view2 (Employees, grid1) is visible on the page along with view3 (Orders, grid1) and view4 (EmployeeTerritories, grid1).

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

Thursday, April 12, 2012Print Subscribe

Displaying Modal Form Views

Web applications generated with Code On Time use an in-place form when a user drills in to a master record, such as the selected Supplier in the picture below.

Modal presentation is used for master data views without children and for child data views. The picture below shows the modal form view displayed when a Product is selected in the child data view.

You can change the presentation of a data view using the “Show Modal Form” property.

Start Code On Time web app generator, click on the project name, and press Design. Double-click on Region / Suppliers / container2 / view2 node in the Project Explorer. Uncheck the Show Modal Forms property.

Press OK to save the data view. On the tool bar, press Generate to regenerate the web application.

When the web application opens in your default web browser, navigate to Suppliers page, and select any supplier. Select a product in the child data view, and you will see the record form opened in-place. Users drill into the details of a record in the grid view.

There is also an option in the Project Wizard to control modal presentation of form views for the entire application.

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

Thursday, April 12, 2012Print Subscribe

Controlling Modal Presentation of Application Form Views

By default, Code On Time web applications use modal forms to display child data views and master data views without children, such as the one in the picture below. (In this example, the data fields in the category are floating in the form, instead of the traditional top-down presentation.)

The Project Wizard allows you to disable this functionality across all application pages.

Start the web application generator, click on the project name, and select Settings. Choose Features option. In the list on the left side of the page, select Form Properties. Uncheck “Show modal forms in master data views without children and in child data views”.

Press Finish to get to the Summary page. Select Refresh to have the generator recreate the pages without modal form views. If any of the pages have been modified, then the changes will not be applied, according to the refreshing conditions.

As this property does not apply to any specific controllers, none of them need to be selected for refresh. Press Refresh, and choose Yes to confirm the operation.

Continue to generate the application.

When the web application opens in your default web browser, navigate to Customers page, select a customer, and view any order. The data views will drill into form view instead of being displayed in a lightbox style above the list of Orders.

You can also enable or disable presentation of child views on a data view level of individual pages.

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