How To Create Liferay Application Display Template (ADT)

blog-banner

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
    1. Title
    2. Content (News full content)
  • Abstract
    1. Summary (News headline)
    2. 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.

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):

Contact us

For Your Business Requirements

: 0 / 65000

: 0 / 280

: 0 / 280

: 0 / 280

: 0 / 280

: 0 / 280

: 0 / 65000

Text to Identify Refresh CAPTCHA
Background Image Close Button

2 - 4 October 2024

Hall: 10, Booth: #B8 Brussels, Belgium