Creating Tabs in Liferay Portlets

Creating Tabs in Liferay Portlets

Table of Contents

1. Introduction
2. Create Files
3. Create Tab Pages
4. init.jsp
5. view.jsp
6. Make page refresh optional

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 1

ext/ext-web/docroot/html/portlet/ext/reports/sample_tab_2.jsp:

sample 2

ext/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>