Master/Detail

Labels
AJAX(112) App Studio(7) 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(177) 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(183) 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(2) 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
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

Sunday, April 22, 2012PrintSubscribe
Changing Parent of a Child on Master/Detail Pages

Code On Time web applications automatically hide the foreign key field of a detail data view on master/detail page if the field is used for relationship filtering.

Here is the screen shot that shows a master/detail relationship between Suppliers and Products in the Northwind sample application. Data rows visible in the list of products are linked to the supplier New Orleans Cajun Delights. The application client library hides the column Products.SupplierID to avoid repeating the same value in each child data row.

Master-detail relationship in the Northwind sample created with Code On Time web application generator

Automatic hiding of the foreign key field involved in master/detail filter will maximize the real estate of the page. The side effect of this convenient feature is that it is not possible for a user to change the product supplier by editing a product record in the detail data view. 

A product supplier can be changed if there is a dedicated page of products. Users will have to navigate away to that page. It will also take some time to locate the record in a dedicated view.

Foreign key fields are not hidden in data views if they are not involved in master/detail filtering

Fortunately,  a simple SQL action can be implemented to allow changing the parent of a child record even if the foreign key field is hidden by the master/detail relationship filter.

First, we need to create an action confirmation data controller.

Start the Project Designer and activate the Controllers tab at the top of the designer home page. Select New | New Controller option on the action bar, enter the following properties, and click OK button to save the controller.

Property Value
Name SupplierSelector

Activate the Controllers tab in Project Explorer and right-click the SupplierSelector / Fields node.

Adding a new field to a data controller using Project Explorer

Enter the following properties and save the field by clicking OK button.

Property Value
Name ProductName
Type String
Code Default
SelectFieldValue("Context_ProductName")
Label Product
Values of this field cannot be edited Yes

Create two more fields – SupplierCompanyName and SupplierID.

Properties of the field SupplierCompanyName.

Property Value
Name SupplierCompanyName
Type String
Code Default
SelectFieldValue("Context_SupplierCompanyName")
Label Supplier
Values of this field cannot be edited Yes

Properties of the field SupplierID.

Property Value
Name SupplierID
Type String
Label New Supplier
Items Style Lookup
Items Data Controller Suppliers
Data Value Field SupplierID
Data Text Field CompanyName

The hierarchy of the SupplierSelector node shall look as follows.

The hierarchy of the 'SupplierSelector' data controller node in Project Explorer

The SupplierSelector data controller allows collecting a new Supplier ID.

Now we need to define a new SQL action in the Products data controller and use SupplierSelector as a modal confirmation form.

Right-click Products / Actions / ag1 (Grid) action group node on the Controllers tab in the Project Explorer and select the New Action option in the context menu.

Adding a new action to a group with 'Grid' scope in a web app created with Code On Time web application generator

Enter the following values in the action properties and click OK button to save the changes.

Property Value
Command Name SQL
Header Text Change Supplier
Data
update Products
set SupplierID = @Parameters_SupplierID
where ProductID = @ProductID
Confirmation

_controller=SupplierSelector
_title=Select a New Product Supplier
_width=500

Click Browse on the Project Designer toolbar, navigate to the Suppliers page when the application opens in your default web browser. Open the context menu of any product and select Change Supplier option in the context menu of the product data row.

Activating a custom 'SQL' action in the context menu of a data row in Code On Time web application

The modal action confirmation will show up. Select a new supplier and click OK button to execute the action.

Modal action confirmation forms allow easy collection of parameters from the application end users

The product will disappear from the detail view. You will find it liked to the supplier record selected in the action confirmation form.

The product data row is now linked to another supplier selected in the modal action confirmation form

It is easy to access the values of fields entered in the action confirmation.

Action Change Supplier defines the following SQL script.

update Products
set SupplierID = @Parameters_SupplierID
where ProductID = @ProductID

Simply prefix the field name from the action confirmation data controller with “Parameters_”. The action implementation updates the SupplierID of selected product with the value selected in the modal confirmation.

If you are implementing custom business rules or shared business rules then you can access the values of action parameters as fields with the same “Parameters_” prefix.

Modal confirmation shows the name and current supplier of the selected product. Both fields are configured as read-only and use a similar Code Default expression. Here the expression from the SupplierSelector.SupplierCompanyName field.

SelectFieldValue("Context_SupplierCompanyName")

This code works with both C# and Visual Basic. The prefix “Context_” allows the action confirmation data controller business rules to access the field values of the controller that will be effected by the action. In our example, the name “Context_SupplierCompanyName” is referring to the SupplierCompanyName field of  Products data controller.

Thursday, April 19, 2012PrintSubscribe
Conditional Visibility of Data Views

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.

A classical master-detail layout in a Code On Time web application

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 master data view of employees in the Northwind sample created with Code On Time web application generator

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.

Child data view 'view2' on a master/detail page 'Employees' selected in Project Explorer

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.

Master data view 'view1' has only two visible detail data views if the JavaScript expression in 'Visible When' property of 'view2' is evaluated as 'false'

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).

Master data view 'view1' has three visible detail data views if the JavaScript expression in 'Visible When' property of 'view2' is evaluated as 'true'