Custom Display template for Content Search webpart

Hi,
I am trying to customize the out of the box "slideshow" display template for content search webpart which renders Images.
By default, the slideshow display template has a fixed the image size which is very small. Is it possible to increase the dimensions of the container or control template to show a much larger image size?
Can anyone please help on how to do this?
Thanks,

Hi,
According to your description, my understanding is that you want to increase the dimensions of the container or control template to show a much larger image size in the Content Search web part.
I recommend to create a custom Display Template (control and Item display templates) and use JQuery Slider plugin to achieve this goal.
More detailed information are provided in the link below:
http://blogs.technet.com/b/sharepoint_quick_reads/archive/2013/08/02/sharepoint-2013-customize-display-template-for-content-by-search-web-part-cswp-part-2.aspx
Best regards.
Thanks
Victoria Xia
TechNet Community Support

Similar Messages

Custom display template for search

HI
I have Created a custom Item Template as shown below.I want to map this with my custom result type but it is not working
<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
<title>News Item</title>

</head>
<body>
<div id="StoraEnso_Item_Default">

<div id="_#= $htmlEncode(itemId) =#_" name="SEItem" data-displaytemplate="StoraEnsoDefaultItem" class="ms-srch-item" onmouseover="_#= ctx.currentItem_ShowHoverPanelCallback =#_" onmouseout="_#= ctx.currentItem_HideHoverPanelCallback =#_">
<h2 class="heading"><a href="_#= ctx.CurrentItem.Path =#_">_#= ctx.CurrentItem.Title =#_</a></h2>
<div id="_#= $htmlEncode(hoverId) =#_" class="ms-srch-hover-outerContainer"></div>
<p>_#= Srch.U.processHHXML(ctx.CurrentItem.HitHighlightedSummary) =#_</p>
<div class="footer">
<dl class="desc">
<dt>SiteTitle</dt> _#= ctx.CurrentItem.SEDWMPNewsPublishDate =#_
<dd><a class="status" href="#">_#= ctx.CurrentItem.SiteTitle =#_</a></dd>
<dt>Author</dt>
<dd><a class="status" href="#">_#= ctx.CurrentItem.DisplayAuthor =#_</a></dd>
</dl>
</div>
</div>

</div>
</body>
</html>
If you see in "managedPropertyMapping" I have added a new property "SEDWMPNewsPublishDate" and when I use in my html I am not getting the value.
I checked with fiddler and I found that This property is not getting mapped. Json object does return this property.However this property has value. I have tested with content search webpart nad my code also.it returns value.
Can anyone let me know is there any issue in the above rendering template code
On update to this, I was using resultscript webpart on the page to display data and I have created custom result type to modify the display.What I found that when I add the custom properties which I need, on result script webpart using as
follows
scriptWebPart.SelectedPropertiesJson = "[\"SEDWMPNewsPublishDate\",\"SEDWMPIntroduction\"]"
and save the changes then I start getting the value of my custom properties.
I don't know how the result type works in accordance with display templates and when does it gets applied on the search data.If anyone is aware please let me know.
If I can't use the display templates with custom properties then what is the use of ManagedPropertyMapping on display templates.Can anyone please make me understand?

You need to update the js file also.You can upload the js file also.In js file you have a column "ManagedPropertyMapping" this denotes which managed property should come for item in search.
For uploading the js file you can use as follows under module
<File Path="ModSearchDisplayTemplates\x.js" Url="x.js" Type="GhostableInLibrary">
<Property Name="Title" Value="xjs" />
<Property Name="MasterPageDescription" Value="$Resources:Microsoft.Office.Server.Search,DisplayTemplateDescription_SearchDefaultItem" />
<Property Name="ContentType" Value="$Resources:TemplateContentType_Code_Name" />
<Property Name="DisplayTemplateLevel" Value="Item" />
<Property Name="TemplateHidden" Value="0" />
<Property Name="TargetControlType" Value=";#SearchResults;#" />
<Property Name="HtmlDesignLockedFile" Value="TRUE" />
<Property Name="ManagedPropertyMapping" Value="'Title':'Title','Path':'Path','Description':'Description','EditorOWSUSER':'EditorOWSUSER','LastModifiedTime':'LastModifiedTime','CollapsingStatus':'CollapsingStatus','DocId':'DocId','FileExtension':'FileExtension','ParentLink':'ParentLink','FileType':'FileType','IsContainer':'IsContainer','SEDWMPNewsPublishDate00':'SEDWMPNewsPublishDate00','SEDWMPIntroduction':'SEDWMPIntroduction','SEDWMPNewsIsSticky':'SEDWMPNewsIsSticky','SEDWMPNewsPostThreadId':'SEDWMPNewsPostThreadId'"/>
</File>

