How to Use FreeMarker Template(FTL) in widget Template for Liferay Customization

Introduction

Liferay Application Display Templates (ADT) provide a powerful way to customize the display of portlets without modifying their JSP pages. This flexibility allows you to change the look and feel of your portlets using FreeMarker template. In this article, we will cover the basics of using FreeMarker templates in Liferay ADTs, including essential code snippets and explanations to help you get started with Liferay DXP 7.4.

Understanding FreeMarker in Liferay ADTs

FreeMarker is a template engine that allows you to generate text output based on templates. It is commonly used in Liferay ADTs to define how portlet data is presented. Below are some basic FreeMarker constructs that you will frequently use in your ADTs.

FreeMarker Basics for Liferay ADT

Comments

Comments in FreeMarker are similar to comments in other programming languages and are used to annotate your code.

<#-- This is a comment -->

Variable Declaration and Assignment

You can declare and assign values to variables using the assign directive.

<#assign name = "meera"/>
<#assign categoryId = 100/>

Array Declaration

Arrays can be declared and assigned values as shown below.

<#assign cat = [100, 101, 102] />
<#assign selectVocab = ["Department", "Client Scope"] />

Global Variable Declaration

Global variables can be used across your entire template.

<#global categoryId = 100/>

Printing or Outputting Data

To print or output data, use the ${} syntax.

${name}

Conditional Statements

Conditional statements are used to perform actions based on certain conditions.

<#if categoryId != 0>
    <!-- Do something -->
</#if>

You can also use else for alternative actions.

<#if categoryId != 0>
    <!-- Do something -->
<#else>
    <!-- Do something else -->
</#if>

Loops

Loops are used to iterate over arrays or collections.

<#assign categoryIds = {13, 39, 45, 10}/>
<#list categoryIds as categoryId>
    ${categoryId}
</#list>

Checking Content in Lists

You can check if a list has content before processing it.

<#if categoryIds?has_content>
    <!-- List has content -->
</#if>

Creating URLs Using Tag Libraries

Liferay tag libraries can be used to create URLs for various actions.

<@liferay_portlet.renderURL var="filterByCategory" windowState="normal">
    <@liferay_portlet.param name="mycategoryId" value="100" />
</@liferay_portlet.renderURL>

<!-- OR -->

<@liferay_portlet["renderURL"] var="filterByCategory" windowState="normal">
    <@liferay_portlet["param"] name="mycategoryId" value="100" />
</@liferay_portlet["renderURL"]>

Form Elements Using AUI Taglib

Liferay’s AlloyUI (AUI) taglib provides various form elements which can be used within FreeMarker templates.

<@aui.form action="${filterByCategory}" method="post" name="filterForm">
    <@aui.input name="categoryName" id="categoryName" type="text" value="" label="Category Name" placeholder="Enter category name"/>
    <@aui.select name="mycategoryId" id="mycategoryId" label="Category">
        <@aui.option label="Sports" value="100" first="true" />
        <@aui.option label="Games" value="101"/>
    </@aui.select>
    <@aui.button type="submit" value="Submit"></@aui.button>
</@aui.form>

Accessing Liferay Services in FreeMarker

To access Liferay services within FreeMarker templates, you need to remove the serviceLocator restricted classes from Control Panel → Configuration → System Settings → Template Engines → FreeMarker Engine

Once removed, you can use the services as shown below:

<#assign AssetCategoryLocalService = serviceLocator.findService("com.liferay.portlet.asset.service.AssetCategoryLocalService")>

By using these FreeMarker snippets and guidelines, you can effectively customize the display of your Liferay portlets to suit your needs in Liferay. Happy coding!