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.
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.
No comments:
Post a Comment