Tuesday 29 August 2017

Search Container in Liferay 7


Search Container in Liferay 7


Here we will learn how to display all records of Product table created in my previous post which include three cloumns.
  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 conatins 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 user can change no of records displayed on page.It takes 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 take 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 following tags.

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

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

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

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

name--This will be used to specify 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 list and generates row based on no of records in 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

No comments:

Post a Comment