How to customize Search portlet

[Dayanand Tiwari, modificado 6 Anos atrás.]

Hi, I'm using Liferay 7 community version and need to develop the search box.
Thought of using existing search portlet but it needs to be customized as per the application's look and feel.
Now this needs to be rendered into the specific page. Can anyone please tell me how to achieve this(Can you please provide some explanation also how and where certain piece of code needs to be used as I'm into learning stage.

[Andrew Jardine, modificado 6 Anos atrás.]

Hi Dayanand,

Customizing the look and feel historically has been done using jsp hooks -- which we refer to in the new version of Liferay as "JSP Fragments". If you haven't already, you should download the portal source code because as you go, you'll probably find yourself looking things up. Once you have the source downloaded and unpacked you can find all the Search stuff under /modules/apps/foundation/portal-search/.

For the JSPs that you want to override to customize the look and feel, you need to look at the portal-search-web module under src/main/resources/META-INF/resources. In there you will find all sorts of JSPs and JSPFs that make up the different bits and bobs. Take some time to understand how they are stitch together -- it can be a bit message with the scriptlets, but some careful reading and you will get it soon enough.

Once you have that understanding down, and have identified the places that you need to change the code, you'll want to follow this guide: https://dev.liferay.com/develop/tutorials/-/knowledge_base/7-0/overriding-a-modules-jsps to create the module to override the JSPs you need to change.

[srini vasulu, modificado 4 Anos atrás.]

Andrew Jardine:

Hi Dayanand,

Customizing the look and feel historically has been done using jsp hooks -- which we refer to in the new version of Liferay as "JSP Fragments". If you haven't already, you should download the portal source code because as you go, you'll probably find yourself looking things up. Once you have the source downloaded and unpacked you can find all the Search stuff under /modules/apps/foundation/portal-search/.

For the JSPs that you want to override to customize the look and feel, you need to look at the portal-search-web module under src/main/resources/META-INF/resources. In there you will find all sorts of JSPs and JSPFs that make up the different bits and bobs. Take some time to understand how they are stitch together -- it can be a bit message with the scriptlets, but some careful reading and you will get it soon enough.

Once you have that understanding down, and have identified the places that you need to change the code, you'll want to follow this guide: https://dev.liferay.com/develop/tutorials/-/knowledge_base/7-0/overriding-a-modules-jsps to create the module to override the JSPs you need to change.

Hi Andrew Jardine can we sort the search results in liferay 7 ? if yes give me how we can sort?

​​​​​​​Thanks,
srini

[Andrew Jardine, modificado 4 Anos atrás.]

Hi Srini,Can you give me a little more background?
#1/ When you say 7, do you mean 7.0, or one of the newer releases (7.1, 7.2 ..)

#2/ If you are working with 7.1 or newer, are you referring to the Search portlet (where you add it to the page and everything is there) or are you referring to the new search portlets where you can add results, facets, etc. to the page individually.

#3/ Lastly, have you created a JSP hook as the original poster was looking to do? or are you hijacking this thread?

[srini vasulu, modificado 4 Anos atrás.]

Andrew Jardine:

Hi Srini,Can you give me a little more background?
#1/ When you say 7, do you mean 7.0, or one of the newer releases (7.1, 7.2 ..)

#2/ If you are working with 7.1 or newer, are you referring to the Search portlet (where you add it to the page and everything is there) or are you referring to the new search portlets where you can add results, facets, etc. to the page individually.

#3/ Lastly, have you created a JSP hook as the original poster was looking to do? or are you hijacking this thread?

Hi Andrew,
1) i am using liferay 7.o GA5  version2)i am referring the the liferay search portlet default liferay one.3)i am creating the jsp hook and trying to sort the columns but here i stuck with how we can sort the column(user needs to select the sort). like user portlet.

[Andrew Jardine, modificado 4 Anos atrás.]

Ok -- I don't have the GA5 source handy, so I am going to go from memory here. There is a file main_search_form.jsp or soemthing like that. That is the file that has the search bar. In there you can add a drop down with whatever filter you want to provide to the user. Because it is part of the form, when you submit it, the parameter will be passed as part of the render url.

