Master/Detail

Labels
AJAX(112) App Studio(9) Apple(1) Application Builder(245) Application Factory(207) ASP.NET(95) ASP.NET 3.5(45) ASP.NET Code Generator(72) ASP.NET Membership(28) Azure(18) Barcode(2) Barcodes(3) BLOB(18) Business Rules(1) Business Rules/Logic(140) BYOD(13) Caching(2) Calendar(5) Charts(29) Cloud(14) Cloud On Time(2) Cloud On Time for Windows 7(2) Code Generator(54) Collaboration(11) command line(1) Conflict Detection(1) Content Management System(12) COT Tools for Excel(26) CRUD(1) Custom Actions(1) Data Aquarium Framework(122) Data Sheet(9) Data Sources(22) Database Lookups(50) Deployment(22) Designer(178) Device(1) DotNetNuke(12) EASE(20) Email(6) Features(101) Firebird(1) Form Builder(14) Globalization and Localization(6) How To(1) Hypermedia(2) Inline Editing(1) Installation(5) JavaScript(20) Kiosk(1) Low Code(3) Mac(1) Many-To-Many(4) Maps(6) Master/Detail(36) Microservices(4) Mobile(63) Mode Builder(3) Model Builder(3) MySQL(10) Native Apps(5) News(18) OAuth(9) OAuth Scopes(1) OAuth2(13) Offline(20) Offline Apps(4) Offline Sync(5) Oracle(11) PKCE(2) Postgre SQL(1) PostgreSQL(2) PWA(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(184) Reports(48) REST(29) RESTful(29) RESTful Workshop(15) RFID tags(1) SaaS(7) Security(81) SharePoint(12) SPA(6) SQL Anywhere(3) SQL Server(26) SSO(1) Stored Procedure(4) Teamwork(15) Tips and Tricks(87) Tools for Excel(3) Touch UI(93) Transactions(5) Tutorials(183) Universal Windows Platform(3) User Interface(338) Video Tutorial(37) Web 2.0(100) Web App Generator(101) Web Application Generator(607) Web Form Builder(40) Web.Config(9) Workflow(28)
Archive
Blog
Master/Detail
Friday, May 11, 2012PrintSubscribe
Configuring a Three-Level Master-Detail Page

Master-detail relationships are present in all database web applications. Code On Time automatically generates two-level master-detail page layouts from your database.

You can also create three or more levels of master-detail relationships. For example, view the diagram from the Northwind database below. Order Details table references Orders table, which references Customers.

Customers, Orders, and Order Details table relationships in the Northwind database.

Let’s create a master-detail page that allows the user to select the customer, the order, and then view the order details.

Create a Northwind web application. Start the Project Designer. In the Explorer, right-click on Home page node and choose New Page option.

'New Page' option in Code On Time Project Explorer.

Give this new page the following properties:

Property Value
Name ThreeLevelMasterDetail
Index 1005
Title Three-Level Master-Detail
Path Three-Level Master-Detail
Style Miscellaneous
About This Page

This page will demo a three level master-detail data layout.

Roles (blank)

Press OK to save the page.

Let’s add containers to hold the master and detail data views. In the Project Explorer, right-click on Three-Level Master-Detail page node, and select New Container.

'New Container' option for 'Three-Level Master-Detail' page in Project Explorer.

Give this container the following properties:

Property Value
Flow New Row

Press OK to save the container. Create two more containers:

Property Value
Flow New Row
CSS Style Properties padding-top:8px;

Property Value
Flow New Row
CSS Style Properties padding-top:8px;

Let’s add a data view in each container. Right-click on Three-Level Master-Detail / c100 container node, and select New Data View option.

'New Data View' option for 'c100' container in the Project Explorer.

Give the new data view the following properties:

Property Value
Controller Customers
View grid1
Text Customers
Show in Summary True
Page Size 5

Press OK to save the data view. Right-click on Three-Level Master-Detail / c101 container node, and choose New Data View.

'New Data View' option for 'c101' container in the Project Explorer.

Give the data view the following properties. The Filter Field is a field in the child view that match the primary key of the master view.

Property Value
Controller Orders
View grid1
Text Orders
Page Size 5
Show View Selector False
Filter Source dv100
Filter Field #1 CustomerID
Auto Hide Container

Press OK to save. Create one more data view by right-clicking on Three-Level Master-Detail / c102 container node and selecting New Data View.

'New Data View' option for 'c102' container in the Project Explorer.

Use the following properties:

Property Value
Controller OrderDetails
View grid1
Text Details
Page Size 5
Show View Selector False
Filter Source dv101
Filter Field #1 OrderID
Auto Hide Container

Press OK to save the data view. On the tool bar, press Browse to generate the application.

When it opens in your default browser, navigate to the Three-Level Master-Detail page.

Select a Custom from the list on the Three-Level Master-Detail page.

First, select a Customer from the list. A child data view will open underneath, showing Orders.

Upon selecting a Customer from the list, Orders data view will be displayed.

Select an Order, and a list of Order Details will appear below.

All three data views visible in the master-detail relationship on the Customers page.All three data views visible in the master-detail relationship on the Customers page.

Friday, May 4, 2012PrintSubscribe
Activating a Stored Procedure With a Master-Detail Relationship

An output caching script can be activated with user-defined filters.

Filters explicitly exist in the configuration of master/detail pages. Frequently, custom result sets are produced with the master ID specified as a parameter of a stored procedure or web service. The output may be presented as a detail view in the user interface.

Let’s place a data view of customer order history produced by CustOrderHist stored procedure on the Customers page in Northwind sample.

Activate the Project Designer and right-click Customers / container2 node. Select New Data View option to create a new data view.

Adding a data view to a page container in a web app created with Code On Time application generator

Enter the following properties and click OK button.

Property Value
Controller CustOrderHist_Cache
View grid1
Activator Tab
Text Order History
Page Size 5
Filter Source view1
Filter Field #1 Customer ID
Auto Hide Container

The output cache controller CustOrderHist_Cache has its SQL Business Rules configured to execute the output caching script to capture the data rows produced by CustOrderHist stored procedure.

Click Browse button on the designer tool bar. A browser window will open. Navigate to the Customers page and select  a customer. Switch to the Order History tab to view the customer order history.

Selection of a master data row in a grid view causes execution of the output caching script. The stored procedure 'CustOrderHist' is invoked if more that 30 seconds have passed since the last selection of the master data row.

If the Order History tab is visible, then the output caching script will execute every time you select a customer in the master grid view or navigate to a master data row in the form view. The stored procedure CustOrderHist will be invoked by the script only if more than 30 seconds have passed since the last selection of the same master data row.

Selection of a master data row in a form view causes execution of the output caching script. The stored procedure 'CustOrderHist' is invoked if more that 30 seconds have passed since the last selection of the master data row.

Sunday, April 29, 2012PrintSubscribe
Using Calculated Field as User-Friendly Foreign Key Identity

Let’s examine two tables in the Northwind database, Employees and Orders. Each order is linked to an employee via the EmployeeID foreign key relationship.

Employees and Orders table diagram from the Northwind database

A Code On Time web application will perform automatic denormalization and use the LastName field as alias for EmployeeID. This field is shown below, labeled “Employee Last Name”.

Default Orders edit form with 'Employee Last Name' field

The end user may want to see the full name of the employee instead.

Let’s create a calculated field that combines First Name and Last Name of the employee, and use this field as an alias for EmployeeID in both Employees and Orders controllers.

Creating the Calculated Field in Employees Controller

Activate the Project Designer. In the Explorer, switch to Controllers tab. Let’s take a look at the command of Employees controller. Double-click on Employees / Commands / command1 node.

Employees 'command1' in Code On Time Project Explorer

Take a look at the text of the command.

select
    "Employees"."EmployeeID" "EmployeeID"
    ,"Employees"."LastName" "LastName"
    ,"Employees"."FirstName" "FirstName"
    ,"Employees"."Title" "Title"
    ,"Employees"."TitleOfCourtesy" "TitleOfCourtesy"
    ,"Employees"."BirthDate" "BirthDate"
    ,"Employees"."HireDate" "HireDate"
    ,"Employees"."Address" "Address"
    ,"Employees"."City" "City"
    ,"Employees"."Region" "Region"
    ,"Employees"."PostalCode" "PostalCode"
    ,"Employees"."Country" "Country"
    ,"Employees"."HomePhone" "HomePhone"
    ,"Employees"."Extension" "Extension"
    ,"Employees"."Photo" "Photo"
    ,"Employees"."Notes" "Notes"
    ,"Employees"."ReportsTo" "ReportsTo"
    ,"ReportsTo"."LastName" "ReportsToLastName"
    ,"Employees"."PhotoPath" "PhotoPath"
from "dbo"."Employees" "Employees"
    left join "dbo"."Employees" "ReportsTo" on "Employees"."ReportsTo" = "ReportsTo"."EmployeeID"

You can see the alias “Employees” in front of the LastName and FirstName columns. You will need to use this alias when referring to columns of the Employees table in the SQL Formula of the calculated field.

Make sure not to modify and/or save the command – the code generator
will stop automatically updating the command if you do so.

Let’s create the new field. Right-click on Employees / Fields node and select New Field option.

New Field for Employees data controller

Give this field the following settings:

Property Value
Name EmployeeFullName
Allow Null Values True
The value of this field is computed at run-time by SQL expression.
"Employees"."LastName" + ', ' + "Employees"."FirstName"
Label Employee Full Name
Values of this field cannot be edited True
Allow Query-by-Example True
Allow Sorting True

Press OK to save the new field.

Now let’s change the data fields in the grid view. In the Project Explorer, double-click on Employees / Views / grid1 / LastName data field node.

'LastName' data field in grid1 view of Employees controller

Make the following change:

Property New Value
Field Name EmployeeFullName

Press OK to save the data field. In the Project Explorer, right-click on Employees / Views / grid1 / FirstName data field node, and choose Delete option. Select OK to confirm the delete operation.

Delete 'FirstName' data field from 'grid1' view of Employees data controller

Creating the Calculated Field in Orders Controller

Before creating the “EmployeeFullName” field in Orders controller, we’ll need to find the alias of the Employees tables in the command text.

Double-click on Orders / Commands / command1 node.

Orders 'command1' in Code On Time Project Explorer

Take a look at the text of the command.

select
    "Orders"."OrderID" "OrderID"
    ,"Orders"."CustomerID" "CustomerID"
    ,"Customer"."CompanyName" "CustomerCompanyName"
    ,"Orders"."EmployeeID" "EmployeeID"
    ,"Employee"."LastName" "EmployeeLastName"
    ,"Orders"."OrderDate" "OrderDate"
    ,"Orders"."RequiredDate" "RequiredDate"
    ,"Orders"."ShippedDate" "ShippedDate"
    ,"Orders"."ShipVia" "ShipVia"
    ,"ShipVia"."CompanyName" "ShipViaCompanyName"
    ,"Orders"."Freight" "Freight"
    ,"Orders"."ShipName" "ShipName"
    ,"Orders"."ShipAddress" "ShipAddress"
    ,"Orders"."ShipCity" "ShipCity"
    ,"Orders"."ShipRegion" "ShipRegion"
    ,"Orders"."ShipPostalCode" "ShipPostalCode"
    ,"Orders"."ShipCountry" "ShipCountry"
from "dbo"."Orders" "Orders"
    left join "dbo"."Customers" "Customer" on "Orders"."CustomerID" = "Customer"."CustomerID"
    left join "dbo"."Employees" "Employee" on "Orders"."EmployeeID" = "Employee"."EmployeeID"
    left join "dbo"."Shippers" "ShipVia" on "Orders"."ShipVia" = "ShipVia"."ShipperID"

You can see that this data controller refers to Employees using “Employee”, which is different than the Employees data controller reference of “Employees”. The SQL Formula of the calculated field will need to use the alias of the command text in Orders data controller.

Make sure not to save any changes to the command. Right-click on Orders / Fields node, and choose New Field.

New Field in Orders data controller

Use the following settings for the new field:

Property Value
Name EmployeeFullName
Allow null values True
The value of this field is computed at run-time by SQL Expression
"Employee"."LastName" + ', ' + "Employee"."FirstName"
Label Employee Full Name
Values of this field cannot be edited True
Allow Query-by-Example True
Allow Sorting True

Press OK to save the field.

Let’s change the alias of the EmployeeID data fields in each view so that Employee Full Name is displayed. In the Explorer, double-click on Orders / Fields / EmployeeID field node.

EmployeeID field of Orders data controller

At the top, switch to Data Fields tab. For all three data fields, make the following change:

Property New Value
Alias EmployeeFullName

Change Alias to 'EmployeeFullName' for all EmployeeID data fields

On the tool bar, press Browse to generate the web application. When it opens in your default web browser, navigate to Orders page. The EmployeeID field now shows the full name of each employee, instead of just the last name.

Employee Full Name displayed for Orders data view

If you edit a record and activate the lookup for Employee Full Name, you will see that the grid view will show the Employee Full Name in the first column.

Employee Full Name displayed in EmployeeID lookup

Selecting a record from the grid will insert the full name into the lookup field.

Employee Full Name inserted into EmployeeID lookup field

Navigate to the Employees page of the web application. If you activate inline edit mode on the grid view, you will not be able to edit the Employee Full Name field.

Employee Full Name is read-only in grid view

However, if you edit a record using form view, the original First Name and Last Name fields are still there.

Last Name and First Name fields are editable in edit form