Tabs with Search Container in Liferay

Generally we have to write a lot of javascript and java code in order to deal with paging in Web based application.

But with liferay you don't have to deal with that any more. Your life become easier with liferay.

As I used to post regularly in liferay forums. I found that most of the people face issues of pagination with Tabbing.
Here I would represent how search container works with Tabs.

Below are some of the screenshot for the demo that I am going to discuss in this post.

As you will refer above screenshot, you will be able to see two tabs and both of them having list of data.
First Tab show the list of all the User Group and the Second Tab shows the list of all Users for the Current Company.

Below are the steps you need to follow :-

1) First Create the Controller Class which will extend the MVC Controller and put it's Entry in the portlet.xml.

<portlet-class>com.blog.demo.controller.SearContainerController</portlet-class>

view raw Search Container Controller Class Entry in Portlet.xml hosted with ❤ by GitHub

SearchContainerController.java

	public class SearContainerController extends MVCPortlet
	{
	@Override
	public void doView(RenderRequest renderRequest,RenderResponse renderResponse) throws IOException, PortletException
	{
	String tabName= ParamUtil.getString(renderRequest, "tabs","UserGroup");
	/**
	* Depending on the parameter tabName, it will create searchcontainer
	*/
	if(tabName.equals("UserGroup"))
	{
	UserGroupUtil.searchContainerData(renderRequest, renderResponse);
	}else if(tabName.equals("User"))
	{
	UserUtil.searchContainerData(renderRequest, renderResponse);
	}
	this.include(viewTemplate, renderRequest, renderResponse);
	}
	}

view raw Search Container Controller Class hosted with ❤ by GitHub

2) In order to create the Tabbing View, you have to write below code in your jsp page. So in my case I have created the view.jsp and whose entry by default set in the portlet.xml.

	<!-- Making the Render URL and we are passing TAB parameter -->
	<liferay-portlet:renderurl var="portletURL">
	<liferay-portlet:param name="tabs" value="${tabs}"></liferay-portlet:param>
	</liferay-portlet:renderurl>
	<!-- Using default Liferay UI Tab in order to show the Tab View -->
	<liferay-ui:tabs names="UserGroup,User" param="tabs" refresh="<%= true %>" url="<%=portletURL %>">
	<!-- We are going to display two tabs so there will be two Sections in the Tab -->
	<liferay-ui:section>
	<c:if test="${tabs eq 'UserGroup'}">
	<%@include file="/html/portlet/searchcontainer-with-tabs/tabs/usergroup.jsp" %>
	</c:if>
	</liferay-ui:section>
	<liferay-ui:section>
	<c:if test="${tabs eq 'User'}">
	<%@include file="/html/portlet/searchcontainer-with-tabs/tabs/user.jsp" %>
	</c:if>
	</liferay-ui:section>
	</liferay-ui:tabs>

view raw Search Container View.jsp hosted with ❤ by GitHub

3) As you can see in the view.jsp, there are different sections for User and UserGroup. So we have created separate pages for both of them. In order to display data related to UserGroup and User, we have created usergroup.jsp and user.jsp respectively.

usergroup.jsp

	<!-- In order to display data in Search Container we will use liferay default Search Container -->
	<liferay-ui:search-container searchcontainer="${userGroupSearchContainer}">
	<!-- In order to get the total results and also to display no. of data -->
	<liferay-ui:search-container-results results="<%=searchContainer.getResults() %>" total="<%=searchContainer.getTotal() %>">
	<!-- Display Row with Name and Description as columns -->
	<liferay-ui:search-container-row classname="com.liferay.portal.model.UserGroup" keyproperty="userGroupId" modelvar="userGroup">
	<liferay-ui:search-container-column-text name="Name" property="name" />
	<liferay-ui:search-container-column-text name="Description" property="description" />
	</liferay-ui:search-container-row>
	<!-- Iterating the Results -->
	<liferay-ui:search-iterator />
	</liferay-ui:search-container-results>
	</liferay-ui:search-container>

view raw Search Container usergroup.jsp hosted with ❤ by GitHub

user.jsp

	<!-- In order to display data in Pagination form we will use liferay default Search Container -->
	<liferay-ui:search-container searchcontainer="${userSearchContainer}">
	<!-- In order to get the total results and also to display no. of data -->
	<liferay-ui:search-container-results results="<%=searchContainer.getResults() %>" total="<%=searchContainer.getTotal() %>">
	<!-- Display Row with First Name,Last Name,ScreenName and Description as columns -->
	<liferay-ui:search-container-row classname="com.liferay.portal.model.User">
	<liferay-ui:search-container-column-text name="First Name" property="firstName" />
	<liferay-ui:search-container-column-text name="Last Name" property="lastName" />
	<liferay-ui:search-container-column-text name="Screen Name" property="screenName" />
	<liferay-ui:search-container-column-text name="Job Title" property="jobTitle" />
	</liferay-ui:search-container-row>
	<!-- Iterating the Results -->
	<liferay-ui:search-iterator />
	</liferay-ui:search-container-results>
	</liferay-ui:search-container>

view raw Search Container user.jsp hosted with ❤ by GitHub

NOTE :- Here on the basis of  "tabs" parameter, it will return the search container.

4) In order to make the code more readable, I created the separate class for both the UserGroup i.e., UserGroupUtil and for User i.e.,UserUtil

