PoNG Module: List View
This module creates a list of DIVs for any kind of data for you in a resource view. The module is similar to the table view, but in a table you have the restrictions of HTML tables. Here you can work with DIVs. This is more difficult to layout, but gives you the maximum flexibility.
Please have also a look at the other standard modules coming with PoNG.
Usage in "structure"
Simply "type": "pong-list"
to the rows
or cols
resource. Example structure file extract:
{ "layout": { ... "rows": [ { "rowId": "blog", "resourceURL": "blog", "type": "pong-list", ... }, ... ], ... }
Definition of the List
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":"blogSearch", "label":"Message contains"} ], "dataReqParamsSrc": "Form", "dataReqParamsBt": "Apply Filter" }, "rowId": "blogMsgId", "divs" : [ { "id": "date", "label": "", "cellType": "text" }, { "id": "author", "label": "", "cellType": "text" }, { "id": "msg", "label": "Message", "cellType": "text" }, { "id": "link", "label": "User Home", "cellType": "linkLink" } ], "maxRows":"4" }
The "filter"
is optional.
The parameters dataReqParams
, dataReqParamsSrc
and dataReqParamsBt
define filter columns, in this example a HTML form will be generated. If you don't need a filter form, you can just omit these lines.
Available cellType:
- text
- img
- linkLink (link text is "link")
- button
Special definitions for "divs":
- tooltip (label is the id of the DIV, 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
Example output
For list definition above the result may be like:
The generated code would look like:
... <div id="blog" ... > <div id="blogContent" class="decor-inner"> <div id="blogContentPongListFrmDiv" class="pongListFrm"> <form id="blogContentPongListFrm"> <fieldset>...</fieldset> </form> </div> <script>...</script> <div id="blogContentPongList" class="pongList" width="100%"> <div class="pongListRow"> <div id="blogContentR0C0" class="pongListCell pongListCelldate">...</div> <div id="blogContentR0C1" class="pongListCell pongListCellauthor">...</div> <div id="blogContentR0C2" class="pongListCell pongListCellmsg">...</div> <div id="blogContentR0C3" class="pongListCell pongListCelllink">...</div> </div> <div class="pongListRow">...</div> <div class="pongListRow">...</div> <div class="pongListRow">...</div> </div> <div id="blogContentPongListPagin" class="pongListPagin">...</div> <script>...</script> </div> </div> ...
Since all list DIVs have a CSS class and can also be identified as member of your resource view, you are enabled to apply any custom layout.