EPiServer  /  Find November 12, 2012

Building a search page for an EPiServer 7 site with EPiServer Find

Downloadable and annotated source code for a ready-to-use search page using EPiServer Find.

Although EPiServer Find can be used for many things on an EPiServer 7 site, the most common scenario is probably free text search pages and while there’s plenty of documentation out there there’s (so far) no ready-to-use search page. In this post you’ll find source code for such a ready to use search page for the new Alloy Tech templates that ship with EPiServer 7 using Find.

While the purpose of this post, and the code, is to show how to build a better search page for the Alloy templates most of the code and concepts are generic and can be reused on just about any EPiServer 7 site. The search page discussed in this post reuses CSS classes from Bootstrap and some from the Alloy templates and looks similar to the one that exists out-of-the-box in the Alloy templates. However, since it uses Find it offers better free text search and best bets. It also brings searching in VPP files, highlighting of keywords, a facet with filters for section on the site and paging. Using a number of properties on the search page’s page type it also allows editors to control some of it’s functionality. Below is an example of how it looks.

EPiServer-Alloy-Find-Search-Page-Example

Code walk through

The search page uses the new Unified Search concept meaning that the code for the basic search functionality is very short. I have however also included some customization of the out-of-the-box functionality as well as made it possible for editors to control some of the search page’s behavior.

Instead of cluttering up this post with extracts from the source code and a walk through of them I’ve made the full, annotated, source code available here. Note that you can switch between files using the “Jump to” menu in the top right corner.

Jump-to-menu

Most important is the markup for the template, FindTemplate.aspx and its code behind file, FindTemplate.aspx.cs, but I’d recommend looking through all of the files, especially the initialization module in which some customization of the default indexing as well as projection of image URLs is made.

Downloadable source code

You’re also most welcome to download the source code and use it yourself. In the zip file you’ll find a directory structure that matches that of the Alloy templates meaning that you can simply paste all of the folders into the root folder of an Alloy Tech site. Just remember to paste them through Visual Studio or manually include the files in your project.

In order to use the search page in a new Alloy Tech site after pasting the downloaded source code here’s what you’ll need to do:

  1. Register a user on find.episerver.com. Note that this requires e-mail activation before you can proceed.
  2. Create a development index. Pick English as the only language.
  3. Once you've created the index you can see the configuration you need ready to cut-n-paste. Copy everything except for the first and last line of the config into the file /[Configuration]/Common/Web.Common.config.
  4. Optional: Configure Find's shell module by copying the config described here into the episerver.shell section in /[Configuration]/EPiServer/web.config. This config is added to the web.config file in the web root by Find’s NuGet package but will get overridden when compiling due to the config handling in the Alloy templates.
  5. Install the Find CMS integration using NuGet. (Add EPiServer's feed and get this package). Alternatively, download it from EPiServer World and add all of the DLLs as reference.
  6. Locate the scheduled job "EPiServer Find CMS Indexing Job" in admin mode and run it manually. This will index all existing pages. Future changes to pages will be automatically indexed.
  7. Create a page of the new page type (FindSearchPage). On the start page change Search Page property (on the Site Settings tab) to point to the newly created page.
  8. Search using the quick search box in the site's header.

After creating the search page you can play with it’s different properties to control how it works, for instance to control whether matching keywords should be highlighted. You may also want to upload a PDF or Word document to Global Files and search for a word in it.

Search statistics

Apart from a solution for free text search and querying for content Find also offers search statistics. I haven’t implemented that on this search page as I wanted to keep the code focused on showing how to build the actual search functionality. Not using the search statistics functionality on a real site would however be a shame and I’ll get back to how to add that in a future post.

PS. For updates about new posts, sites I find useful and the occasional rant you can follow me on Twitter. You are also most welcome to subscribe to the RSS-feed.

Joel Abrahamsson

Joel Abrahamsson

I'm a passionate web developer and systems architect living in Stockholm, Sweden. I work as CTO for a large media site and enjoy developing with all technologies, especially .NET, Node.js, and ElasticSearch. Read more

Comments

comments powered by Disqus

My book

Want a structured way to learn EPiServer 7 development? Check out my book on Leanpub!

More about EPiServer Find