Implementing Application Display Template in Custom Portlet

In the following post we will see how to implement Application Display Template to a custom portlet. We are assuming that we have a custom portlet as created in previous post.

Following are steps that we need to follow -


1. Create StudentPortletDisplayTemplateHandler.java class. This class extends BasePortletDisplayTemplateHandler class provided by Liferay.

	package com.test.template;
	import java.util.List;
	import java.util.Locale;
	import java.util.Map;
	import com.liferay.portal.kernel.language.LanguageUtil;
	import com.liferay.portal.kernel.portletdisplaytemplate.BasePortletDisplayTemplateHandler;
	import com.liferay.portal.kernel.template.TemplateVariableGroup;
	import com.liferay.portal.kernel.util.StringPool;
	import com.liferay.portlet.portletdisplaytemplate.util.PortletDisplayTemplateConstants;
	import com.test.model.Student;
	public class StudentPortletDisplayTemplateHandler extends BasePortletDisplayTemplateHandler{
	@Override
	public String getClassName() {
	return Student.class.getName();
	}
	@Override
	public String getName(Locale locale) {
	String students = LanguageUtil.get(locale, "students");
	return students.concat(StringPool.SPACE).concat(
	LanguageUtil.get(locale, "template"));
	}
	@Override
	public String getResourceName() {
	return "TestStudent_WAR_TestStudentportlet";
	}
	@Override
	public Map<String, TemplateVariableGroup> getTemplateVariableGroups(
	long classPK, String language, Locale locale)
	throws Exception {
	Map<String, TemplateVariableGroup> templateVariableGroups =
	super.getTemplateVariableGroups(classPK, language, locale);
	TemplateVariableGroup templateVariableGroup =
	templateVariableGroups.get("fields");
	templateVariableGroup.empty();
	templateVariableGroup.addCollectionVariable(
	"students", List.class, PortletDisplayTemplateConstants.ENTRIES,
	"student", Student.class, "curStudent", "name");
	return templateVariableGroups;
	}
	}

view raw StudentPortletDisplayTemplateHandler hosted with ❤ by GitHub

2. Declare StudentPortletDisplayTemplateHandler class in liferay-portlet.xml file.

<template-handler>com.test.template.StudentPortletDisplayTemplateHandler</template-handler>

view raw liferay-portlet-entry hosted with ❤ by GitHub

3. Configure permissions to allow users to manage application display templates.

	<?xml version="1.0"?>
	<!DOCTYPE resource-action-mapping PUBLIC "-//Liferay//DTD Resource Action Mapping 7.0.0//EN" "http://www.liferay.com/dtd/liferay-resource-action-mapping_7_0_0.dtd">
	<resource-action-mapping>
	<portlet-resource>
	<portlet-name>TestStudent</portlet-name>
	<permissions>
	<supports>
	<action-key>ADD_PORTLET_DISPLAY_TEMPLATE</action-key>
	<action-key>ADD_TO_PAGE</action-key>
	<action-key>CONFIGURATION</action-key>
	<action-key>VIEW</action-key>
	</supports>
	<site-member-defaults>
	<action-key>VIEW</action-key>
	</site-member-defaults>
	<guest-defaults>
	<action-key>VIEW</action-key>
	</guest-defaults>
	<guest-unsupported/>
	</permissions>
	</portlet-resource>
	</resource-action-mapping>

view raw templatestpermission hosted with ❤ by GitHub

