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.
Inhaltsverzeichnis
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
{ "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