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.

In the example above the array with the list elements is the top level object in the content. It may happen, that the array 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": "data/",
    "dataDocSubPath": "searchResult.elementList",
    ...
}

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)

Action Buttons

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

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. Currently this feature is only available for text columns.

Example:

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

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.