« Back

Creating a Google Like Search

Company Blogs October 5, 2017 By Petteri Karttunen Staff

More than once I've been asked to customise Liferay search to be "simpler" and more "Google like".
In the first part of this blog series I'm going to create a custom search portlet from scratch and in the second part I’ll be discussing options to tune search behaviour like relevance.
First task in creating a custom search portlet was the choice of UI technology. This time I wanted to try something new. As far as Javascript framework was concerned, I was used to work with Alloy UI but as it's deprecated as of version 7 I decided to choose something else. Using Metal.js and SOY seemed attractive and interesting but there was not too much documentation or full bodied tutorials. On that basis, for someone like me who didn't have experience of closure templates, the task seemed somewhat challenging but I decided to take the challenge. It took a while to get the idea but in the end I think it was definitely worth it. Metal.js and SOY is a great and powerful combination. They enable and facilitate creating cleaner UI code than before by almost forcing you to separate presentation and logic layers.  See more information about Metal.js on https://metaljs.com
I wanted this new portlet to be lightweight, simple, support sorting and facets. It should be working with GET instead of POST parameters to make it bookmarkable and easier to work with Google Analytics. The parameters on address line should be readable. Above all I wanted to be fast. I didn't try to make it configurable for all the situations or support all the asset types like users but still it to be easily extensible and customisable. As a basis for something I could build on later. So I added there support for Web content, Blogs and Message boards. Support for other types can be easily added. There's no configuration option for the asset types in this example but basically there are just three things to do: add your new type in the menu, handle the form post QueryParamsBuilder.setTypeParam() and overload BaseResultBuilder for your asset type if needed. 
The code was done on DXP FP30 but it should work on CE too. I didn’t use the embedded ElasticSearch engine but a standalone one as debugging the index is much easier that way. There's by the way a great free  ElasticHQ plugin for ElasticSearch http://www.elastichq.org/. Instructions for setting up a standalone ElasticSearch are here https://dev.liferay.com/discover/deployment/-/knowledge_base/7-0/installing-elasticsearch
I tried to make code and comments easily readable. Have a look at it at GitHub.

Installation and configuration

Clone the git repo, build with Gradle and deploy to your portal. After deploying there's just one thing you need to do: put an AssetPublisher on the site you plant the Search portlet to. That’s needed to show any Web contents that do not have a display page but are in the CMS only. By default the portlet searches for a page with friendlyURL "/viewasset" but you can change that in the portlet configuration which can be found along the other few options  in Control Panel -> Configuration -> System Settings -> Other -> Gsearch display configuration

Code is available here https://github.com/peerkar/liferay-gsearch. Hopefully you'll find it useful!

Threaded Replies Author Date
[...] (Previous part of the series can be found... Anonymous October 30, 2017 12:59 AM
[...] (Previous parts of this series can be... Anonymous October 30, 2017 5:09 AM
[...] (Previous parts of this series can be... Anonymous October 30, 2017 6:30 AM
[...] Previous parts of this series can be... Anonymous November 27, 2017 3:55 AM

[...] (Previous part of the series can be found here) [...] Read More
Posted on 10/30/17 12:59 AM.
[...] (Previous parts of this series can be found here (part 1) and here (part 2) [...] Read More
Posted on 10/30/17 5:09 AM.
[...] (Previous parts of this series can be found here (part 1), here (part 2) and here (part 3) [...] Read More
Posted on 10/30/17 6:30 AM.
[...] Previous parts of this series can be found here (part 1), here (part 2), here (part 3) and here (part 4). In the final part of this blog series few more interesting features are added to the... [...] Read More
Posted on 11/27/17 3:55 AM.