How to write ADT with structure and template in Liferay

Share On :

Introduction

The application display template (ADT) allows portal administrators to override the default display templates for portlets. For example, we want to show a list of the asset ( web contents, blogs ) in the asset publisher portlet in different designs ( Vertical list ) than OOTB design of LIferay. Application display template(ADT) is a great way of changing the Portlet display dynamically without changing code in Portlet JSP pages. In Liferay 7.2, application display template known as Widget Template.

Follow the below steps to create Web Content with structure and template

1) Create Structure

  1. Go to Liferay admin panel
  2. Go to Sites → Select desired site → Content → Web-content → Structures
  3. Click on “+” button
  4. Enter the name of the structure
  5. Add fields by dragging items from left to right
  6. And click on the “Save” button to save the structure

Here, We adding Text, HTML and Image fields for demonstrating the ADT & Structure (You can change field name as per your requirement). Please refer below image.

Liferay admin panel site content creation

2) Create Template

  1. Go to Liferay admin panel
  2. Got to Sites → Select desired site → Content → Web-content → Templates
  3. Click on “+” button
  4. Enter the name of the template

Here, We creating a basic template as shown below

				
					Title : ${Title.getData()} <br />
Description : ${Description.getData()} <br />
<#if Image.getData()?? && Image.getData() != "">
    <img decoding="async" alt="${Image.getAttribute(" src="${Image.getData()}" title="${Image | How to write ADT with structure and template in Liferay">
</#if>

3) Create Web Content

  1. Go to Liferay admin panel
  2. Got to Sites → Select desired site → Content → Web-content
  3. Click on “+” button
  4. Select the structure
  5. Give the name of web content
  6. Fill the fields with appropriate details
  7. Click on Publish
  8. Go to the desired page
  9. Drop the Web Content Display portlet
  10. Click on Select Web Content to make it visible
  11. Select the web content which you want to display

We have created web content with the structure and template. If you drop this web content in page, it will look like below image.

Create and display web content easily
We can add any number of web contents using this structure and template. We can configure asset publisher to render web content using this structure. Now in order to make look and feel better we can write application display template to render webcontents list.
Follow the below steps to create the Application Display Template

Create Application Display Template using asset publisher

  1. Go to Liferay admin panel
  2. Got to Sites → Select desired site → Configuration → Application Display Templates
  3. Click on “ADD” button
  4. Select Asset Publisher Template
  5. Add the name of the asset publisher
  6. Add below code in ADT
				
					
<#if entries?has_content>
    <div class="row">
        <#list entries as curEntry>
            <div class="col-md-3 border border-primary" >
                <#assign 
                    assetRenderer = curEntry.getAssetRenderer()
                    journalArticle = assetRenderer.getAssetObject()
                 />
                <@liferay_journal["journal-article"]
                    articleId=journalArticle.getArticleId()
                    ddmTemplateKey=journalArticle.getDDMTemplateKey()
                    groupId=journalArticle.getGroupId()
                />
            </div>
        </#list>
    </div>
</#if>
  • Click on the Save button
  • Go to the desired page
  • Drop the Asset Publisher portlet, configure it with above ADT and structure

Now, you can see your web content as shown below

View and Configure Content in a page

Explore Our Services

Discover how we can help your business thrive, whether you’re running a small startup, an SME, or a large enterprise. We’re here to understand your unique needs and goals, offering the expertise and resources to support your journey to success.

Stay informed about our Liferay services and updates by subscribing to our newsletter—just fill in the details below to subscribe.

Loading...

Related Blogs

Loading...