Customizng SharePoint 2013 Display Template
hi i am trying to customize Item_Picture3Lines.html and result not appear Note i am using content search web part and change query to specific content type it returns result but my display template does not render data i am trying to add Line 4 but no
result appear My Code Sample :-
<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
<title>Display Template</title>
<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>
<mso:ManagedPropertyMapping msdt:dt="string">
'Picture URL'{Picture URL}:'PublishingImage;PictureURL;PictureThumbnailURL',
'Link URL'{Link URL}:'Path',
'Line 1'{Line 1}:'Title',
'Line 2'{Line 2}:'Description',
'Line 3'{Line 3}:'',
'Line 4'{Line 4}:'',
'SecondaryFileExtension',
'ContentTypeId'
</mso:ManagedPropertyMapping>
<mso:MasterPageDescription msdt:dt="string">This Item Display Template will show a 100x100 picture of the item on the left. The title and the default item description will display to the right of the picture with an additional line that is available for a custom managed property.</mso:MasterPageDescription>
<mso:ContentTypeId msdt:dt="string">0x0101002039C03B61C64EC4A04F5361F385106603</mso:ContentTypeId>
<mso:TargetControlType msdt:dt="string">;#Content Web Parts;#</mso:TargetControlType>
<mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
<mso:HtmlDesignStatusAndPreview msdt:dt="string">http://c1-dev02/sites/ContentSearchWebPart/_catalogs/masterpage/Display Templates/Content Web Parts/Item_Picture3Lines - Copy.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>
<mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>
</mso:CustomDocumentProperties>
</xml><![endif]-->
</head>
<body>
<!--
Warning: Do not try to add HTML to this section. Only the contents of the first <div>
inside the <body> tag will be used while executing Display Template code. Any HTML that
you add to this section will NOT become part of your Display Template.
-->
<script>
$includeLanguageScript(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Language Files/{Locale}/CustomStrings.js");
</script>
<!--
Use the div below to author your Display Template. Here are some things to keep in mind:
* Surround any JavaScript logic as shown below using a "pound underscore" (#_ ... _#) token
inside a comment.
* Use the values assigned to your variables using an "underscore pound equals"
(_#= ... =#_) token.
-->
<div id="Item_Picture3Lines - Copy">
<!--#_
var encodedId = $htmlEncode(ctx.ClientControl.get_nextUniqueId() + "_picture3Lines_");
var linkURL = $getItemValue(ctx, "Link URL");
linkURL.overrideValueRenderer($urlHtmlEncode);
var line1 = $getItemValue(ctx, "Line 1");
var line2 = $getItemValue(ctx, "Line 2");
var line3 = $getItemValue(ctx, "Line 3");
var line4 = $getItemValue(ctx, "Line 4");
var pictureURL = $getItemValue(ctx, "Picture URL");
var pictureId = encodedId + "picture";
var pictureMarkup = Srch.ContentBySearch.getPictureMarkup(pictureURL, 100, 100, ctx.CurrentItem, "cbs-picture3LinesImg", line1, pictureId);
line1.overrideValueRenderer($contentLineText);
line2.overrideValueRenderer($contentLineText);
line3.overrideValueRenderer($contentLineText);
var containerId = encodedId + "container";
var pictureLinkId = encodedId + "pictureLink";
var pictureContainerId = encodedId + "pictureContainer";
var dataContainerId = encodedId + "dataContainer";
var line1LinkId = encodedId + "line1Link";
var line1Id = encodedId + "line1";
var line2Id = encodedId + "line2";
var line3Id = encodedId + "line3";
var line4Id = encodedId + "line4";
var dataDisplayTemplateTitle = "ItemPicture3Lines";
_#-->
<div class="cbs-picture3LinesContainer" id="_#= containerId =#_" data-displaytemplate="_#= $htmlEncode(dataDisplayTemplateTitle) =#_">
<div class="cbs-picture3LinesImageContainer" id="_#= pictureContainerId =#_">
<!--#_
if(!linkURL.isEmpty)
_#-->
<a class="cbs-pictureImgLink" href="_#= linkURL =#_" title="_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_" id="_#= pictureLinkId =#_"
>
<!--#_
_#-->
_#= pictureMarkup =#_
<!--#_
if(!linkURL.isEmpty)
_#-->
</a>
<!--#_
_#-->
</div>
<div class="cbs-picture3LinesDataContainer" id="_#= dataContainerId =#_">
<a class="cbs-picture3LinesLine1Link" href="_#= linkURL =#_" title="_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_" id="_#= line1LinkId =#_"
>
<h2 class="cbs-picture3LinesLine1 ms-accentText2 ms-noWrap" id="_#= line1Id =#_"> _#= line1 =#_</h2>
</a>
<!--#_
if(!line2.isEmpty)
_#-->
<div class="cbs-picture3LinesLine2 ms-noWrap" title="_#= $htmlEncode(line2.defaultValueRenderer(line2)) =#_" id="_#= line2Id =#_" > _#= line2 =#_</div>
<!--#_
if(!line3.isEmpty)
_#-->
<div class="cbs-pictureLine3 ms-textSmall ms-noWrap" id="_#= line3Id =#_" title="_#= $htmlEncode(line3.defaultValueRenderer(line3)) =#_">_#= line3 =#_</div>
<!--#_
if(!line4.isEmpty)
_#-->
<div class="cbs-pictureLine3 ms-textSmall ms-noWrap" id="_#= line4Id =#_" title="_#= $htmlEncode(line4.defaultValueRenderer(line4)) =#_">_#= line4 =#_</div>
<!--#_
_#-->
</div>
</div>
</div>
</body>
</html>
Was looking for something else and stumbled across this... I'm sure you've sorted this out by now, but the problem, i think is that you're not specifying a data source (list/site column) for the Line 4 data field...or line 3 for that matter... See lines
14 and 15 in your code sample. There should be a field reference between the ' '.
Similar Messages
-
Sharepoint 2013 - Display Disclaimer when a MySite is created
Hallo there,
i spent the whole day searching the web for something i thought i already found some time ago, but cannot remember where...
Maybe you guys can help...
We need to Display some Kind of disclaimer / Terms of usage when a user initially creates his mysite. Best solution would be to Display a Website with a "Yes" / "No" choice... Clicking "Yes" would continue to create the
users mysite - "No" would cancel the process.
is there any way to do this?
Thanks in Avance!
PhifeHi Phife,
When we first time to click "About me" menu to create MySite, it will pop up "Let's get social" dialog, I think you may have found this dialog some time ago.
If you want to popup other disclaimer dialog when you click "About me", I think you can try customizing it's event to judge if MySite hasn't been created then pop up the custom disclaimer dialog with Yes/No choices for creating mysite agreement, then perform
the proper action based on the Yes or No.
http://paulliebrand.com/2014/02/26/sharepoint-2013-get-the-most-out-of-sharepoint-dialog-explained/
Thanks,
Daniel Yang
Forum Support
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]
Daniel Yang
TechNet Community Support -
HI,
is there any way i can install thE sharepoint developer tools in my dev machine for woirking with SP 2013 AND VS 2012?
i am not getting the sharepoint project templates when i went to VS 2012.
so the link says that i need to connect to internet and install web platform installer 6.0.
but my machine cant connect to net .
if anyone has done the offline installation of sp 2013 project templates for VS 2012 , pls provde me the links / ways.
help is highly appreciated!check this blog
you need to install Microsoft Office Developer Tools for Visual Studio 2012 to get the project templete
http://blogs.msdn.com/b/timquin/archive/2013/01/22/setting-up-visual-studio-2012-for-sharepoint-2013-development-offline.aspx -
<meta content="text/html; charset=windows-1252" http-equiv="Content-Type" /><meta content="Microsoft Word 14 (filtered)" name="Generator" /><style></style>
Much like the title says the Spelling ICON is greyed out. When I go to the Discussion List and select the thread then view the list in “Flat” view, the Spelling ICON is not greyed out. However, this is a different aspx file. The first method
displays the thread via the Topics.aspx (the normal way) whereas the second displays the thread using the Flat.aspx.
Regardless, why is the Spelling ICON greyed out on the normal way you would reply to a discussion thread? By the way, I had to activate the Publishing Infrastructure on the Site Collection to get the Spelling ICON just to show up when I click on “reply”
from a Discussion thread.
Thanks to anyone who can help!Hi,
According to your post, my understanding is that when you went to the Discussion List and selected the thread then view the list in “Flat” view, the Spelling ICON was greyed out.
By design in SharePoint, when you view the list in “Flat” view, the ribbon would be as below:
Only when you add a reply and move the mouse to the content, the Spelling ICON will appear.
Best Regards,
Linda Li
Linda Li
TechNet Community Support -
Sharepoint 2013 - Search for link names on a single page
Hi
I am messing around with SP13 and trying to get my search result web part to only search for link names and display all results.
I have created the search source to point at the sub site. If I search for part of a link name it will list all links in one long row as a single result.
Example: One single page contains all links. Each link points to a .aspx page. The search source is pointing at this page and it can display results but only as a single result containing all links as one line of text.
Say I have 1000+ links of which 50 has names such as Link1-Item1-Basket1, Link1-Item1-Basket2 up to Link1-Item1-Basket50.
When I search for Link1-Item1 I would like my search results to display 50 results as 50 individual links.
Is this possible?Hi,
Yes, you can format the search results as you expected. But you have to create a custom display template to format your results such as extract the links from each results and display it as separate link.
Once display template created you have to map the display template to your search results web part.
Please refer to the following articles.
SharePoint 2013 Customize Display Template for Content By Search Web
Part (CSWP) Part-1
Introduction to SharePoint 2013 Display Templates
Display Template Overview
Please mark it answered, if your problem resolved. -
Customizing the Sharepoint 2013 inbuilt "SearchResult" webpart
Acutally am working on the requirement,where i need to display the search results using Sharepoint 2013 inbuilt "SearchResult" webpart and where the results can be filtered by placing refining control in other Refiniment webpart in the same page.
here come the question is "how i can access the displayed results in my "searchresults" webpart in my custom code.,where i have to access the path from the results on page and downloading the files based on path content.... please guys.your
suggestions will be very helpful for my task...Hi,
You can use the display templates to customize the results. Please refer to the following article how to create the display template
Introduction to SharePoint 2013 Display Templates
Understanding how item display templates and hit highlighting work in SharePoint
Server 2013
Please mark it answered, if your problem resolved. -
If I create a template on SharePoint 2013 Foundation, then create a site on SharePoint Enterprise (or Office/365) fully configured to support SharePoint 2013 workflows. When I access the site through SharePoint Designer 2013, and attempt to create a workflow
SharePoint 2013 Workflows are not available -- you get message that SharePoint 2013 Workflow platform is not available because it is not configured on the server. This appears to be a bug in SharePoint Designer as the 2013 Workflows are available on the team
site on the same site collection. There is no reason that a site created from a SharePoint 2013 foundation template should have this restriction. To make matters worse if you then save that site as a template on the SharePoint 2013 Enterprise (or
Office/365) system and create a new site from the that template you get the same issue.
Anyone know a workaround/fix to this issue. Have imported the template into Visual Studio but I can not find any way in Visual Studio to enable SharePoint 2013 workflows. A solution that involves Visual Studio import would work fine
for me.
EarllibbyApparently you did not read my question very carefully. The workflow manager is configured properly on this server and for the basic Team site in this site collection the full SharePoint 2013 workflows are available in SharePoint Designer 2013.
BUT they are not available on another site in the SAME SITE COLLECTION that was created from a solution template that was created on a SharePoint Foundation server.
Earllibby -
Sharepoint 2013 custom search results grouping display template
Hi,
I am trying to implement custom grouping for search result items. I would like to group them by a managed property, but without using result blocks (query rules). The idea is to sort the results by the property and then compare the current item (ctx.CurrentItem)
with the previous item using ctx.CurrentItem.ParentTableReference. If a new property value is detected we insert a new 'group header' (just some simple html). The problem is the ParentTableReference is undefined. Shouldn't there be such a property in current
item object?
I'm implementing this in a custom search result item display template...
Thanks in advance.Hi,
According to your post, my understanding is that you want to customize search result items display template.
I suggest you get enumerate all properties of JavaScript context object and debug you code to watch the
ctx.CurrentItem object.
The following articles for your reference:
Debugging Display Templates in SharePoint 2013 Search
http://powersearching.wordpress.com/2013/01/25/debugging-display-temlates-in-sharepoint-2013-search/
Enumerate all properties of JavaScript context object in display templates in SharePoint 2013
http://sadomovalex.blogspot.co.uk/2013/06/enumerate-all-properties-of-javascript.html
How to Define a Custom Group Display Template (GroupTemplateId) for the Search Results WebPart via JavaScript
http://www.eliostruyf.com/how-to-define-a-custom-group-display-template-for-the-search-results-webpart-via-javascript/
Creating customized search results in SharePoint 2013
http://www.abelsolutions.com/totm/creating-customized-search-results-in-sharepoint-2013/
Best Regards
Dennis Guo
TechNet Community Support -
Get current logged in user in sharepoint 2013 hover display template
Hi,
Can somebody tell me how the current logged in username can be retreived in hover display template to be used in search result.
i tried using rest api but that is very difficult to get as it is to be done using ajax call and if we do getting a return value asynchronous is difficult.
Please helpHello,
You might use the function used in the Visual Studio SharePoint App template:
var context = SP.ClientContext.get_current();
var user = context.get_web().get_currentUser();
$(document).ready(function () {
getUserName();
function getUserName() {
context.load(user);
context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);
function onGetUserNameSuccess() {
$('#message').text('Hello ' + user.get_title());
function onGetUserNameFail(sender, args) {
alert('Failed to get user name. Error:' + args.get_message()); -
I have a 2010 work flow that is associated with a sharepoint 2013 list that creates a new list document using a custom Microsoft Word 2013 template with a rich text multiline field quick part. The workflow creates the document and populates
the the quickpart, however, the text in the document is showing html codes
<div class="ExternalClass2116495984EB429D95B02CC15F85FD4C"><h1>ABC123</h1><h2>Test: 1234</h2></div>
and not as
ABC123
Test: 1234
Is there a no code solution for this?Hi,
I have done a test and I can reproduced your issue.
I referred to the blog about Automatically create Word documents which include list fields:
http://blogs.technet.com/b/brenclarke/archive/2009/04/15/automatically-create-word-documents-which-include-list-fields.aspx
When I create a multiple line of text column in a list, I just choose Plain text, Then I solved the issue:
Besides, here is a similar post, you can take a look at:
https://social.technet.microsoft.com/Forums/sharepoint/en-US/a7ab3a61-6643-4a47-a464-fe46b5db1558/rich-text-field-showing-html-code
Best Regards,
Lisa Chen
Lisa Chen
TechNet Community Support -
SharePoint 2013 Search Display Template People Search Mobile Phone
Hello,
I'd like to customize the people search result page. I already added some custom profile properties without any problem. But, when adding the MobilePhone field nothing is display.
I've created a new display template based on the "Item_Person.html" file.
Added the "MobilePhone" field in the ManagedPropertyMapping section
<mso:ManagedPropertyMapping msdt:dt="string">'WorkPhone':'WorkPhone','MobilePhone':'MobilePhone','Room':'Room','Werkgebieden':'Werkgebieden','AboutMe':'AboutMe','AccountName':'AccountName','BaseOfficeLocation':'BaseOfficeLocation','Department':'Department','HitHighlightedProperties':'HitHighlightedProperties','Interests':'Interests','JobTitle':'JobTitle','LastModifiedTime':'LastModifiedTime','Memberships':'Memberships','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>
3. Added a variable:
var has_MobilePhone = !$isEmptyString(ctx.CurrentItem.MobilePhone)
4. Copied the "WorkPhone" display section and changed the values to MobilePhone
<!--#_
if(has_MobilePhone == true) {
_#-->
<div id="MobilePhoneField">
<!--#_
var encodedMobilePhone = ctx.CurrentItem.MobilePhone;
var displayMobilePhone = Srch.U.getSingleHHXMLNodeValue(hhProps, "MobilePhone");
if ($isEmptyString(displayMobilePhone)) { displayMobilePhone = encodedMobilePhone }
_#-->
<div id="MobilePhoneValue" class="ms-srch-ellipsis" title="_#= encodedMobilePhone =#_">MobilePhone: _#= displayMobilePhone =#_ </div>
</div>
<!--#_
_#-->
Unfortunally the mobilephone does not appear in my search results.
What did I missed?First of all thank you for this quick reply.
I changed all the properties from MobilePhone to CellPhone, but without result.
<mso:ManagedPropertyMapping msdt:dt="string">'WorkPhone':'WorkPhone','CellPhone':'CellPhone','Room':'Room','Werkgebieden':'Werkgebieden','AboutMe':'AboutMe','AccountName':'AccountName','BaseOfficeLocation':'BaseOfficeLocation','Department':'Department','HitHighlightedProperties':'HitHighlightedProperties','Interests':'Interests','JobTitle':'JobTitle','LastModifiedTime':'LastModifiedTime','Memberships':'Memberships','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>
var has_CellPhone = !$isEmptyString(ctx.CurrentItem.CellPhone)
<!--#_
if(has_CellPhone == true) {
_#-->
<div id="CellPhoneField">
<!--#_
var encodedCellPhone = ctx.CurrentItem.CellPhone;
var displayCellPhone = Srch.U.getSingleHHXMLNodeValue(hhProps, "CellPhone");
if ($isEmptyString(displayCellPhone)) { displayCellPhone = encodedCellPhone }
_#-->
<div id="CellPhoneValue" class="ms-srch-ellipsis" title="_#= encodedCellPhone =#_">CellPhone: _#= displayCellPhone =#_ </div>
</div>
<!--#_
_#-->
Can you please tell me what I need to change? -
Sharepoint Online - Content Search, some Display Templates missing.
I'm experimenting Content Search web parts in a number of Site Collections, but appear to be getting different Display Templates available.
Can anyone explain what controls the availability of the templates please...
Our Default root site collection.
http://company.sharepoint.com
Has Web part controls of
List & Slideshow
And Item Templates of
Large Picture, Picture on left 3 lines, Recommended Items & Video
All other site collections http://company.sharepoint.com/sites/Dept1
Has Web part controls of List
& Slideshow
PLUS List with Paging
And Item Templates of
Large Picture, Picture on left 3 lines, Recommended Items & Video
PLUS Diagnostic, Picture on Top 3 Lines bottom, & Two Lines
I've compared site and collection features and cannot see any features that would appear to control this...
Any ideas.... Please!
Cheers
RussI just had the same issue, I think it was something with broken upgrade code from 2013.
Anyways, I solved it:
Go to Master Page Gallery --> Display Templates --> Content Web Parts
Delete all JavaScript Files in there except the Group_Content.js (!!!), they seem to have messed up metadata (Content Type Reference and Template Level)
Open up PowerShell and issue this command:
Get-SPFeature SearchTemplatesandResources | Enable-SPFeature -Url [URLtoBrokenSite] -Force
This will re-upload the JavaScript files and all controls and templates finally are there again, hopefully ;)
// Tried and true method for weather forecasting - random numbers. String weather = (new Random()).Next(2)==0?"rainy":"sunny"; -
Page Template in SharePoint 2013 Online ?
Hi All,
I am doing cross site publishing wherein currently my Publishing site showing some departments like HR,Admin,Finance and using content search webpart to show the contents of each department using single Item page (item.aspx).
I heard about the new concept of page template; so my question is instead of using item page how can we use single page template to display the contents across multiple departments.
Any help would be greatly appreciated.
Thanks in advance,
DhananjayCross Site Publishing, would typically be done via the Content Search Web Part and the display templates. Can you have a look at this, as it might be what you meant?
http://office.microsoft.com/en-gb/office365-sharepoint-online-enterprise-help/configure-a-content-search-web-part-in-sharepoint-HA104119042.aspx
Steven Andrews
SharePoint Business Analyst: LiveNation Entertainment
Blog: baron72.wordpress.com
Twitter: Follow @backpackerd00d
My Wiki Articles:
CodePlex Corner Series
Please remember to mark your question as "answered" if this solves (or helps) your problem. -
Display Like and Share functionality in SharePoint 2013 search result
Hello Experts,
I dont Know whether i am asking a good question or bad one . but i am not very much expert in search.
I have to display No of Likes , Share functionality in SharePoint Search Results.
i know little basic about how display templates works. i want to implement these like and share functionality as actions in Item_common_hoverpanel_Actions template. show that i can see in preview.
please if any body can help me . i will be highly thankful to you.
MukeshThis will be difficult. The number of likes has a managed property called LikesCount but it is not populated by the search crawler. So your JavaScript will have to read the "LikesCount" field of the corresponding list item. That would be a
lot of code to execute in the item display template just to display the number of likes. You could have a button that displayed a callout that would get the information and display it. The Sharing could be done via JavaScript in your item display template
using a REST call. You can see an example of code to do that here:
http://sharepointfieldnotes.blogspot.com/2014/09/sharing-documents-with-sharepoint-rest.html?showComment=1428595550241#c3227376854590814312
Just remember the user must have permission to share these documents, so your code will have to handle this.
Blog | SharePoint Field Notes Dev Tools |
SPFastDeploy | SPRemoteAPIExplorer -
Standard intranet requirement template for SharePoint 2013 online Site
Hi, we are doing requirement gathering of one big markets operator company and planning to build one SharePoint
site using SharePoint 2013 online technology.
Now, we are looking for one standard document to showcase standard features should be in that portal based
upon based on customer need, industry trends and practices for standard intranet build.
Any similar template document will be helpful. Thanks!Hi Shailendra,
Could you please tell me the detailed customer need ? As different customer need will have different industry trends and practices.
Thanks
Best Regards
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]
Maybe you are looking for
-
My iPhone is disabled, and I need to restore it, how do you do this?
So I was just on the phone with Apple, and apparently you now have to pay for help on the phone? Stupidest idea ever, but what are you going to do? Anyways, some of my friends thought it would be funny to disable my phone, and now it says "Connect to
-
Hi, i have see that i can make a portal transaction that can open with a shortcut the SAPGUI for windows/java? Shortcut information: [System] Name=S1D Description=VM01 - S1D Client=100 [User] Name=XBOUCHET Language=EN [Function] Title=User Maintenanc
-
Hi, I am occasionally seeing ORA-01555 in the alert log file, but the query length is so long that I could not see the full query in the alert log file. Where can i view the query which is causing this issue? Thanks SA
-
Register a person for I message
Is it possible to register a person for i-message who does not have a Apple product? Trying to send pictures on the MacBook Pro, contact turns red when typed in. Can message on my I-Phone 5.
-
Cannot display a video that i purchased on itunes
i need to know the reason why if i purchased a video on itunes i can display the video on my laptop but not anymore on my iphone4s , please if someone knows the reason please let me know how i can fix it