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. Template engine can use standard liferay AlloyUI taglib (http://liferay.com/tld/aui) to define visual representation. That is great for sure, but current taglib does not include all often used user components. For example, there is no support of tables. In this article I’ll show how to define a table in Freemarker template using AlloyUI library and put it to portlet.

ADT appeared in Liferay since 6.2 version and not all portlets yet support this technology. To see already defined templates you can go here:

ControlPanel –> Sites –> Global –> Configuration (left panel) –> ADT

Here we can have a look at Multi Column Layout template which forms a layout for server defined entries:

<#assign aui = taglibLiferayHash["/WEB-INF/tld/aui.tld"] />

<#if entries?has_content>
    <@aui.layout>
        <#list entries as entry>
            <@aui.column columnWidth=25>
                <div class="results-header">
                    <h3>
                        ${entry.getName()}
                    </h3>
                </div>
            </@aui.column>
        </#list>
    </@aui.layout>
</#if>

But if there is a requirement to represent entity list as a table – there is no such tag in aui taglib. What we can do here – use AlloyUI js framework. Liferay includes by default all required AlloyUi dependecies, so we can simple write a code:

<@aui.script>
    YUI().use(
      'aui-datatable',
      function(Y) {
        var columns = [
            {
                key: 'name',
                allowHTML: true 
            },  
            {
                key: 'version',
                allowHTML: true 
            },  
            {
                key: 'file',
                allowHTML: true 
            },             
        ];
    
        var data = [
            <#if entries?has_content>
                <#list entries as entry>
                    <#assign detailsURL = renderResponse.createRenderURL() />
                    ${detailsURL.setParameter("fileId", entry.getFileEntryId()?string)}
                     {
                         name:  '<a href="${detailsURL}">${entry.getName()}</a>',
                         version: '<a href="${detailsURL}">${entry.getVersion()}</a>',                 
                         file: '<a href="${entry.getDownloadURL()}">${entry.getFileName()}</a>'
                     },
    
                </#list>
            </#if>      
        ];
    
        new Y.DataTable.Base(
          {
            columnset: columns,
            recordset: data
          }
        ).render('#someTable');
      }
    );
</@aui.script>

After this template is applied (by usage of portlet configuration, display settings), the final result is: