Liferay liferay-ui:tabs

Aim of this article:

Understand the basic use of liferay-ui:tabs tag in a portlet.

---

Note 1:  Below line should be there in your JSP to use this tag

<%@ taglib uri=”http://liferay.com/tld/ui” prefix=”liferay-ui”%>

Note 2: The name of the tld file is liferay-ui.tld. This tld should be available under \docroot\WEB-INF\tld

Note 3: The tag class is com.liferay.taglib.ui.TabsTag

---

 1. Basic Tabs

 

This is the simplest tabs. This is the minimal code required to display this basic tabs

<liferay-ui:tabs names="Tab One,Tabe Two,Tab Three" refresh="<%=false %>">
    <liferay-ui:section>
        Tab One Content
    </liferay-ui:section>
    <liferay-ui:section>
            Tab Two Content
    </liferay-ui:section>
    <liferay-ui:section>
            Tab Three Content
    </liferay-ui:section>
</liferay-ui:tabs>

Code Explanation:

names attribute: The names of the different tabs. In the above case we are creating three tabs Tab One, Tab Two and Tab Three

refresh attribute : Its used when we dont want page refresh. false is for no page refresh and true for allow page refresh.

liferay-ui:section : Its simply used to tell which section belongs to which tab. We have created three tabs and that’s the reason we have three sections. 

2. You want different page for each tab

Lets consider you want to display tab1.jsp if you click Tab One and tab2.jsp if you click Tab Two. Similarly tab3.jsp for the Tab Three. 

So how are we going to do that? Just create the three JSP pages under your portlet docroot folder.

<portlet:renderURL var="tabURL"/>

<%
String tab = ParamUtil.getString(request, "tabs1","Tab One");
%>

<liferay-ui:tabs names="Tab One,Tab Two,Tab Three" url="<%=tabURL.toString()%>" >

<c:if test='<%= tab.equalsIgnoreCase("Tab One")%>' >
<jsp:include page="/tab1.jsp" flush="true" />
</c:if>

<c:if test='<%= tab.equalsIgnoreCase("Tab Two")%>' >
<jsp:include page="/tab2.jsp" flush="true" />
</c:if>

<c:if test='<%= tab.equalsIgnoreCase("Tab Three")%>' >
<jsp:include page="/tab3.jsp" flush="true" />
</c:if>

</liferay-ui:tabs>

Code Explanation:

In the above code we have created renderURL and url attribute is used. In this page refresh is not going to work. So we have not used it. Why we have written  String tab = ParamUtil.getString(request, “tabs1″,”Tab One”)? Because each time we click tab a parameter with name tabs1 is passed. For each tab this parameter has different value.Remember it can have only one value at a time.

If you click Tab One the value of tabs1 = Tab One

If you click Tab Two the value of tabs1 = Tab Two

If you click Tab Three the value of tabs1 = Tab Three

liferay-ui:tabs works in this way by default. Say you are not happy with this default tabs1 parameter. You want to add your own parameter of your choice. For this there is an attribute called param attribute. Consider we want a parameter myParam to be passed each time when a tab is clicked. See the below code

<portlet:renderURL var="tabURL"/>

<%
    String tab = ParamUtil.getString(request, "myParam","Tab One");
%>

<liferay-ui:tabs names="Tab One,Tab Two,Tab Three" url="<%=tabURL.toString()%>" param="myParam" > 

    <c:if test='<%= tab.equalsIgnoreCase("Tab One")%>' >      
        <jsp:include page="/tab1.jsp" flush="true" />
    </c:if>
    
    <c:if test='<%= tab.equalsIgnoreCase("Tab Two")%>' >     
        <jsp:include page="/tab2.jsp" flush="true" />
    </c:if>
    
    <c:if test='<%= tab.equalsIgnoreCase("Tab Three")%>' >     
        <jsp:include page="/tab3.jsp" flush="true" />
    </c:if>
    

</liferay-ui:tabs>

---

Note: By default param value can be any one name of the tab name that we have mentioned by names attribute. If you want different value for each tab then you can use tabsValues attribute. Here is a quick syntax

<liferay-ui:tabs names=”Tab One,Tab Two,Tab Three” url=”<%=tabURL.toString()%>”  param=”myParam” tabsValues=”one,two,three”>

 

---

 

3. You want to select a tab by code

In the above code we have used render url. You can use action URL also to do database related stuffs on clicking each tab. You know after each action request render phase is invoked. Say you have clicked Tab Three and you are invoking process action. So after page refresh Tab One will be active. So how are we going to maintain the tab state? For this we can use another attribute called value. Inside the tag use it like this

value=”<%=Some dynamic value%>”

Say after page refresh you want to show the third tab. Below is the code

<%

//The parameter should come from server side code. Say some-parameter = “three”

String tabValue = ParamUtil.getAttribute(request,”some-parameter”);

%>

liferay-ui:tabs names=”Tab One,Tab Two,Tab Three” url=”<%=tabURL.toString()%>” param=”myParam” tabsValues=”one,two,three” value=”<%=tabValue %>”

 

4. You want to use tab in Ajax way

You know that there wont be any page refresh. In this case we use serve resource URL in the url attribute and use refresh attribute false.The step is shown in the in 1.