Part 1 of Customizing the Search results UI in SharePoint 2013 Preview
Open the Search results page in Edit mode and get to edit the Refinement web part:
Click the button 'Choose Refiners...' to add FileExtension to the Selected refiners:
Open the Design Manager via Settings:
And look for the display template title 'Refinement Item':
These display templates come in pairs: one html file and one js file, both sharing the same title and name. You can/should only add or modify the html files; the js files are generated by SharePoint. The status of this process is shown in the column 'Status'. See screenshot for example: "Conversion successful".
Open the Filter_Default.html file in Sharepoint Designer 2013 (or make a copy):
'/_catalogs/masterpage/Display%20Templates/Filters/Filter_Default.html'
Add after row 259 the following code (marked in yellow):
This code will look for an icon file name in the image folder: '/_layouts/15/images/ic[ext].png'
Save the display template file. If you've made a copy of the original, be sure to change the title node in row 3 before saving. Go back to the Refinement web part and choose the modified display template for the FileExtension refiner.
Based on the displayed results, not all of the expected icon files are yet available, but with the help of the onError event in the IMG element there is an alternative icon found. You could add the missing icon files yourself on your own server(s), or use an image library in case of SharePoint Online.
There seems to be a native function to get the icon url: Srch.U.getIconUrlByFileExtension(). I will give it a try. Here are my findings.
To be continued.
Part 2 of Customizing the Search results UI in SharePoint 2013 Preview:
Refinement web part: show associated icons in front of the Result type refiner filters
Part 2 of Customizing the Search results UI in SharePoint 2013 Preview:
Refinement web part: show associated icons in front of the Result type refiner filters
Sources:
Hans,
ReplyDeleteVery interesting post. Did you discover this process by trial and error? I don't see any documentation covering the display templates for refiners.
Thanks,
Tom
Hi Tom,
DeleteGot some basic knowledge from these sources:
http://blogs.technet.com/b/speschka/archive/2012/07/23/using-query-rules-result-types-and-display-templates-for-a-custom-search-sales-report-in-sharepoint-2013.aspx
http://www.microsoft.com/resources/msdn/en-us/office/media/courseviewer/CourseViewerR5.htm?CourseXmlFile=http://www.microsoft.com/resources/msdn/en-us/office/media/courseviewer/SharePoint2013TrainingITPro.xml&Operation=PlayVid&uuid=40eb3199-13a2-44f0-b689-081b907322e8&Module=6
http://online.appdev.com/edge/blogs/doug_ware/archive/2012/07/18/understanding-templated-client-rendering-in-sharepoint-2013-beta.aspx
I've analyzed the code in the display templates, and -yes- by trial and error got it to work.