
Creating Tabs in Liferay Portlets
Table of Contents [-]
Introduction #
The Liferay "Journal" portlet, has "Articles,Structures,Templates,Recent" tabs inside the portlet. Liferay includes a custom tab tag which allows you to create the same effect in your own portlets. These tabs are essentially just other .jsp pages that are displayed based on the selection of the tab.
In this article, we will modify the Reports Portlet to have tabs. We will create "Sample Tab 1", "Sample Tab 2" and "Sample Tab 3" tabs. In the end, we will have a portlet that will look something like this:
Create Files #
To do this in your own portlet you will need to create the following files:
Create Tab Pages #
Remember to include some plain text in each file
ext/ext-web/docroot/html/portlet/ext/reports/sample_tab_1.jsp:
sample 1ext/ext-web/docroot/html/portlet/ext/reports/sample_tab_2.jsp:
sample 2ext/ext-web/docroot/html/portlet/ext/reports/sample_tab_3.jsp:
sample 3
init.jsp #
in init.jsp include the following code:
ext/ext-web/docroot/html/portlet/ext/reports/init.jsp:
<%@ include file="/html/common/init.jsp" %> <portlet:defineObjects />
view.jsp #
in view.jsp
ext/ext-web/docroot/html/portlet/ext/reports/view.jsp:
<%@ include file="/html/portlet/ext/reports/init.jsp" %> <% String tabs1 = ParamUtil.getString(request, "tabs1", "Sample Tab 1"); PortletURL portletURL = renderResponse.createRenderURL(); portletURL.setWindowState(WindowState.NORMAL); portletURL.setParameter("struts_action", "/ext/reports/view_reports"); portletURL.setParameter("tabs1", tabs1); String tabNames = "Sample Tab 1,Sample Tab 2,Sample Tab 3"; %> <liferay-ui:tabs names="<%= tabNames %>" url="<%= portletURL.toString() %>" /> It is recommeded using "<liferay-util:include page>" instead of "<%@ include file= " <c:if test='<%= tabs1.equals("Sample Tab 1") %>'> <liferay-util:include page="/html/portlet/ext/reports/sample_tab_1.jsp" > </c:if> <c:if test='<%= tabs1.equals("Sample Tab 2") %>'> <liferay-util:include page="/html/portlet/ext/reports/sample_tab_2.jsp" > </c:if> <c:if test='<%= tabs1.equals("Sample Tab 3") %>'> <liferay-util:include page="/html/portlet/ext/reports/sample_tab_3.jsp" > </c:if>
explained:
<% String tabs1 = ParamUtil.getString(request, "tabs1", "Sample Tab 1"); PortletURL portletURL = renderResponse.createRenderURL(); portletURL.setWindowState(WindowState.NORMAL); portletURL.setParameter("struts_action", "/ext/reports/view_reports"); portletURL.setParameter("tabs1", tabs1); String tabNames = "Sample Tab 1,Sample Tab 2,Sample Tab 3"; %>
tabs1: holds the value of the tab to be displayed
tabNames: comma delimited list of tab names
(Note: A common mistake is to include spaces before or after the commas. Make sure there are no extra spaces in the variable "tabNames", otherwise the strings wont match with the value in "tabs1". see above)
<liferay-ui:tabs names="<%= tabNames %>" url="<%= portletURL.toString() %>" />
This is a custom Liferay tab tag. This auto-genereates the tabs based on the variables defined above. (defined: "portal\portal-web\docroot\html\taglib\ui\tabs")
<c:if test='<%= tabs1.equals("Sample Tab 1") %>'> <liferay-util:include page="/html/portlet/ext/reports/sample_tab_1.jsp" > </c:if> <c:if test='<%= tabs1.equals("Sample Tab 2") %>'> <liferay-util:include page="/html/portlet/ext/reports/sample_tab_2.jsp" > </c:if> <c:if test='<%= tabs1.equals("Sample Tab 3") %>'> <liferay-util:include page="/html/portlet/ext/reports/sample_tab_3.jsp" > </c:if>
Based on the value of tabs1, this will include a different jsp page.
Deploy your code and now take a look at your Reports Portlet. Now your Reports Portlet should look like:
Make page refresh optional #
Use this snippet to do the same thing without requiring page refreshes.
<liferay-ui:tabs names="Sample Tab 1, Sample Tab 2, Sample Tab 3" refresh="<%= false %>" > <liferay-ui:section> sample 1 </liferay-ui:section> <liferay-ui:section> sample 2 </liferay-ui:section> <liferay-ui:section> sample 3 </liferay-ui:section> </liferay-ui:tabs>