Mh am 17. Februar 2015 um 17:30 Uhr

2015-02-17T17:30:04Z

Mh: Die Seite wurde neu angelegt: „Category:PoNGThis module creates a list of DIVs for any kind of data for you in a resource view. The module is similar to the [[PoNG Module: Table View|ta…“

2014-03-30T16:31:52Z

Die Seite wurde neu angelegt: „Category:PoNGThis module creates a list of DIVs for any kind of data for you in a resource view. The module is similar to the [[PoNG Module: Table View|ta…“

Neue Seite

[[Category:PoNG]]This module creates a list of DIVs for any kind of data for you in a resource view.
The module is similar to the [[PoNG Module: Table View|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 [[PoNG_Modules#Standard_Modules_coming_with_PoNG|standard modules coming with PoNG]].

== Usage in "structure" ==
Simply <code>"type": "pong-list"</code> to the <code>rows</code> or <code>cols</code> resource. Example [[PoNG Structure Specification|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 <code>../svc/XYZ/pong-table</code>

Example JSON definiton from <code><nowiki>../svc/<resourceUrl>/pong-table</nowiki></code>
{
"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 <code>"filter"</code> is optional.

The parameters <code>dataReqParams</code>, <code>dataReqParamsSrc</code> and <code>dataReqParamsBt</code> 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 <code><nowiki>svc/<resourceURL>/<dataURL>?productSearchString=<productSearchString>&productType=<productType></nowiki></code>.
The <code>dataReqParams</code> 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 <code>dataReqParams</code>:
* Form
* SessionMap (only prepared in v0.1)

The button will do an asynchronous POST the <code><nowiki>svc/<resourceURL>/<id of button>?rowId=<rowId></nowiki></code> to the resource.
In the example above this will be posted (productId of the row may be 1234): <code>svc/Products/addToOrder?rowId=1234</code>

== Example output ==
For list definition above the result may be like:

[[Datei:PoNG-List.png]]

The generated code would look like:

<pre>
<nowiki>
...
<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>
...
</nowiki>
</pre>

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.

@@ Zeile 33: / Zeile 33: @@
      },
      "rowId": "blogMsgId",
-     "divs" : [
+    "divs" : [
             { "id": "date", "label": "", "cellType": "text" },
             { "id": "author", "label": "", "cellType": "text" },
@@ Zeile 43: / Zeile 43: @@
 The <code>"filter"</code> is optional.
 The parameters <code>dataReqParams</code>, <code>dataReqParamsSrc</code> and <code>dataReqParamsBt</code> 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.
@@ Zeile 62: / Zeile 69: @@
 * SessionMap (only prepared in v0.1)
 The button will do an asynchronous POST the <code><nowiki>svc/<resourceURL>/<id of button>?rowId=<rowId></nowiki></code> to the resource.
 In the example above this will be posted (productId of the row may be 1234): <code>svc/Products/addToOrder?rowId=1234</code>
 == Example output ==

PoNG Module: List View - Versionsgeschichte

Mh am 17. Februar 2015 um 17:30 Uhr

Mh: Die Seite wurde neu angelegt: „Category:PoNGThis module creates a list of DIVs for any kind of data for you in a resource view. The module is similar to the [[PoNG Module: Table View|ta…“