PoNG Module: Table View

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%" } 
   ],
   "maxRows":"10"
}

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

Columns

Cell Types

"cellType" property can be:

• text
• checkbox
• img
• link
• linkLink (get link text is link)
• button

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

Button

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

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

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" e.g.: "target": "customerActionOut"

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)

Tooltip

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.

IMG Actions

TODO: PONG-65

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

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

{
   "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" }  
       ],         
       "maxRows":"5"
}

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