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
Saturday, June 30, 2012PrintSubscribe
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.

Employees page with Employees master and child data views.

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.

View1 on Employees page.

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.

New Action in ag1 action group of Employees controller.

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.

Fuller employee selected in the master Employees data view. Context menu option 'Show in Master List' selected for Buchanan employee in the child data view.

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.

Buchanan focused in the master data view. 'Show in Master List' context menu option for employee King in the child data view.

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

King employee focused in the master data view.

Thursday, May 17, 2012PrintSubscribe
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.

Modified 'Customers' page from Northwind sample created with Code On Time web application generator

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.

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.

This is how administrator sees the same page.

Friday, May 11, 2012PrintSubscribe
Grouping Data Views Under the Same Tab

It is possible to create multi-level master-detail pages in a Code On Time web application. One option is to render the master-detail data views in a flat list one under another. Another option is to group the detail data views in the same container.

In a Northwind sample with a Classic page layout, the Customers page will have the Customers master data view at the top, and three child data views in their own tabs underneath.

 Customers page layout of data views in two containers.

The child data views belong to the same container, and have tabs as activators.

Northwind web application using Classic page layout.Northwind web application using Classic page layout.

In the above layout, the Order Details tab is a child of the Customers data view. Let’s make the Order Details data view a child of Orders data view and have it displayed when Orders tab is selected.

Start the Project Designer. Double-click on Customers / container2 / view4 data view node.

Child data view selected in Code On Time Project Explorer.

Change the following properties:

Property New Value
Text Orders
Filter Source view2
Filter Field #1 OrderID
Auto Hide Self

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

When your default web browser opens, navigate to Customers page. You are presented with a list of Customers. Select a customer, and the Orders and Customer Demo tabs of container2 will become visible. Select an Order, and relevant Order Details will appear underneath.

Northwind web application with three-level master/detail layout arranged using tabs.Northwind web application with three-level master/detail layout arranged using tabs.

If you choose Customer Demo tab, then both Orders and Order Details data views will become hidden.

When switched to the Customer Demo tab, Orders and Order Details data views are hidden.