SharePoint 2010 Search Refinement Panel - Bad Border

If you have ever spent time customizing or even just using SharePoint's Search Center then i am sure you have seen this annoying little box that shows up when you have no refinements. It also shows up when you get no results back from a query like this:

So, what is this? You may ask...Well it is the border of the Refinement Panel DIV which has padding-bottom: 5px and padding-top: 7px and it looks good when there are refinement items but not so much when it is empty...

Well that's great but what can we do?
Well, if you already have a JavaScript file and a jQuery refference, then throw this in there and it will hide it when it is blank...

 function HideEmptyRefiner() {  
      if ( $('.ms-searchref-main').children().length == 0 ) {    
        $('.ms-searchref-main').hide();   
      }  
 }  
_spBodyOnLoadFunctionNames.push('HideEmptyRefiner');  

So, what if you don't want to run jQuery on your site? Well don't worry i won't leave you hanging...you can achieve the same result with plain old JavaScript but as always it is 10 times harder!

I am not going to go into the details (you can find those here on this great blog about the issue) but you have to be careful on how you look to see if there are any childNodes. You can't just do a simple parent.childNodes.length because SharePoint was so kind as to leave a nice little XML comment in this DIV:

 <!-- l version="1.0" encoding="utf-8 -->  

Further more, the childNodes length count is not always consistent cross-browser

So, by using the knowledge gained from the blog above and his example as a starting point this is what i came up with...

 var kids;  
 var realKids;  
 var parent;  
 var i = 0;  
 function hideEmptySearchDiv() {  
   realKids = 0;  
   parent = document.getElementById("SRCHREF");  
   kids = parent.childNodes.length;  
   while (i < kids) {  
     if (parent.childNodes[i].nodeType != 3 && parent.childNodes[i].nodeType != 8) {  
       realKids++;  
     }  
     i++;  
   }  
   if (realKids == 0) {  
     parent.style.display = 'none';  
   }  
 }  
 _spBodyOnLoadFunctionNames.push('hideEmptySearchDiv');  

I found that the nodeType of the comment was 8 so I excluded that, then applied the same "if none found hide the div" logic as I used in my jQuery example above.

Enjoy! I hope this helps some one.

Add Search Refinement Item Count

A quick and impressive enhancement to the SharePoint Search Refinement Panel is to allow it to show the item count next to each of the refiners.
You can follow this TechNet article on how to achieve this solution.
This is what you will end up with:

SharePoint 2010 Custom Search Refiner for Contentclass

My client pointed out Yaroslav Pentsarskyy's post on Search Refiners last week and asked me to look into it.
So I implemented his solution and although it worked well, my client and I wanted more granularity for this search refiner, so I got to thinking that one thing that would work well would be the ContentClass property that holds such values as STS_Site and STS_ListItem_Announcement etc.


So I dusted off my XML Editor, cracked open the FilterCategories from the Refinement Panel (don't forget to un-check use default configuration, and went to work and here is what I ended up with:

<Category
   Title="Content Class"
   Description="Filter by contentclass"
   Type="Microsoft.Office.Server.Search.WebControls.ManagedPropertyFilterGenerator"
   MetadataThreshold="0"
   NumberOfFiltersToDisplay="2"
   MaxNumberOfFilters="0"
   SortBy="Custom"
   ShowMoreLink="True"
   MappedProperty="contentclass"
   MoreLinkText="show more"
   LessLinkText="show fewer" >
   <CustomFilters MappingType="ValueMapping"
     DataType="String"
     ValueReference="Absolute"
     ShowAllInMore="False">
     <CustomFilter CustomValue="Web Pages">
       <OriginalValue>STS_ListItem_WebPageLibrary</OriginalValue>
     </CustomFilter>
     <CustomFilter CustomValue="Announcements">
       <OriginalValue>STS_ListItem_Announcements</OriginalValue>
     </CustomFilter>
     <CustomFilter CustomValue="Contacts">
       <OriginalValue>STS_ListItem_Contacts</OriginalValue>
     </CustomFilter>
     <CustomFilter CustomValue="Disucssions">
       <OriginalValue>STS_ListItem_DiscussionBoard</OriginalValue>
     </CustomFilter>
     <CustomFilter CustomValue="Documents">
       <OriginalValue>STS_ListItem_DocumentLibrary</OriginalValue>
     </CustomFilter>
     <CustomFilter CustomValue="Events">
       <OriginalValue>STS_ListItem_Events</OriginalValue>
     </CustomFilter>
     <CustomFilter CustomValue="Gantt Tasks">
       <OriginalValue>STS_ListItem_GanttTasks</OriginalValue>
     </CustomFilter>
     <CustomFilter CustomValue="List Items">
       <OriginalValue>STS_ListItem_GenericList</OriginalValue>
     </CustomFilter>
     <CustomFilter CustomValue="Links">
       <OriginalValue>STS_ListItem_Links</OriginalValue>
     </CustomFilter>
     <CustomFilter CustomValue="Pictures">
       <OriginalValue>STS_ListItem_PictureLibrary</OriginalValue>
     </CustomFilter>
     <CustomFilter CustomValue="Surveys">
       <OriginalValue>STS_ListItem_Survey</OriginalValue>
     </CustomFilter>
     <CustomFilter CustomValue="Tasks">
       <OriginalValue>STS_ListItem_Tasks</OriginalValue>
     </CustomFilter>
     <CustomFilter CustomValue="XML Forms">
       <OriginalValue>STS_ListItem_XMLForm</OriginalValue>
     </CustomFilter>
     <CustomFilter CustomValue="Sites">
       <OriginalValue>STS_Web</OriginalValue>
     </CustomFilter>
   </CustomFilters>
 </Category>

Note: if you are concerned about Multilingualism then know that by telling the Refinement Panel Web Part to not use the default configuration you are hard-wiring a bunch of words that are used here (like 'show more' and 'show less') so keep that in mind.


Thanks again to Yaroslav Pentsarskyy for the mention on his new post about my resolution after I sent it to him.