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
- Go to Liferay admin panel
- Go to Sites → Select desired site → Content → Web-content → Structures
- Click on “+” button
- Enter the name of the structure
- Add fields by dragging items from left to right
- 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.
2) Create Template
- Go to Liferay admin panel
- Got to Sites → Select desired site → Content → Web-content → Templates
- Click on “+” button
- 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
- Go to Liferay admin panel
- Got to Sites → Select desired site → Content → Web-content
- Click on “+” button
- Select the structure
- Give the name of web content
- Fill the fields with appropriate details
- Click on Publish
- Go to the desired page
- Drop the Web Content Display portlet
- Click on Select Web Content to make it visible
- 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.
Follow the below steps to create the Application Display Template
Create Application Display Template using asset publisher
- Go to Liferay admin panel
- Got to Sites → Select desired site → Configuration → Application Display Templates
- Click on “ADD” button
- Select Asset Publisher Template
- Add the name of the asset publisher
- 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