UserGroupUtil

	public class UserGroupUtil
	{
	/**
	* @param renderRequest
	* @param renderResponse
	*/
	public static void searchContainerData(RenderRequest renderRequest,RenderResponse renderResponse)
	{
	PortletConfig portletConfig = (PortletConfig)renderRequest.getAttribute(JavaConstants.JAVAX_PORTLET_CONFIG);
	ThemeDisplay themeDisplay = (ThemeDisplay)renderRequest.getAttribute(WebKeys.THEME_DISPLAY);
	List<UserGroup> userGroupList = new ArrayList<UserGroup>();
	Map<String,String> paramMap= new HashMap<String,String>();
	paramMap.put("tabs", "UserGroup");
	/*
	* Creating IteratorURL and in that we will pass tab parameter
	*/
	PortletURL iteratorURL= renderResponse.createRenderURL();
	Iterator<Map.Entry<String, String>> entries = paramMap.entrySet().iterator();
	while (entries.hasNext()) {
	Map.Entry<String, String> entry = entries.next();
	iteratorURL.setParameter(entry.getKey(), entry.getValue());
	}
	/*
	* Creating SearchContainer
	*/
	SearchContainer<usergroup> searchContainer = new SearchContainer<usergroup>(renderRequest, null,
	null, SearchContainer.DEFAULT_CUR_PARAM, ParamUtil.getInteger(renderRequest, SearchContainer.DEFAULT_DELTA_PARAM, 5),
	iteratorURL, null, LanguageUtil.get(portletConfig, themeDisplay.getLocale(), "No UserGroups were Found"));
	int total = 0;
	try {
	/*
	* Fetching all the User Group from the Current Company and added that into the userGroupList
	*/
	userGroupList=UserGroupLocalServiceUtil.getUserGroups(themeDisplay.getCompanyId());
	total = userGroupList.size();
	} catch (SystemException e) {
	SessionErrors.add(renderRequest, SystemException.class.getName());
	}
	/*
	* Sub listing the userGroupList depending on the delta parameter we have set in the SearchContainer.
	*/
	userGroupList = ListUtil.subList(userGroupList, searchContainer.getStart(), searchContainer.getEnd());
	searchContainer.setTotal(total);
	searchContainer.setResults(userGroupList);
	renderRequest.setAttribute("userGroupSearchContainer", searchContainer);
	}
	}

view raw Search Container UserGroupUtil.java hosted with ❤ by GitHub

UserUtil

	public class UserUtil
	{
	/**
	* @param renderRequest
	* @param renderResponse
	*/
	public static void searchContainerData(RenderRequest renderRequest,RenderResponse renderResponse)
	{
	PortletConfig portletConfig = (PortletConfig)renderRequest.getAttribute(JavaConstants.JAVAX_PORTLET_CONFIG);
	ThemeDisplay themeDisplay = (ThemeDisplay)renderRequest.getAttribute(WebKeys.THEME_DISPLAY);
	List<user> userList = new ArrayList<user>();
	Map<String,String> paramMap= new HashMap<String,String>();
	paramMap.put("tabs", "User");
	/*
	* Creating IteratorURL and in that we will pass tab parameter
	*/
	PortletURL iteratorURL= renderResponse.createRenderURL();
	Iterator<Map.Entry<String, String>> entries = paramMap.entrySet().iterator();
	while (entries.hasNext()) {
	Map.Entry<String, String> entry = entries.next();
	iteratorURL.setParameter(entry.getKey(), entry.getValue());
	}
	/*
	* Creating SearchContainer
	*/
	SearchContainer<user> searchContainer = new SearchContainer<user>(renderRequest, null,
	null, SearchContainer.DEFAULT_CUR_PARAM, ParamUtil.getInteger(renderRequest, SearchContainer.DEFAULT_DELTA_PARAM, 10),
	iteratorURL, null, LanguageUtil.get(portletConfig, themeDisplay.getLocale(), "No Users were Found"));
	int total = 0;
	try {
	/*
	* Fetching all the User from the Current Company and added that into the userList
	*/
	userList = UserLocalServiceUtil.getCompanyUsers(themeDisplay.getCompanyId(), -1, -1);
	total = userList.size();
	} catch (SystemException e) {
	SessionErrors.add(renderRequest, SystemException.class.getName());
	}
	/*
	* Sub listing the userList depending on the delta parameter we have set in the SearchContainer.
	*/
	userList = ListUtil.subList(userList, searchContainer.getStart(), searchContainer.getEnd());
	searchContainer.setTotal(total);
	searchContainer.setResults(userList);
	renderRequest.setAttribute("userSearchContainer", searchContainer);
	}
	}

view raw Search Conatiner UserUtil.java hosted with ❤ by GitHub

In order to work pagging in proper way for search container with different tabs. We need to create the iterator URL in proper manner. Because Pagging in Search Container works based on IteratorURL. So we need to pass proper parameter in the Iterator URL. The Below code plays an key role in the Tabbing with Search Container.

	/*
	* We need to pass "tabs" as a parameter in the IteratorURL
	* In order to get this parameter in the doView Method of SearchContainerController
	*/
	Map<String,String> paramMap= new HashMap<String,String>();
	paramMap.put("tabs", "User");
	PortletURL iteratorURL= renderResponse.createRenderURL();
	Iterator<Map.Entry<String, String>> entries = paramMap.entrySet().iterator();
	while (entries.hasNext())
	{
	Map.Entry<String, String> entry = entries.next();
	iteratorURL.setParameter(entry.getKey(), entry.getValue());
	}

view raw Search Container UserUtil some parts hosted with ❤ by GitHub

In the above code I used HashMap, because if we have more parameter to pass then we can pass easily in the Iterator URL. Hope it will be useful !!!!