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:

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

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.