Blogs

 

Application display template(ADT) is a great way of changing the Portlet display dynamically without changing code in Portlet JSP pages. In Liferay 7, application display template known as Widget Template. It allows portal administrators to override the default display templates for portlets. 

1. Create Structure:

The steps to create a Structure:

• Select desired site → Content & data → Web-content

 

 

 

• Click on structure Tab
• 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

You can change the field name as per your requirement

 

 

2. Create Template:

The steps to create a Template:

• Select desired site → Content & data → Web-content → Templates
• Click on "+" button

 

 

• Enter the name of the template
• Select The created Structure in the basic information section

 

 

Add the source code :

    Title : ${Title.getData()} <br />
Description : ${Description.getData()} <br />
<#assign image_map = jsonFactoryUtil.createJSONObject(image.data)>
<#if image_map.getString("uuid")?? && image_map.getString("uuid") != "">
	<#assign image = image.getData() />
<#else>
	<#assign image = image_map.getString("data") />
</#if>

<#if image?? && image != "">

 

 

3. Create Web Content:

The steps to create a Template:

• Select desired site → Content & data → 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 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.

 

---

Now here are the steps to create the app display template

1. Create Application Display Template using asset publisher:

The steps to create the ADT:

• 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
• Click on "3 point" menu for the portlet and configure
• Click on "Display Settings" Tab and change the template to your created ADT 

 

 

• Click on "Asset Selection" and choose Asset type : Web Content Article
• Choose the Structure "demoStructure"

 

 

• Save your changes

Now, you can see your web content as shown below

 

---