Liferay Search Container

Creating Liferay Search Container GUIs

Time for some basic knowledge:

What does the liferay-ui tld say about the search container? How is it possible to create nice and functional search container GUIS? Read the following and you know more:

The search container is always rendering a set of rows that contain one or more columns to display search results. You may change the way the search container is rendering the rows but in the end it will always be a set of rows. So what we are going to do now will only affect the rows itself. We won't change the search container to display grids or something similar.

The liferay search container is structured as follows:

view plainprint?

1. <liferay-ui:search-container >   
2. <liferay-ui:search-container-results>  
3. <!-- Calculate results-->  
4. </liferay-ui:search-container-results>  
5. <liferay-ui:search-container-row>  
6. <!--Create the rows that display the search results-->  
7. </liferay-ui:search-container-row>  
8. </liferay-ui:search-container >  

Because we will only care for the rows, we will jump right in and take a look at some of the tags you can use:


search-container-column-text

view plainprint?

1. <liferay-ui:search-container-column-text name="userName" property="userName" />  

The column text tag creates a label filled with a header text (name) and a populated value of the search container entity (property). In our case, the property userName would be taken from our entity and displayed.


search-container-column-jsp

view plainprint?

1. <liferay-ui:search-container-column-jsp path="/your.jsp" align="right" />  

Very powerful! Allows to create a complete JSP that will be displayed in every row. By using this tag you can create your own forms with AlloyUI or standard HTML / Javascript and let the search container do all the magic.

search-container-column-button

view plainprint?

1. <liferay-ui:search-container-column-button align="right" href="<%= yourUrl %>" name='clickMe' />  

Allows to create a button pretty easy and connect it to a URL.


search-container-column-score

view plainprint?

1. <liferay-ui:ratings classPK="<%=user.getUserId()%>" className="<%=User.class.getName() %>" />  

Shows the score for the retrieved object.


These tags allow you to create very fast very powerful search container GUIs. I´ve only touched the surface here and there is a lot more of liferay magic that you can discover. Just take a look at the TLD which you can find here: 


http://code.google.com/p/liferay-book/source/browse/trunk/portlets/library-portlet/docroot/WEB-INF/tld/liferay-ui.tld?spec=svn3&r=3


If you like this tutorial it would be very nice, if you could click on some of the google ads you see on the right side. It helps me run this block and motivates me ;)

If you have any questions, feel free to leave a comment.