Tuesday, 2 July 2013

Retrieve Data From Database Using Liferay Search Container in Aui Tab

Hi Liferay members in my last post i have shown to retrieve data from database but this time i am going to show data in liferay search container using aui tab.
Follow this steps.


AUI Tab in View.jsp

1)Write the following Script in your Jsp page
<script type="text/javascript">
AUI().ready(
'aui-tabs', 'substitute',
   function(A) {
       var tabs1 = new A.TabView(
           {
               boundingBox: '#markupTabs',
               listNode: '#test',
               contentNode: '#testContent'
           }
       );
       tabs1.render();        
   }
);
</script>

2)Now write the below snippet of code to show the name of Aui tabs in this view.jsp

<div id="markupTabs">
<ul class="aui-tabview-list aui-widget-hd" id="test">
<li class="aui-tab"><a class="aui-tab-label" href="javascript:;">Add Book</a></li>
<li class="aui-tab"><a class="aui-tab-label" href="javascript:;">List All Books</a></li>
</ul> 

3)In first tab we will insert data in database as shown in my previous blog just we will put in aui tab <div> here is its snippet code

<div class="aui-tabview-content aui-widget-bd" id="testContent">
                <div class="aui-tabview-content-item">
<portlet:actionURL name="exr" var="actionFooURL">
<portlet:param name="action" value="addBook"></portlet:param>
</portlet:actionURL>
<aui:form action="<%=actionFooURL.toString()%>" method="post">
Name<aui:input type="text" name="foo" id="foo" />
<br>
Title<aui:input type="text" name="title" id="title" />
<br />
<aui:input type="submit" name="ok"/>
</aui:form>
</div>

4)Now the main thing is to show in liferay search container the data from database here is the code just paste in view.jsp

<div class="aui-tabview-content aui-widget-bd" id="testContent">
                <div class="aui-tabview-content-item">
                <%
List<Foo> list=FooLocalServiceUtil.getFoos(-1, -1);
System.out.println("List size"+ list.size());%>
<portlet:renderURL  var="viewURL"/>

<liferay-ui:search-container delta="10" emptyResultsMessage="No Results Found">
<liferay-ui:search-container-results total="<%= list.size() %>"
results="<%=list%>" />
<liferay-ui:search-container-row modelVar="producti"
className="com.sample.model.impl.FooImpl" >

<liferay-ui:search-container-column-text name='Username' value="<%=producti.getUserName() %>" href="" />
<liferay-ui:search-container-column-text name='title' value="<%=producti.getTitle() %>" href="" />
</liferay-ui:search-container-row>
<liferay-ui:search-iterator searchContainer="<%= searchContainer %>" paginate="<%= true %>" />
</liferay-ui:search-container>
</div>
</div>
</div>
</div>

Here is thumnail of this project


5)Close all <div> and deploy the project and you will see the data in liferay search container.


If any query plz do comment or mail us at:
chiragmsc007it@gmail.com
mehdisunasara@gmail.com