Monday 26 December 2016

Search Container in Liferay 7

In Liferay, we can easily display records in proper tabular format with pagination using the Search Container tag of Liferay. I suggest seeing my previous post CRUD Operation in LiferayDXP
before learning SearchConatiner.

Here we will learn how to display all records of the Product table created in my previous post which includes three columns.
  1. productId
  2. productName
  3. productPrice
Step1 Open view.jsp page.Goto Windows→Show View→Snippets as shown here


Now navigate to Liferay UI Search Container → Model Search Container→Browse


From here select Product Entity as shown below.


This will insert liferay-ui:search-container code in your view.jsp as shown below.

<liferay-ui:search-container delta="5" deltaConfigurable="true" emptyResultsMessage="no-products">
<liferay-ui:search-container-results results="<%= ProductLocalServiceUtil.getProducts(searchContainer.getStart(), searchContainer.getEnd()) %>" />

<liferay-ui:search-container-row
className="com.liferay.product.service.model.Product"
modelVar="aProduct">
<liferay-ui:search-container-column-text property="productId"/>
<liferay-ui:search-container-column-text property="productName"/>
<liferay-ui:search-container-column-text property="productPrice"/>
  </liferay-ui:search-container-ow>

<liferay-ui:search-iterator />
</liferay-ui:search-container>

Here we use various tags which are explained as follow.
  1. <liferay-ui:search-container delta="" deltaConfigurable="" emptyResultsMessage=""/>  

This tag contains the following attributes

delta-This attribute is used to specify how many records per page we want to display.

deltaConfigurable--This attribute is used to specify whether the user can change no of records displayed on-page. It takes a boolean value.

emptyResultsMessage--This is message that will be displayed when there are no records available to display

     2<liferay-ui:search-container-results results="" />

It takes the following attribute.

results--This attribute contains all records between start and end index which can be specified using searchContainer object as follows.

<liferay-ui:search-container-results results=
         "<%= ProductLocalServiceUtil.getProducts(searchContainer.getStart(), searchContainer.getEnd()) %>" />

   3<liferay-ui:search-container-row className="" modelVar="">

This tag contains the following tags.

className--This attribute takes the full path of your model attribute.

modelVar--This variable holds the current object for each row. We can use this variable to get attribute values of objects.

    4 <liferay-ui:search-container-column-text property="" name=""/>

property--this should be the same as various fields of your Model Class (i.e Product) whose getter setter is already available. If a match is found then it will display attribute value each time for the current object.

name--This will be used to specify the header name for each column.

href:- We can pass URL if we want some action to trigger on click of this field

    5 <liferay-ui:search-iterator />
  • This tag is used to iterate over a list and generate rows based on no of records in the list. This must come after row tag.

View.jsp

<%@page
import="com.liferay.product.service.service.ProductLocalServiceUtil"%>
<%@ include file="init.jsp"%>
<portlet:renderURL var="addProductURL">
<portlet:param name="mvcPath" value="/addProduct.jsp" />
</portlet:renderURL>

<aui:button onClick= "${addProductURL}" value="add-product"></aui:button>

<liferay-ui:search-container delta="5" deltaConfigurable="true" emptyResultsMessage="no-products">
<liferay-ui:search-container-results results="<%= ProductLocalServiceUtil.getProducts(searchContainer.getStart(), searchContainer.getEnd()) %>" />

<liferay-ui:search-container-row
className="com.liferay.product.service.model.Product"
modelVar="aProduct">
<liferay-ui:search-container-column-text property="productId" name=""/>
<liferay-ui:search-container-column-text property="productName"/>
<liferay-ui:search-container-column-text property="productPrice"/>
</liferay-ui:search-container-row>

<liferay-ui:search-iterator />
</liferay-ui:search-container>

O/P





New posts you may like to visit








No comments:

Post a Comment