1. Home
  2. Docs
  3. Data Publisher
  4. Responsive master-detail

Responsive master-detail

WP Data Access allows users to create relationships between data tables. One table acts as the master table and another as the detail table. When the user clicks on a row of the master table, the detail table is automatically updated to reflect the relationship.

Example

Suppose our database contains a productlines and a products table. We want to shown the productlines in table. When the user clicks on a productline, the products for the selected productline are shown.

For this example we need to create two publications. One publication for table productlines and one for table products. Both publication are shown on the same page. The productlines table is shown above the products table.

To connect the table to each other we need to add two functions to the productlines (master) table in the following format:

{
	"initComplete": "function( settings, json ) { wpda_init_master_detail( settings, json, pubId, detailTableName, masterColumnName, detailColumnName ) }",
	"drawCallback": "function( settings ) { wpda_nav_master_detail( settings, pubId, detailTableName ) }",
	"select": {
		"style": "single"
	}
}

Function wpda_init_master_detail initializes the master-detail relationship and has the following parameters:

settingstaken from initComplete
jsontaken from initComplete
pubIdpublication id of the detail publication
detailTableNametable name of the detail publication
masterColumnNamecolumn name of the master table used for relationship (arrays are supported for multi column)
detailColumnNamecolumn name of the detail table used for relationship

Function wpda_nav_master_detail adds the navigation and has the following parameters:

settingstaken from drawCallback
pubIdpublication id of the detail publication
detailTableName table name of the detail publication

Here are my options for the demo below:

{
	"initComplete": "function( settings, json ) { wpda_init_master_detail( settings, json, 19, 'products', 'productLine', 'productLine' ) }",
	"drawCallback": "function( settings ) { wpda_nav_master_detail( settings, 19, 'products' ) }",
	"select": {
		"style": "single",
		"selector": "tr"
	},
	"pageLength": 2
}

The page length is set to 2 to minimize the number of rows shown in the mast table. You can give it a value that fits your needs.

Demo

Here is an inline demo of the example. Click on a productline to synchronize the detail table.

Product LineDescription
Product LineDescription
 
Product CodeProduct NameScaleVendorStockPriceProduct Line
Product CodeProduct NameScaleVendorStockPriceProduct Line

Notes

  • Responsive master-detail pages do not require page updates.
  • Supported with client-side and server-side processing.
  • This features requires a premium license.
Was this article helpful to you? Yes No

Leave a Reply

Your email address will not be published.