Tuesday, January 21, 2014

How to get the Query String value in SharePoint 2013 Search Results page

Hi All,

I was working to customize the search results web part by customizing the Search Result Display Item template and the Item Hover Panel as well.
If you want to read more about how to customize the search display templates read below blog post:
http://moustafa-arafa.blogspot.com/2014/01/customize-sharepoint-2013-search.html

I was trying to get a value of the query string that SharePoint 2013 passes once you hit enter in the Search Box, and since this control doesn't have an ID, I decided to pull the value from the query string that has a key "K".

After i developed this scenario, I found that SharePoint if you ran another search keyword for the second time, It would append the newer keyword with anchor (#) and will keep the old search keyword in the query string with key "K"

For example, When you run the search for the first time with keyword "copyright":

http://myPortal2013/sites/sp2013/search/pages/results.aspx?k=copyright

If you changed the search keyword to "digital", here is the new url would be:

http://myPortal2013/sites/sp2013/search/pages/results.aspx?k=copyright#digital

In my case, i want to get the "digital" and not "copyright" keyword so i want to parse the Url and get the latest search keyword. Here is the code to accomplish this:


This code i wrote it in the outer div element of the body of your display template html file.

Note: You can use this variable "sParam" as you like in the Display Template html file.

Hope this helps.

-- ME

Customize SharePoint 2013 Search Display Templates

Hi Folks,

In this post i will show how to customize SharePoint 2013 Display Templates and specifically the Search Templates.

In SharePoint 2013, you can customize the search results web part by editing the configuration of the web part. but if you want to customize the rendered output/layout in this case you need to use SharePoint Designer 2013 or any HTML editor to customize the search result item or the hover panel.

How to customize the search result item in Search Results web part:

1) From Site Settings page, Click on Master Pages and Page Layouts.
2) Click on Display Templates, This folder contains all SharePoint 2013 Display Templates.
3) You will find wide range of folders under Display Templates, Since we need to customize the search display template, click on Search Folder.
4) You need to find 2 items in this list, here are these files we need to download a copy of them:
     Item_Default.html
     Item_Default_HoverPanel.html
5) Select these 2 files and download a copy of them. DO NOT SELECT THE .JS files with the same name. We do not need them, they will be created for us!




6) Once you select both files, click on any little arrow beside the file title and click on Download a copy.
7) Copy these file and rename them so this will be your customized template to be associated with the search results web parts.

For example: let us call them: Item_Default_Custom.html , Item_Default_HoverPanel_Custom.html

7) Upload both files to the list, you will notice a .js file is created for each of the files.
8) Now, we have our own custom template that we can customize in SharePoint.
9) Open SharePoint Designer 2013, From All Files --> _ catalogs  --> masterpage --> Display Templates --> Search
10) You will find both files we just uploaded, here is it is up to you. If you want to customize the search result item, then we will open Item_Default_Custom.html.
If we want to customize the Hover panel when you hover on a search result item, then we have to open Item_Default_HoverPanel_Custom.html.

Tip: In all cases, you should not modify the .js version of the html files. The Javascript file is a SharePoint file that is being updated/generated every time you save any change in the html files.

The changes in the search html template, it requires standard web development experience for editing html and writing javascript code.

Below is a very useful blog, It shows some techniques in how to customize the html files and embed some javascript code If you are not familiar with SharePoint/Web development.

http://sharepointfieldnotes.blogspot.com/2012/11/customizing-sharepoint-2013-search.html


How to configure Search Results Web Part to load your custom Display Template:

Once you customize the search display template, One last step is to configure the Search Results web part to load your template, Below is how to do it:

Your custom Search Display Result item will be loaded in the Display Templates in the web part configuration and once you select it, any change you do in the html will be reflected once you refresh the page in SharePoint 2013.



Hope this helps.



Friday, January 10, 2014

Error when creating search center site in SharePoint 2013

Hi folks,

I was trying to create an enterprise search center site in my SharePoint 2013 VM. When i was clicked on Create button i was getting the well known yellow error page in SharePoint.




I straight up checked the logs and i found the following error message:

Exception in EnsureFeatureActivatedAtWeb: Microsoft.SharePoint.SPException: The SharePoint Publishing Infrastructure feature must be activated at the site collection level before the publishing feature can be activated.

So,  I went to the site settings  --> site collection features --> then i activated the SharePoint Publishing infrastructure feature.

Then, I went back to create a subsite --> selected enterprise search center. I entered all required information and when i clicked on create. the site is created with no errors!