PoNG Module: Table View

This module creates a table for any kind of data for you in a resource view.

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

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-table",
       ...
     },
     ...
   ],
   ...
}

Definition of the Table

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

Example JSON definiton from ../svc/<resourceUrl>/pong-table

{
    "dataURL": "data",
    "filter" : {
        "dataReqParams": [ {"id":"productSearchString", "label":"Product"}, {"id":"productType", "label":"Type"} ],
        "dataReqParamsSrc": "Form"
    },
    "rowId": "productId",
    "cols" : [
       { "id": "name", "label": "Name", "cellType": "text" }, 
       { "id": "descr", "label": "Description", "cellType": "text" },  
       { "id": "img", "label": "Picture", "cellType": "img" },  
       { "id": "addToOrder", "label": "Add", "cellType": "button" } 
   ],
   "maxRows":"10"
}

The "filter" is optional.

Available column types:

• text
• img
• linkLink (link text is "link")
• button

Special definitions for "cols":

• tooltip (label is the id of the column, where tool tip should be applied)

The data will be requested from the URL svc/<resourceURL>/<dataURL>?productSearchString=<productSearchString>&productType=<productType>. The dataReqParams will be looked up in the session map. You can use e.g. PoNG Module: Form View to set these values in the session map.

Options for dataReqParams:

• Form
• SessionMap (only prepared in v0.1)

The button will do an asynchronous POST the svc/<resourceURL>/<id of button>?rowId=<rowId> to the resource. In the example above this will be posted (productId of the row may be 1234): svc/Products/addToOrder?rowId=1234

Simple example

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

{
   "dataURL": "data",
   "dataReqParams": [ {"id":"productSearchString", "label":"Product"}, {"id":"productType", "label":"Type"} ],
   "dataReqParamsSrc": "Form",
   "rowId": "productId",
       "cols" : [
          { "id": "name", "label": "Name", "cellType": "text" }, 
          { "id": "link", "label": "Data Sheet", "cellType": "linkLink" }, 
          { "id": "descr", "label": "name", "cellType": "tooltip" },  
          { "id": "img", "label": "Picture", "cellType": "img" },  
          { "id": "order", "label": "Add", "cellType": "button" }  
       ],         
       "maxRows":"5"
}

Table CSS

You can use the following CCS elements to define thy style of the table:

• Table ID: #<resId>ContentPongTable
• Table class: pongTable
• optional Form DIV ID: #<resId>ContentPongTableFrm
• optional From DIV class: pongTableFrm