PoNG Module: Master Details View

This module creates a view of a record and details tables for any associated data in a resource view.

Please have a look at the other standard modules coming with PoNG.

Requires: PoNG Table View

Usage in "structure"

Simply "type": "pong-table" to the rows or cols resource. Example structure file extract:

{
  "layout": {
     ...
     "rows": [
     {
       "rowId": "bla",
       "resourceURL": "Products",
       "type": "pong-master-details",
       ...
     },
     ...
   ],
   ...
}

Definition of the Master Details View

The resource will load the table definition from the URL ../svc/XYZ/pong-table

Example JSON definition from ../svc/<resourceUrl>/pong-master-details

{
   "label": "Customers",
   "description": "CRM demo data", 
   "searchFilter": {
        "searchFields": [ {"id":"name", "label":"Name"}, {"id":"phone", "label":"Phone"} ]
   },
   "fields" : [
      { "id": "customerId", "label": "ID", "cellType": "id" }, 
      { "id": "name", "label": "Name", "cellType": "text" }, 
      { "id": "phone", "label": "Phone", "cellType": "text" },  
      { "id": "addr", "label": "Address", "cellType": "text" }  
    ],
    "associations" : [
      { "resourceURL": "svc/demoOrders", "label":"Customers Orders", "tableDef": "detail-tbl-meta" },
      { "resourceURL": "svc/blog", "label":"Messages from Customer", "listDef": "pong-list", "filterField":"authorID" }
    ]
}

For the associations you must provide a table view definition at the specified resourceURL. The field tableDef is optional, by default it will use pong-table for the columns definition of the details table view. An alternative to tableDef is listDef, which triggers to render a list view instead of a table.

If the ID field of the details view differs from the master ID name, you have to define it as "filterField":"<details ID column name"

Simple example

This is the result of the definition above:

Fehler beim Erstellen des Vorschaubildes: Die Miniaturansicht konnte nicht am vorgesehenen Ort gespeichert werden

CSS

You can use the following CCS elements to modify thy styles:

• TODO