PoNG Module: Table View

Jump to navigation Jump to search

This PoNG 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": "webdata",
    "filter" : {
        "dataReqParams": [ {"id":"productSearchString", "label":"Product"}, {"id":"productType", "label":"Type"} ],
        "dataReqParamsSrc": "Form"
    "rowId": "productId",
    "cols" : [, 
       { "id": "name", "label": "Name", "cellType": "text", "editable":"true", "width":"20%" }, 
       { "id": "descr", "label": "Description", "cellType": "text", "width":"40%" },  
       { "id": "img", "label": "Picture", "cellType": "img", "width":"20%" },  
       { "id": "addToOrder", "label": "Add", "cellType": "button", "width":"20%" } 

The "filter" is optional.

In the example the table is the top level object in the content. It may happen, that the table is somewhere in the object tree of the JSON result. You can use the dataDocSubPath attribute, to tell the module the sub-path of the table data, e.g.

    "dataURL": "webdata",
    "dataDocSubPath": "searchResult.dataTbl",

The identifier of each row is defined by "rowId". Thi can be a string as above or a list of strings (e.g. when the table data is a join of two tables). Example:

"rowId": ["struct_id","template_id"]

The rowId key and values are used as GET or POST prameters in updates of editable cells or for button actions.

Remark: The rowId must not be in the cols array, it must only be in the result of the service call.


Cell Types

"cellType" property can be:

  • text
  • checkbox
  • img
  • link (TODO)
  • linkLink
  • button
  • tooltip

The img type and link type will expect a URL as content.


Generates a link with "label" as link text and "id" is set as href URL.

Optional attributes:

  • "target", e.g. "_blank"
  • "URL" recommended to use, "rowId" value will be used as GET parameter, if the URL already contains a GET parameter, the "rowId" will be appended


    { "id":"mylink", "label":"Text", "cellType":"linkLink", "URL":"other-page.php", "target":"_blank", "width":"5%" },

will generate a column:

 <a href="other-page.php?data_id=1243>Text</a>


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

You can set the URL parameter to any other AJAX target.

Button method is optional, default is "method":"POST"

For method DELETE, POST, GET are icons predefined. You can change the icon using the icon property at any time (ref JQuery icons).

After pressing the button, the data in the table is updated.

Optional parameters (for actions after a successful POST call):

  • "update" is an (optional) array of resource (column/row) ids, where further data updates should be triggered. Example: "update": [ { "resId":"xyz" } ] }
  • "target"
    • target can be a resource Id: "target": "customerActionOut"
    • target can be "_parent", the result of the AJAX call must be an URL
    • target may me "modal", to show the call result in a modal dialog

For POST; GET, DELETE methods the rowId(s) are used as params to identify the row of the table.


"rowId": "id",
"cols" : [ 
   { "id":"name", "label":"Name", "cellType": "text", "width":"80%" },
   { "id":"Btn", "label":"Load", "cellType":"button", "URL":"/service", "width":"20%", "update": [ { "resId":"Form" } ] } 

If you press the "Load" button then it will do:

POST /service
POST param: { "id":"123" }

call update JS of aForm, which results in

GET /<ressource-URL-of-aForm>?id=123

An exception is a button with the "method":"JS", which does no AJAX call at all. Using this method you can define a "js" property with a script to be embedded.


"cols": [

Data loading

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)


Special definitions for "cols":

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

Tooltip does not render an individual column.


"cols" : [ 
   { "id":"name", "label":"Type", "cellType": "text", "width":"80%" },
   { "id":"descr", "label":"name",  "cellType":"tooltip" },

IMG Actions


GET/POST example:

"action" : { "method":"GET" ,"actionURL": "svc/customer", "update": "customerForm" }

update (=module ID) is optional

"action" : { "method":"POST" ,"actionURL": "svc/customer" }

Link example:

"action" : { "method":"GET" ,"actionURL": "svc/customerHTML", "target": "customerActionOut" }

Function call example:

"action" : { "method":"JS" ,"actionURL": "updateCustomer($id)", "update": "customerForm" }

where id is a table column

Editable Cells

If you specify "editable":"true" for a column, you can click into the cell and edit. When you leave the focus of the cell, the cell data and the "rowId" and its ID value are JSON encoded and POSTed back to the resource, to store them modified. Example HTTP request to save the modified cell data of cell column "name":

POST /svc/Products/webdata { "productId": "03", "name": "Hello" }

Currently this feature is only available for text and checkbox columns.

Important: The URL ending is a diva. If you implement a service endpoint (e.g. using svc/myservice/index.php) the URL may have to end with a slash. If you specify "resourceUrl":"svc/myservice" you can use "dataURL":"/" to get the POST request working correctly. The "developer tools" are your friend to identify, what request is going out -- and if it works.

Simple example


   "dataURL": "webdata",
   "dataReqParams": [ {"id":"productSearchString", "label":"Product"}, {"id":"productType", "label":"Type"} ],
   "dataReqParamsSrc": "Form",
   "dataDocSubPath": "struc1.tbl",
   "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" }  

And a HTTP GET to webdata gives

   "bla": "blub",
   "struc1": {
       "tbl": [
           {"productId":"xxx1","name":"xxx1","link":"http://bla/xxx.pdf","descr":"Blah blub bubber.","img":"img/x01.png"},
           {"productId":"yyy2","name":"yyy2":"http://bla/yyy.pdf","descr":"Blah blub bubber.","img":"img/x02.png"},
           {"productId":"15","name":"yy15","link":"http://bla\yyy.pdf","descr":"Blah blub bubber.","img":"img/x15.png"}

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