We used cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it. What For?

How To Create Liferay Application Display Template (ADT)

Application display template (ADT)

 

Liferay has introduced Application Display Template (ADT) in its 6.2 version. ADT is tremendous feature of Liferay 6.2 / DXP. It allows to customize Portlet display dynamically. For example, you want to show assets horizontally instead of vertically or in various sizes in asset publisher, you can achieve it using ADT.

 

Before Liferay 6.2, we had to create a jsp hook to customize it.

The Following portlets come with ADT functionality.

  • Asset Publisher

  • Blogs

  • Document and Media

  • Categories Navigation

  • Tags Navigation

  • Wiki

  • Site Map

 

Let’s understand ADT by an example of Asset Publisher :

 

For an example, you want to show news headlines (abstract view) where you want to show news title, small image, date, short description and read more link in your own style.

 

Here, we will use basic web content to add particular news. Add Basic Web Contents(News) with following details :

 

  • Content

    • Title

    • Content (News full content)

  • Abstract

    • Summary (News headline)

    • Small Image

 

Now, You want to show news headlines(abstract view of news web content) dynamically.

 

To create ADT for asset publisher :

 

  • Go to Control Panel --> Sites --> Select Site --> Configuration --> Application Display Templates

  • Click on Add --> Select Asset Publisher Template

  • Select language Velocity.

 

ADT_1

 

Note : Application Display Template is associated with the Sites, if you want ADT available in all sites, create ADT in Global Site.

 

<h2 class="heading">NEWS</h2>

<div class="news-wrapper">

#if (!$entries.isEmpty())

#foreach ($curEntry in $entries)

##To get web content title

#set($news-title =$curEntry.getTitle($locale))

##To get web content summary(abstract)

 #set($news-summary =$curEntry.getSummary($locale))

## To get publish date in dd/MM/yyyy format(change as per your requirements)

#set($date = $dateTool.format("dd/MM/yyyy", $dateTool.toDate( "EEE, dd MMM yyyy hh:mm:ss Z" , $curEntry.getPublishDate())))

## To get small image url

#set($renderer = $curEntry.getAssetRenderer())

#set($Article = $renderer.getArticle())

#set( $smallImageID = $Article.getSmallImageId())

#if($smallImageID != "")

#set( $smallImageURL = "/image/image_gallery?img_id=$smallImageID")

#else

#set( $smallImageURL = "$Article.getSmallImageURL()")

#end

## To get view url(read more link)

#set( $viewURL = $assetPublisherHelper.getAssetViewURL($renderRequest, $renderResponse, $curEntry))

#set( $viewURL = $renderer.getURLViewInContext($renderRequest, $renderResponse, $viewURL))

 <div class="row-fluid">

<div class="small-image span4">

<img src=”$smallImageURL” />

</div>

<div class="headline-content span8">

<div class="news-title">$curEntry.getTitle($locale)</div>

<div class="date">$date</div>

<div class="desc">$curEntry.getSummary($locale)</div>

<div class="read-more"><a href="$viewURL">Read More</a></div>

</div>

</div>

#end

#end    

</div>

 

Click on Save.

Now, Add Asset Publisher on particular page.

Go to Configuration --> Display Setting --> Select created Display Template News.

 

Create New Template using Liferay ADT

 

Your NEWS HEADLINES(Asset Publisher) will be show as follow(Add your custom css in theme to customize your way) :

 

ADT_3

 
contact-us Request a callback WhatsApp