4. Use tag to show ADT options in configuration jsp.

	<%@page import="com.test.model.Student"%>
	<%@page import="com.liferay.portal.util.PortalUtil"%>
	<%@page import="com.liferay.portal.kernel.template.TemplateHandlerRegistryUtil"%>
	<%@page import="com.liferay.portal.kernel.template.TemplateHandler"%>
	<%@page import="com.liferay.portal.kernel.util.GetterUtil"%>
	<%@page import="com.liferay.portal.kernel.util.Constants"%>
	<%@ include file="init.jsp" %>
	<liferay-portlet:actionURL portletConfiguration="true" var="configurationURL" />
	<liferay-portlet:renderURL portletConfiguration="true" var="configurationRenderURL" />
	<aui:form action="<%= configurationURL %>" method="post" name="fm">
	<aui:input name="<%= Constants.CMD %>" type="hidden" value="<%= Constants.UPDATE %>" />
	<aui:input name="redirect" type="hidden" value="<%= configurationRenderURL %>" />
	<aui:fieldset>
	<div class="display-template">
	<%
	String displayStyle = GetterUtil.getString(portletPreferences.getValue("displayStyle", StringPool.BLANK));
	long displayStyleGroupId = GetterUtil.getLong(portletPreferences.getValue("displayStyleGroupId", null), scopeGroupId);
	TemplateHandler templateHandler = TemplateHandlerRegistryUtil.getTemplateHandler(Student.class.getName());
	%>
	<liferay-ui:ddm-template-selector
	classNameId="<%= PortalUtil.getClassNameId(templateHandler.getClassName()) %>"
	displayStyle="<%= displayStyle %>"
	displayStyleGroupId="<%= displayStyleGroupId %>"
	refreshURL="<%= PortalUtil.getCurrentURL(request) %>"
	showEmptyOption="<%= true %>"
	/>
	</div>
	</aui:fieldset>
	<aui:button-row>
	<aui:button type="submit" />
	</aui:button-row>
	</aui:form>

view raw templateconfiguration hosted with ❤ by GitHub

5. Update the view jsp to render the data using selected ADT.

	<%@page import="com.liferay.portal.kernel.util.GetterUtil"%>
	<%@page import="com.liferay.portal.kernel.dao.orm.QueryUtil"%>
	<%@page import="com.test.service.StudentLocalServiceUtil"%>
	<%@page import="com.liferay.portlet.portletdisplaytemplate.util.PortletDisplayTemplateUtil"%>
	<%@page import="com.test.model.Student"%>
	<%@page import="com.liferay.portal.kernel.util.ListUtil"%>
	<%@page import="javax.portlet.PortletURL"%>
	<%@ include file="init.jsp" %>
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<portlet:renderURL var="addStudentJSP">
	<portlet:param name="myaction" value="addStudentForm"></portlet:param>
	</portlet:renderURL>
	<a href="<%=addStudentJSP%>">Add New Student</a>
	<br/><br/>
	<%
	String displayStyle = GetterUtil.getString(portletPreferences.getValue("displayStyle", StringPool.BLANK));
	long displayStyleGroupId = GetterUtil.getLong(portletPreferences.getValue("displayStyleGroupId", null), scopeGroupId);
	long portletDisplayDDMTemplateId = PortletDisplayTemplateUtil.getPortletDisplayTemplateDDMTemplateId(displayStyleGroupId, displayStyle);
	boolean showLocationAddress_view = GetterUtil.getBoolean(portletPreferences.getValue("showLocationAddress", StringPool.TRUE));
	%>
	<c:choose>
	<c:when test="<%= portletDisplayDDMTemplateId > 0 %>">
	<% List<Student> students = StudentLocalServiceUtil.getStudents(QueryUtil.ALL_POS, QueryUtil.ALL_POS); %>
	<%= PortletDisplayTemplateUtil.renderDDMTemplate(pageContext, portletDisplayDDMTemplateId, students) %>
	</c:when>
	<c:otherwise>
	<liferay-ui:search-container emptyResultsMessage="No Students were found!!">
	<liferay-ui:search-container-results results="${students}" />
	<liferay-ui:search-container-row className="com.test.model.Student" keyProperty="studentId" modelVar="student">
	<liferay-ui:search-container-column-text name="Name" value="${student.name}" />
	<liferay-ui:search-container-column-text name="Subject" value="${student.subject}" />
	<liferay-ui:search-container-column-jsp path="/WEB-INF/jsp/studentActions.jsp" align="right" />
	</liferay-ui:search-container-row>
	<liferay-ui:search-iterator paginate="false" />
	</liferay-ui:search-container>
	</c:otherwise>
	</c:choose>

view raw templateviewjsp hosted with ❤ by GitHub

6. Create the template and test. Following Freemarker sample code snippet is from liferay documentation page.

	<#if entries?has_content>
	Quick List:
	<ul>
	<#list entries as curEntry>
	<li>${curEntry.name} - ${curEntry.streetAddress}, ${curEntry.city}, ${curEntry.stateOrProvince}</li>
	</#list>
	</ul>
	</#if>

view raw samplefreemarker hosted with ❤ by GitHub

Please share your feedback if any ....