Now I think the other file you want is the main_search_results.jsp but I can't quite recall. In that JSP you will see all the logic that builds the query. You can retrieve your drop down value from the renderRequest here and then update the query with the sort you want to apply.

[srini vasulu, modificado 4 Anos atrás.]

Andrew Jardine:

Ok -- I don't have the GA5 source handy, so I am going to go from memory here. There is a file main_search_form.jsp or soemthing like that. That is the file that has the search bar. In there you can add a drop down with whatever filter you want to provide to the user. Because it is part of the form, when you submit it, the parameter will be passed as part of the render url.

Now I think the other file you want is the main_search_results.jsp but I can't quite recall. In that JSP you will see all the logic that builds the query. You can retrieve your drop down value from the renderRequest here and then update the query with the sort you want to apply.

Hi Andrew,
the jsp file names are same in 7.0 and 7.1,7.2 versions, jsp pages are view.jsp,search.jsp,main_search.jspf,main_search_result_form.jspf.in search.jsp fileString orderByCol = ParamUtil.getString(request, "orderByCol", "snippet_title");
String orderByType = ParamUtil.getString(request, "orderByType", "asc");PortletURL portletURL = renderResponse.createRenderURL();
portletURL.setParameter("orderByCol", orderByCol);
portletURL.setParameter("orderByType", orderByType);
portletURL.setParameter("keywords", HtmlUtil.escape(searchDisplayContext.getKeywords()));
portletURL.setParameter("extension",extension);portletURL.setParameter("mvcPath", "/search.jsp");
portletURL.setParameter("redirect", redirect);
portletURL.setPortletMode(PortletMode.VIEW);
portletURL.setWindowState(WindowState.MAXIMIZED);
pageContext.setAttribute("portletURL", portletURL);
<liferay-frontend:management-bar
        includeCheckBox="<%= true %>"
        searchContainerId="search"
    >
    <liferay-frontend:management-bar-filters>
        <%-- <liferay-frontend:management-bar-navigation
            navigationKeys='<%= new String[] {"all"} %>'
            portletURL="<%= portletURL %>"
        /> --%>        <liferay-frontend:management-bar-sort
            orderByCol="<%= orderByCol %>"
            orderByType="<%= orderByType %>"
            orderColumns='<%= new String[] {"snippet_title","snippet_description"} %>' (here tries with title and description but not working and changed to sanippet but then also no use )
            portletURL="<%= portletURL %>"
        />
    </liferay-frontend:management-bar-filters>
    </liferay-frontend:management-bar>
    <%@ include file="/main_search.jspf" %>
    
