« Back to Blogs

Liferay 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.

 

 

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

 

ADT_3

 
Comments
Jack Telgani
Are you using custom structure for the webcontent
Posted on 3/8/16 11:06 PM.
Bhargav Pavra
Hi Jack,

No. I did not use custom structure in this example but you can use custom structure as well.
Posted on 3/9/16 5:48 AM in reply to Jack Telgani.
Jack Lang
This is very useful, thanks. I know this is an old article, but do you happen to have any tutorial on how to display the article in a full page after clicking the "Read More" button?
Posted on 6/12/19 10:36 AM.
contact-us Request a callback