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