Target:
Display template file structure:
Title Tag
<title> Custom Display Template </title>
|
Custom Document Properties Tags
<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>
<mso:ManagedPropertyMapping msdt:dt="string></mso:ManagedPropertyMapping>
<mso:MasterPageDescription msdt:dt="string"></mso:MasterPageDescription>
<mso:ContentTypeIdmsdt:dt="string">0x0101002039C03B61C64EC4A04F5361F385106603</mso:ContentTypeId>
<mso:TargetControlType msdt:dt="string">;#SearchResults;#Content Web Parts;#</mso:TargetControlType>
<mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
<mso:CrawlerXSLFile msdt:dt="string"></mso:CrawlerXSLFile>
<mso:HtmlDesignPreviewUrl msdt:dt="string"></mso:HtmlDesignPreviewUrl>
<mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>
<mso:HtmlDesignStatusAndPreview msdt:dt="string">/_catalogs/masterpage/Display Templates/Content Web Parts/ /SearchItem.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>
<mso:FeatureId msdt:dt="string">f67e8b18-be51-46f8-b1c2-867505c9df70</mso:FeatureId>
<mso:ContentType msdt:dt="string">Item Display Template</mso:ContentType>
<mso:UIVersion msdt:dt="string">15</mso:UIVersion>
</mso:CustomDocumentProperties>
</xml><![endif]-->
|
Property
|
Description
|
TemplateHidden
|
Boolean value that indicates whether to hide the display template from the list of available templates in the Web Part. This value can be changed in the display template file properties.
|
ManagedProperty Mapping
|
Maps fields exposed by search result items into properties available for JavaScript. Used only in item templates.
|
MasterPageDescription
|
Provides a friendly description of the display template. This is shown to users in the SharePoint editing environment. This value can be changed in the display template file properties.
|
ContentTypeId
|
The ID of the content type associated with the display template.
|
TargetControlType
|
Indicates the context in which the display template is used. This value can be changed in the display template file properties.
|
HtmlDesignAssociated
|
Boolean value that indicates whether a display template HTML file has a .js file associated with it.
|
HtmlDesignConversionSucceeded
|
Indicates whether the conversion process was successful. This value is automatically added to the file by SharePoint, and is used only in custom display templates.
|
HtmlDesignStatusAndPreview
|
Body Tag (Script Block)
Inside the <body> tag, you can see the following <script> tag by default,
You can add additional references by using some of the following lines:
Script located in the same site:
Script located on an external site:
$includeLanguageScript( this.url, "~sitecollection/_catalogs/masterpage/Display
Templates/Language Files/{Locale}/CustomStrings.js");
|
Script located in the same site:
$includeScript(this.url,"~site/Webparts/CustomScript.js");
|
$includeScript(this.url,"http://www.contoso.com/CustomScript.js");
|
$includeCSS(this.url,"~site/Webparts/CustomCSS.css");
|
$includeLanguageScript(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Language Files/{Locale}/Resources.js");
|
Body Tag (Div Block)
Following the <script> tag is a <div> tag with an ID. By default, the ID for this <div> tag matches the name of the HTML file. Any HTML or javascript code that you want the display template to provide must be included inside this <div> tag.
<div id="Item_Picture3Lines">
<!--#_
Write Any JavaScript code here
var linkURL = $getItemValue(ctx, "Link URL"); _#-->
Write HTML here
<a href="_#= linkURL =#_"> _#= linkURL =#_ </a>
</div>
|
Relationship between Display template and search WebPart
There are two primary types of display templates:
a. Control templates determine the overall structure of how the results are presented. Includes lists, lists with paging, and slide shows.
b. Item templates determine how each result in the set is displayed. Includes images, text, video, and other items.
b. Item templates determine how each result in the set is displayed. Includes images, text, video, and other items.
Post a Comment