In main_search.jspf file<aui:col cssClass="result" first="<%= !searchDisplayContext.isShowMenu() %>" span="<%= 9 %>">
        <%@ include file="/main_search_suggest.jspf" %>
        <% 
            com.liferay.portal.kernel.dao.search.SearchContainer searchcontainer1 = searchDisplayContext.getSearchContainer();
            searchcontainer1.setOrderByCol(orderByCol);
            searchcontainer1.setOrderByType(orderByType);
            List<com.liferay.portal.kernel.search.Document> dcumentList = searchcontainer1.getResults();
            System.out.println(dcumentList.size());
            //isDocumentSortableTextField
        %>
        <liferay-ui:search-container
            id="search"
            searchContainer="<%= searchcontainer1 %>"
        >
            <liferay-ui:search-container-row
                className="com.liferay.portal.kernel.search.Document"
                escapedModel="<%= false %>"
                keyProperty="UID"
                modelVar="document"
                stringKey="<%= true %>"
            >                <%
                com.liferay.portal.search.web.internal.result.display.builder.SearchResultSummaryDisplayBuilder searchResultSummaryDisplayBuilder = new com.liferay.portal.search.web.internal.result.display.builder.SearchResultSummaryDisplayBuilder();                searchResultSummaryDisplayBuilder.setAssetEntryLocalService(com.liferay.asset.kernel.service.AssetEntryLocalServiceUtil.getService());
                searchResultSummaryDisplayBuilder.setCurrentURL(currentURL);
                searchResultSummaryDisplayBuilder.setDocument(document);
                searchResultSummaryDisplayBuilder.setHighlightEnabled(searchDisplayContext.isHighlightEnabled());
                searchResultSummaryDisplayBuilder.setLanguage(com.liferay.portal.kernel.language.LanguageUtil.getLanguage());
                searchResultSummaryDisplayBuilder.setLocale(locale);
                searchResultSummaryDisplayBuilder.setPortletURLFactory(searchDisplayContext.getPortletURLFactory());
                searchResultSummaryDisplayBuilder.setQueryTerms(searchDisplayContext.getQueryTerms());
                searchResultSummaryDisplayBuilder.setRenderRequest(renderRequest);
                searchResultSummaryDisplayBuilder.setRenderResponse(renderResponse);
                searchResultSummaryDisplayBuilder.setRequest(request);
                searchResultSummaryDisplayBuilder.setResourceActions(com.liferay.portal.kernel.security.permission.ResourceActionsUtil.getResourceActions());
                searchResultSummaryDisplayBuilder.setSearchResultPreferences(searchDisplayContext.getSearchResultPreferences());
                searchResultSummaryDisplayBuilder.setThemeDisplay(themeDisplay);
                String arr[] = searchDisplayContext.getQueryTerms();
                /* for(String queryTermsValue:arr){
                    System.out.println("QueryTerms ::"+queryTermsValue);
                } */
                System.out.println("========================================================================================================================");
                System.out.println(document);
                    
                com.liferay.portal.search.web.internal.result.display.context.SearchResultSummaryDisplayContext searchResultSummaryDisplayContext = searchResultSummaryDisplayBuilder.build();
                %>                <c:if test="<%= searchResultSummaryDisplayContext != null %>">
                    <%@ include file="/main_search_result_form.jspf" %>
                </c:if>
            </liferay-ui:search-container-row>            <liferay-ui:search-iterator displayStyle="descriptive" markupView="lexicon" type="more" />            <c:if test="<%= searchDisplayContext.isDisplayMainQuery() && (hits.getQuery() != null) %>">
                <table class="full-query">
                    <tr>
                        <td valign="top">
                            <div class="container">
                                <code>
                                    <%= HtmlUtil.escape(IndexSearcherHelperUtil.getQueryString(searchDisplayContext.getSearchContext(), hits.getQuery())) %>
                                </code>
                            </div>
                        </td>
                    </tr>
                </table>
            </c:if>
        </liferay-ui:search-container>
    </aui:col>
    
    main_search_result_form.jspf file    <c:if test="<%= searchResultSummaryDisplayContext.isUserPortraitVisible() %>">
    <liferay-ui:search-container-column-text>
        <liferay-ui:user-portrait
            cssClass="user-icon-lg"
            userId="<%= searchResultSummaryDisplayContext.getAssetEntryUserId() %>"
        />
    </liferay-ui:search-container-column-text>
</c:if><liferay-ui:search-container-column-text
    colspan="<%= 2 %>"
