after every third element. What we will actually do is to insert it after every element, but then hide it for the ones where we don't want it.

So we add a Text Builder with the text

and put it on the element named Row_afterTD. This named element was created by the HTML Template processor which will always prepend the element name to any named HTML node that is inside a construct, if the HTML node's name starts with an underscore. In our construct that we created, we added the node "" for this purpose.

Note that the magic tag "HTMLWRAPPER" does not appear in the final JSP that gets exported, so the text

will just be floating at the same level as the real tr tags from the construct.
If we were to run the Model at this point, we would have all the thumbnails in a single tall column. (Try it - leave just the bottom two BuilderCalls disabled and run it.)

Hiding the new row except when we really want it

Finally, we want to wrap the contents of the Text Builder with a visibility setter that will allow the contents to display only on every third item. First we make a little method which returns true if its first argument is a multiple of its second. (That code is below.)

Then we add a Visibility Setter on the same node the Text Builder operates on, with the Visibility Rule of "Hide when Value is false" and for the value we will call the method, passing in the variable RowCounterVar1 for the value to test, and the number 3 as the divisor, for three columns. The result is that the original behavior of the HTML Template, to put the elements across on one big row, is interrupted after every third element with the

text which causes the existing row to end and a new row to be started.


return (value % divisor) == 0;


Notes on running the sample and prerequisites

Import the attached zip file into your project using the Import WebSphere Portlet Factory Archive command.



To learn more about HTML Templates, see Introducing WebSphere Portlet Factory HTML Templates