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.
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.
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:
- Register a user on find.episerver.com. Note that this requires e-mail activation before you can proceed.
- Create a development index. Pick English as the only language.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
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.