>
    <h5>
        <a href="<%= searchResultSummaryDisplayContext.getViewURL() %>">
            <strong><%= searchResultSummaryDisplayContext.getHighlightedTitle() %></strong>
        </a>        <c:if test="<%= searchResultSummaryDisplayContext.isAssetRendererURLDownloadVisible() %>">
            <aui:a href="<%= searchResultSummaryDisplayContext.getAssetRendererURLDownload() %>">
                <liferay-ui:message arguments="<%= HtmlUtil.escape(searchResultSummaryDisplayContext.getTitle()) %>" key="download-x" />
            </aui:a>
        </c:if>
    </h5>    <h6 class="text-default">
        <%= searchResultSummaryDisplayContext.getModelResource() %>        <c:if test="<%= searchResultSummaryDisplayContext.isLocaleReminderVisible() %>">
            <liferay-ui:icon image='<%= "../language/" + searchResultSummaryDisplayContext.getLocaleLanguageId() %>' message="<%= searchResultSummaryDisplayContext.getLocaleReminder() %>" />
        </c:if>
    </h6>    <c:if test="<%= searchResultSummaryDisplayContext.isContentVisible() %>">
        <h6 class="text-default">
            <%= searchResultSummaryDisplayContext.getContent() %>
        </h6>
    </c:if>    <c:if test="<%= searchResultSummaryDisplayContext.isAssetCategoriesOrTagsVisible() %>">
        <h6 class="text-default">
            <liferay-ui:asset-tags-summary
                className="<%= searchResultSummaryDisplayContext.getClassName() %>"
                classPK="<%= searchResultSummaryDisplayContext.getClassPK() %>"
                paramName="<%= searchResultSummaryDisplayContext.getFieldAssetTagNames() %>"
                portletURL="<%= searchResultSummaryDisplayContext.getPortletURL() %>"
            />            <liferay-ui:asset-categories-summary
                className="<%= searchResultSummaryDisplayContext.getClassName() %>"
                classPK="<%= searchResultSummaryDisplayContext.getClassPK() %>"
                paramName="<%= searchResultSummaryDisplayContext.getFieldAssetCategoryIds() %>"
                portletURL="<%= searchResultSummaryDisplayContext.getPortletURL() %>"
            />
        </h6>
    </c:if>    <c:if test="<%= searchResultSummaryDisplayContext.isDocumentFormVisible() %>">
        <h6 class="expand-details text-default"><a href="javascript:;"><liferay-ui:message key="details" />...</a></h6>        <div class="hide table-details table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th>
                            <liferay-ui:message key="key" />
                        </th>
                        <th>
                            <liferay-ui:message key="value" />
                        </th>
                    </tr>
                </thead>                <tbody>                    <%
                    for (com.liferay.portal.search.web.internal.result.display.context.SearchResultFieldDisplayContext searchResultFieldDisplayContext : searchResultSummaryDisplayContext.getDocumentFormFieldDisplayContexts()) {
                    %>                        <tr>
                            <td>
                                <strong><%= HtmlUtil.escape(searchResultFieldDisplayContext.getName()) %></strong>                                <br />                                <em>
                                    <liferay-ui:message key="array" /> = <%= searchResultFieldDisplayContext.isArray() %>, <liferay-ui:message key="boost" /> = <%= searchResultFieldDisplayContext.getBoost() %>,<br />                                    <liferay-ui:message key="numeric" /> = <%= searchResultFieldDisplayContext.isNumeric() %>, <liferay-ui:message key="tokenized" /> = <%= searchResultFieldDisplayContext.isTokenized() %>
                                </em>
                            </td>
                            <td>
                                <code>
                                    <%= searchResultFieldDisplayContext.getValuesToString() %>
                                </code>
                            </td>
                        </tr>                    <%
                    }
                    %>                </tbody>
            </table>
        </div>
    </c:if>
</liferay-ui:search-container-column-text>But still it's not sortingThanks,Srini

[Andrew Jardine, modificado 4 Anos atrás.]

Hi Srini,


I'm looking at the GA7 source and I am not seeing the management bar piece that you are showing. Am I correct in assuming that what you have done is:

1. Created a JSP fragment for the portal search
2. In the main_search.jspf you have added the code for the management bar
3. You see the management bar rendering, with your sort options
4. When you change you sort option, either nothing happens of it reloads and the data is not sorted based on your selection

... is any or all of that correct?

[srini vasulu, modificado 4 Anos atrás.]

Andrew Jardine:

Hi Srini,


I'm looking at the GA7 source and I am not seeing the management bar piece that you are showing. Am I correct in assuming that what you have done is:

1. Created a JSP fragment for the portal search
2. In the main_search.jspf you have added the code for the management bar
3. You see the management bar rendering, with your sort options
4. When you change you sort option, either nothing happens of it reloads and the data is not sorted based on your selection

... is any or all of that correct?

Hi Andrew,
there is no management bar in search portlet. i am added it.
created hook and added management bar in main_search.jspf
it's displaying with management bar but when i clicked the sorting options it's displaying same data but page refresh is happening.
Thanks,Srini.