Thursday, January 22, 2015

Search Container in Liferay 6.2

Liferay Provide a simple and easy way to show list of Objects in proper tabular format with pagination by using Search Container tag of liferay.

Our goal is to show a list of Student in which:-

1)Column show student name,last name,Class etc.
2)In one column we show address of Student that comes from                    another jsp.
3)In one column we provide a link .When user click on that link it                will go to another jsp that show complete detail of Student.
4)In one column we provide delete row feature.
5)Also we provide pagination among the list.

Step 1:-Create Liferay Portlet and Services
First we create a liferay plugin project than create a portlet in this project. Then create sevice.xml and build services. For details of services you can read my Previous Blog.
Project Structure look like :-

This is my service.xml


This is my database table:-


Step 2:-Change view.jsp
Open view.jsp and paste this :-

Explaination of view.jsp:-

a)String currentURL = PortalUtil.getCurrentURL(request); 

By using getCurrentURL we can get the URL of Current Page this url is helpful when we get back from detail page to our current list page.

b)<liferay-ui:search-container >

This tag contain the following attributes:-

-delta:-  This attribute is used to set by default how many records per page is shown.
-deltaConfigurable:- This attribute is used so that end user can change no of records per page.
-emptyResultsMessage:- If there is no record then this message is displayed.
-iteratorURL:- If there are multiple tabs and each tab contain a search container then this iteratorURL maintain pagination otherwise after pagination it will go portlet default page irrespective of where your search container.

C)<liferay-ui:search-container-results results=" " total=""/>

This result tag has two main attribute like:-

-results:- This attribute contain records with start index and end index . The start index and end index can be get with the help of searchContainer Object.The object of searchContainer is  available as soon as we include the import statement:-

            <%@ taglib uri="" prefix="liferay-ui"%>


StudentLocalServiceUtil.getStudents(searchContainer.getStart(), searchContainer.getEnd()) %>"

-total:- This attribute contain total number of records.

d)<liferay-ui:search-container-row className=" " modelVar="" keyProperty=""> 

This search container row tag contain attribute:-

-className:-This contain the full path of your model Class like Student in this case.
-modelVar:- This contain the current object that is available in the row .You can use this to get values and provide in Urls etc.
-keyProperty:- Primary key of Model Object.

e)<liferay-ui:search-container-column-text property="" name="" href=""  value="" cssClass=""/>

This search container column-text property tag is used to set the value in column.For each column their is one tag.This contain attribute:-

-property:- This must be the same as fields mention in Model Class whose getter and setters are available.If this match with instance variables of Model Class(Student) then it get value automatically from current object

-name:- Header name of your column.You can also get this name from file.

<liferay-ui:search-container-column-text property="phone" name="<%=LanguageUtil.get(pageContext, \"phone\") %>"/>

For this just create a folder(content) inside src and then create a inside this:-
phone = Telephone Number

And then provide the entry of inside portlet.xml like this:-


-href:- If you want any action is perform on Clicking of this field then pass Url  here.
-Value:- Any specific value you want to show  on the basis of value of database or any hardcoded value.Otherwise by property tag it will automatically take from current object.

<liferay-ui:search-container-column-text name="Gender" value='<%=(student.getGender().equalsIgnoreCase("M"))?"Male":"Female"%>'/>

Here value is by default is M or F but we use Current Object and get Gender and on the basis of result we change the value to Male or Female.

-cssClass:- You can provide any css and mention in main.css

 <liferay-ui:search-container-column-text cssClass="blue" property="std" name = "Class" />

paste this inside main.css:-

.blue {
    color: blue;

f)<liferay-ui:search-container-column-jsp name="" align="left" path=""/>

If you want to show a particular jsp in some column then you can use this tag by providing complete path of your jsp.

g)<liferay-ui:search-iterator />

This is iterator this tag must come after row tag this iterate the list and create rows.

For Detail Explanation watch the video


Step 3:- Create the jsps
Create display_student.jsp inside html/searchcontainer

Note:-The back to all link use the URL that is captured by PortalUtil.getCurrentURL(request) in view.jsp and send with renderUrl. So that we can go back to view.jsp again.

Now Create address.jsp inside html/searchcontainer:-

Note:-This Complete jsp is directly put in column(search-container-column-jsp tag)

Step 4:- Change the Controller


Here we just delete the student on the basis of studentId and after that send to that particular page by using backurl.

Step 5:-Check the Output
Now deploy the portlet and add to page:-

On Click on Student Name or Detail Control goes to another jsp where we show whole data related to student.

You can Download Source code from  Search Container in Liferay. 

Hope this will Help....

Related Post:-

No comments:

Post a Comment

Total Pageviews

Number Of Unique Visitor

Free counters!