Custom Fields for Content Search WebPart

I created a custom item display template to control the look of the data. I copied the template "Picture on left, 3 lines on right" and just rearranged the div and added my own styles.
I created a custom List for Company Information. The list consists these fields;
Title
Hyperlink
Main Paragraph
Image
Sub Paragraph
I can not map Main Paragraph and Sub Paragraph as they do not display in the drop down for mapping fields. I have crawled the database.
Please let me know if you have any ideas for getting those fields to show in the mapping.
Thank you

Hi Phillip6653,
For solving your issue, you can create Main Paragraph site column and Sub Paragraph site column. If you create a site column (not a list column), populate it with data, and run a full crawl SharePoint
will create a crawled property and a corresponding managed property.
Reference:
Automatically created managed properties in SharePoint Server 2013
Hope this helps!
Best Regards,
Eric
Eric Tao
TechNet Community Support

How to create a Display template for people search results

Hi,
I've just installed Sharepoint 2013 and started to play around with it. Seems to be many improvements - among these are the ability to create Display templates.
On my publishing page there is a default "employee lookup" app which returns prefferred name, title and department as default when I try to search.
I would love to return mobile number aswell so I have tried to do the following:
I made a copy of Display _Catalogs/Masterpages/Display Templates/Search/Item_Person.html
Edited that one with the following:
1. Added 'MobilePhone':'MobilePhone' to the "Managed Property mapping" in the top of the html document:
<mso:ManagedPropertyMapping msdt:dt="string">'AboutMe':'AboutMe','AccountName':'AccountName','BaseOfficeLocation':'BaseOfficeLocation','Department':'Department','HitHighlightedProperties':'HitHighlightedProperties','Interests':'Interests','JobTitle':'JobTitle','LastModifiedTime':'LastModifiedTime','Memberships':'Memberships','MobilePhone':'MobilePhone','PastProjects':'PastProjects','Path':'Path','PictureURL':'PictureURL','PreferredName':'PreferredName','Responsibilities':'Responsibilities','Schools':'Schools','ServiceApplicationID':'ServiceApplicationID','SipAddress':'SipAddress','Skills':'Skills','UserProfile_GUID':'UserProfile_GUID','WorkEmail':'WorkEmail','WorkId':'WorkId','YomiDisplayName':'YomiDisplayName'</mso:ManagedPropertyMapping>
2. Set a var in the <body> with:
var has_MobilePhone = !$isEmptyString(ctx.CurrentItem.MobilePhone);
Created the following based on "DepartmentField":
if(has_MobilePhone == true) {
_#-->
<div id="MobilephoneField">

<div id="MobilePhoneValue" class="ms-srch-ellipsis" title="_#= encodedMobilePhone =#_"> _#= displayMobilePhone =#_ </div>
</div>

<div id="CPhoneField">

<div id="CPhoneValue" class="ms-srch-ellipsis" title="_#= encodedCPhone =#_"> Mobile: _#= displayCPhone =#_ </div>
</div>

If I delete the test lines in the display code (if(has_cphone == true) it show "Mobile:" but without any mobile number.
Thanks for your help if any idea :)
Best regards
Gabriel

Choose display template based on result type - Content search webpart

Hi
Is it possible to choose display template based on result type in content search webpart same like search results web part? If not available can it be achieved programmatically?
The content search web part is queried against document content type. Based on the document type, the document has to be seen in the hover template.
Please advise.

Hi,
From your description, my understanding is that you want to choose display template based on result type as search result Webpart in Content Search Webpart.
You could customize your display template for Content Search Web Part, please refer to this article:
http://www.benprins.net/2014/05/21/sharepoint-2013-custom-display-template-for-content-by-search-web-part/
Best Regards,
Vincent Han
TechNet Community Support
Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact
[email protected]

Content Search Webpart is not displaying certain fields from my results

I am rolling up some list data from a subsite to its parent site. The list includes the Title and Health fields. The Health field is an image column. When typing in "Health" into the second line to display for the webpart, it doesnt show anything
when I save and refresh. The Title field works, however. Another field "Created" also works but I don't need to display that column in the webpart.
Any ideas how I can fix this?

Hi,
Please change the mapping of managed properties for the fields in
the Item Display Template.
Displaying the right data in the Content Search web part in SharePoint 2013
http://www.sharepointnutsandbolts.com/2013/03/displaying-right-data-in-content-search.htmlWe
can also customize a Display template for content search web part to achieve
special requirement.
http://www.myphotoadventures.nl/2014/05/21/sharepoint-2013-custom-display-template-for-content-by-search-web-part/
Best Regards
Dennis Guo
TechNet Community Support

KQL for getting documents in Content Search Webpart

Hi Guys,
How do I get the documents grouped by document sets and sites for the current user using KQL in content search web part in SharePoint 2013?
Thanks in advance.
nasayoo

Hi nasayoo,
In content search web part, there is OOB option to group results based on one or more managed properties. You could go to refiners tab when configure query of web part, then click Show more, under groups results, set it to group result per your requirement.
http://technet.microsoft.com/en-us/library/jj679900(v=office.15).aspx#BKMK_ConfigureWP
In addition, here is an article which provides methods using JavaScript to define a custom group display template for search web part:
http://www.eliostruyf.com/how-to-define-a-custom-group-display-template-for-the-search-results-webpart-via-javascript/
Regards,
Please remember to mark the replies as answers if they help and unmark them if they provide no help. If you have feedback for TechNet Subscriber Support, contact
[email protected] .
Rebecca Tu
TechNet Community Support

Access query strings in a search results page with custom display template

am trying to create a custom display template in my search results page , so i went to download the itemdefault html file and renamed it and saved as different file.and am started to updating.
the issue i am facing here is : in my search results page there are 2 query strings, which are passed by anotehr .net appln[ another asp.net appln will be sending the query string to my sp 2013 search results page]
but, how can i read these 2 query strings using jslink and new token _#- ?

the below is my cstomhtml file
am unable to get the values :
<a href="http://srvrname:2013/sites/CMP/_layouts/15/BIFAddInputRef/bifpage1.aspx?bif1=_#= $htmlEncode(QStringResults) =#_"> Add Input Reference </a>
<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
<title>Item BIF</title>

</head>
<body>
<script>
$includeLanguageScript(this.url,"~sitecollection/_catalogs/masterpage/Display Templates/Search/BIFJScript.js");
</script>
<div id="Item_BIF2">


<div id="_#= $htmlEncode(QStringResults) =#_" name="bifItemqstring"
data-displaytemplate="DefaultItem" class="ms-srch-item"
>
<h5 style="color:ghostwhite;background-color:black">
<a href="_#= ctx.CurrentItem.Path =#_"> _#= ctx.CurrentItem.Path =#_</a>
</h5>
</div>
<div id="_#= $htmlEncode(itemId) =#_" name="bifItem"
data-displaytemplate="DefaultItem" class="ms-srch-item"
onmouseover="_#= ctx.currentItem_ShowHoverPanelCallback =#_"
onmouseout="_#= ctx.currentItem_HideHoverPanelCallback =#_">
<h1 style="color:ghostwhite;background-color:black">
<a href="_#= ctx.CurrentItem.Path =#_"> _#= ctx.CurrentItem.Path =#_</a>
</h1>
<h4 style="color:ghostwhite;background-color:black">
<a href="_#= ctx.CurrentItem.Description =#_"> _#= ctx.CurrentItem.Description =#_</a>
</h4>
<h4 style="color:ghostwhite;background-color:black">
<a href="_#= ctx.CurrentItem.LastModifiedTime =#_"> _#= ctx.CurrentItem.LastModifiedTime =#_</a>
</h4>
<h3 style="color:floralwhite;background-color:green">
var mybifurl1= document.getElementById($htmlEncode(QStringResults));
<a href="http://srvrname:2013/sites/CMP/_layouts/15/BIFAddInputRef/bifpage1.aspx?bif1=_#= $htmlEncode(QStringResults) =#_"> Add Input Reference </a>
</h3>
</div>
<div>
</div>
<div id="_#= $htmlEncode(hoverId) =#_" class="ms-srch-hover-outerContainer"></div>

</div>
</body>
</html>
when i run the page , i a getting the query string value as undefined! though the custom javascript is getting called.

i am able to get the results by implementing the below:
<h4 style="background-color:black">
<a onclick="javascript:mycalltojs(_#=
ctx.CurrentItem.Path=#_) > click here </a>
</h4>
hope this helps anyone

Content search webpart query is not rendering result as per the expectation !!

Hello,
I have 5 Content search web part on same page with different display templates.
1) Search Aggregated Result - This display search results for announcements,discussion and wiki as per the current user.
2) My websites - Thsi displays site links as per the current user.
3) My Tasks - This display task items as per the current user
4) Daily calendar - This display the results as per the date selection in calendar control.
For Daily calendar - I have specified calendar control in custom display template to filter search results based on date selection which is working as below:
I have got the reference from following link that changing the query dynamically to filter search result data -
http://sharepointificate.blogspot.in/2014/08/content-search-webpart-dynamic-filtering.html
ctx.OnPostRender = [];
ctx.OnPostRender.push(ctx,function(){
$('<div id="trCalendar" class=""></div>').insertBefore('#idCalender')
$(document).ready(function () {
$("#trCalendar").datepicker( {
onSelect: function(date) {
var groups = Srch.ScriptApplicationManager.get_current().queryGroups;
$.each(groups, function () {
// Look for query groups associated with a CSWP
if (this.displays != null && this.displays.length > 0) {
if (this.displays[0] instanceof Srch.Result) {
// Update and execute query
var newQuery = 'ContentTypeId:0x0102*'+ ' ' +'EndDate'+ '>=' + date;
this.dataProvider.set_queryTemplate(newQuery);
this.dataProvider.issueQuery();
selectWeek: true,
However, this date query is being applied for every search result web part mentioned in page.
How can I make it work only for the Daily Calendar web part ?
Your answer will be much appreciated.
Thanks and Regards,
Dipti Chhatrapati

Dipti,
How about replacing you line as below (with content class)
var newQuery = 'ContentTypeId:0x0102*'+ ' ' +'EndDate'+ '>=' + date;
with
var newQuery = 'contentclass:STS_ListItem_Events'+ ' ' +'EndDate'+ '>=' + date;
Please 'propose as answer' if it helped you, also 'vote helpful' if you like this reply.

Programaticlly change reference of display template for a CSWP

I have created a custom display template for one of my CSWP.
Now, How can I change the CSWP property - Item and Control Template, programmatically.
- GEM

Hi,
According to your post, my understanding is that you want to change the content search web part property.
To change the web part property, we can override the GetToolParts method and return a CustomPropertyToolPart object along with the base toolparts.
there is an article about this topic, you can refer to it.
http://www.lestersconyers.com/extending-search-web-parts/
More reference:
http://blogs.msdn.com/b/davidrei/archive/2012/12/27/sharepoint-2013-set-content-search-web-part-querytext-attribute-programmatically.aspx
Thanks & Regards,
Jason
Jason Guo
TechNet Community Support

Building Query for SharePoint content Search Webpart

Hi,
There is a content search webpart being used for displaying the Related Items from a Page library. Whenever a new item/Page is added into the Page library, there is a column that accepts multiple values.
Now my requirement is, when a new page is added (which would be a part of custom page layout which has Search webpart) with a Column named say for Ex: 'Status' values as New, Old, Newer and when this page is opened, I want the search web part to display
all other items/pages whose 'Status' column values would have one among these.
As I do not have any idea on building the query with this webpart, any help/suggestions would be greatly appreciated.

Dipti,
How about replacing you line as below (with content class)
var newQuery = 'ContentTypeId:0x0102*'+ ' ' +'EndDate'+ '>=' + date;
with
var newQuery = 'contentclass:STS_ListItem_Events'+ ' ' +'EndDate'+ '>=' + date;
Please 'propose as answer' if it helped you, also 'vote helpful' if you like this reply.

Content Search WebPart Template Group by

Hi,
Iam trying with no luck to créate a display template for the content search webpart with grouping by the publishing date.
I want to show news grouped by the month of the publication, but iam not being able to group the ítems by any managed propertie.
Can this be done?, if you have an example i will really appreciate it.
Thanks!!!

The only form of grouping supported by the CSWP is collapsing but I guess it's not what you're after. I'm afraid you would have to implement it yourself in the Display Template.
w: http://blog.mastykarz.nl | t:
@waldekm | c: http://mavention.codeplex.com | c:
http://mavention.nl

How to display Column of a particular list to page using Content Search Webpart?

Hi,
I am having two columns 'Column1 & Column2' in a list names Demo. I need to display the items of both the columns into a page with the help of Content Search Webpart. I am using SharePoint 2013 Platform.
Expecting some useful comments on the same...!!
Warm Regards,
Tony Joy.

Hi,
If you just want to display two columns of a list, Content Query Web Part will be more appropriate:
http://community.bamboosolutions.com/blogs/sharepoint-2013/archive/2013/05/10/how-to-use-the-content-query-web-part-to-rollup-data-in-sharepoint-2013.aspx
To display multiple columns, here is a similar thread for your reference:
http://social.technet.microsoft.com/Forums/sharepoint/en-US/1484df2b-0fb9-4b58-b833-a75019db88c7/content-query-display-multiple-columns
Best regards
Patrick Liang
TechNet Community Support

Custom display template - how to add anothe display template for refimement item?

Custom display template - how to add anothe display template for refimement item?
I add a new filter_default_custom.html file and want to create new refinement item display template to point to it
keren tsur

Not 100% if I understood the question, but if you uploaded your template to the Master Gallery and the corresponding .js file has been created, you can open the refinement config panel and specify the result type you want to map to your custom template.
http://www.eliostruyf.com/part-1-create-first-search-refiner-control-template/
Kind Regards
Bjoern
http://www.sharepointviking.com
Twitter: Follow @bjoern_rapp

Custom Column Name in Webpart file and Itemstyle for Content Query WebPart

I was trying to incorporate a custom column in the content Query WebPart.
The name of the column displayed in the list is "Risk Score"; a calculated column.
I right clicked on the field in the list settings and copy hte short cut which is pasted below:
http://<mainURL>/_layouts/FldEdit.aspx?List=%7BFE4CC761%2DE9B8%2D487C%2D8B92%2D1E42539144C4%7D&Field=Risk%5Fx0020%5FScore
Could you please let me know what can i type in the WebPart file exported and then to be imported in the section:
<property name="CommonViewFields" type="string"></property>
Also, please let me know what should i enter in the itemstyle.xsl in the section
<td style="width:30%; font-size:10px;font-family:Verdana;color:#007EB6; border-style:solid; border-width:medium;border-color:#E1E1E1;">
<xsl:value-of select="@Risk%5Fx0020%5FScore" />
</td>
Tnx

Ok.
Use like this
<property name="CommonViewFields" type="string">RiskStrore,Lookup</property>
and include like this in the itemstyle
<td >Risk store
<xsl:value-of select="@RiskStore" />
</td>

Custom Display template for Content Search webpart

Similar Messages

Maybe you are looking for