In one of my previous articles AlloyUI tables in Liferay Application Display Templates (ADT) I wrote about table creation in Liferay ADT using AlloyUI. In this article I’ll demonstrate how to do it via liferay-ui (http://liferay.com/tld/ui) and liferay-portlet (http://java.sun.com/portlet) tag libraries (tlds). The usage of tag libraries instead of AlloyUI javascript library gives a more elegant way to define tables.

The application display template (ADT) framework allows portal administrators to change portlet’s GUI by means of freemarker/velocity template engine on-the-fly, without portlet restart.

This means that when we have a data model which needs to be represented in Liferay portlet, first of all for example we can define this view using ADT in Portlet Configuration (display settings tab) and then easily change it without application restart.

So let’s say that there is a model of file entity (with name, url, version attribute). To represent file list as a table we need to define the following ftl template in Portlet Configuration:

[#ftl]
[#assign liferayui = taglibLiferayHash["/WEB-INF/tld/liferay-ui.tld"] ]
[#assign portlet = taglibLiferayHash["/WEB-INF/tld/liferay-portlet.tld"] ]

[@liferayui["search-container"] delta=20 emptyResultsMessage="There are no Downloads to display"]
    [@liferayui["search-container-results"] results=entries total=entries?size]
    [/@]

    [@liferayui["search-container-row"] className="com.portal.download.model.DownloadEntry" keyProperty="fileEntryId" modelVar="file"]
        [@portlet["renderURL"] var="detailsURL"]
            [@portlet["param"] name="fileId" value=file.getFileEntryId()?string] [/@]
        [/@]    
        [@liferayui["search-container-column-text"] name="Name" href=detailsURL orderable=true value=file.getName()] [/@]
        [@liferayui["search-container-column-text"] name="Version" href=detailsURL orderable=true value=file.getVersion()] [/@]
        [@liferayui["search-container-column-text"] name="file" href=file.getDownloadURL() orderable=true value=file.getName()] [/@]
    [/@]
    
    [@liferayui["search-iterator"]] [/@]    
[/@] 

It is also good to use Liferay-defined tag libraries because as a result we get standard Liferay tables that completely correspond to Liferay’s GUI: