2

I added a new content search web part inside my sharepoint 2013 team site , and i added the following managed property CommentOWSMTXT to show the items' Description field inside the content search web part:-

enter image description here

but the problem is that the Description field (which is of type enhanced rich text) will be rendered with a mix of HTML tags and the actual text as follow inside the display templete:-

enter image description here

so can anyone adivce if there is a way to remove the html tags and only show the related text (which is test 123456789 in my case!)?

here is the description field for the above item:-

enter image description here

Thanks

EDIT

Here is the code for the Display tempelte:-

<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"> 
<head>
<title>List Table Item</title>

<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>
<mso:ManagedPropertyMapping msdt:dt="string">ListID','ListItemID','ContentTypeId','Link URL':'Path','Property 1':'Title','Property 2':'','Property 3':'','Property 4:'','Property 5':'','Property 6':'','Property 7':'','Property 8':'','Property 9':'','Property 10':'','FileExtension','SecondaryFileExtension'</mso:ManagedPropertyMapping>
<mso:MasterPageDescription msdt:dt="string">This is the item row template, use this template in combination with the List Table Control template.</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://****/businessfunctions/_catalogs/masterpage/Display Templates/Content Web Parts/Item_List_Item.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>
<mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>
</mso:CustomDocumentProperties>
</xml><![endif]-->
</head>

<body>
    <div id="TwoLines">
<!--#_
// Give up your names for the properties in the following array
var propertyNames = {"Property 1":"Tile","Property 2":"Created BY"};
var encodedId = $htmlEncode(ctx.ClientControl.get_nextUniqueId() + "_tableitems_");
var linkURL = $getItemValue(ctx, "Link URL");
linkURL.overrideValueRenderer($urlHtmlEncode);
var iconURL = Srch.ContentBySearch.getIconSourceFromItem(ctx.CurrentItem);
var listID = $getItemValue(ctx, 'ListID');
var listItemID = $getItemValue(ctx, 'ListItemID');
var ContentTypeId = $getItemValue(ctx, 'ContentTypeId');
var rowId = encodedId + "row";
var editCellId = rowId + "_cell";
var currentItemIdx = ctx.CurrentItemIdx + 1;
var alternating = currentItemIdx % 2 === 0 ? "ms-alternating" : "";
if (currentItemIdx === 1) {
_#-->
    <thead>
        <tr>
            <!--#_ 
            // Show the file icon
            _#-->
            <th class="ms-vh-icon ms-minWidthHeader">
                <img width="16" height="16" border="0" src="/_layouts/15/images/icgen.gif">
            </th>
            <!--#_ 
            // Show the properties that aren't empty
            for(var i = 1; i <= 10; i++) { 
                var property = $getItemValue(ctx, String.format("Property {0}", i));
                if(property.managedPropertyName !== String.format("Property {0}", i)) {
                    var propertyName = typeof propertyNames[property.propertyLookupName] === "undefined" ? property.managedPropertyName : propertyNames[property.propertyLookupName];
            _#-->
            <th class="ms-vh2">
                _#= propertyName =#_ 

                <span id="_#= property.managedPropertyName.replace(/ /g, '-') =#_">
                    <span style="" class="sortarrow ms-sortarrowup-iconouter" ></span>
                    <a id="_#= property.managedPropertyName =#_ASC" href="#" title="Ascending" onclick="$getClientControl(this).sortOrRank('_#= property.managedPropertyName =#_ASC');return false;">
                        <img alt="Ascending" src="/_layouts/15/images/sortaz.gif">
                    </a>
                    <a id="_#= property.managedPropertyName =#_DES" href="#" title="Descending" onclick="$getClientControl(this).sortOrRank('_#= property.managedPropertyName =#_DES');return false;">
                        <img alt="Descending" src="/_layouts/15/images/sortza.gif">
                    </a>
                </span>
            </th>
            <!--#_ 
                }
            } 
            _#-->
        </tr>
    </thead>
    <tbody>
<!--#_
}
_#-->
        <tr id="_#= rowId =#_" class="_#= alternating =#_ ms-itmHoverEnabled ms-itmhover">
            <td class="ms-cellstyle ms-vb-icon">
            <!--#_ if(!iconURL.isEmpty) { _#-->
                <img src="_#= iconURL =#_" />
                <span id="_#= editCellId =#_"></span>
            <!--#_ 
            } else {
            _#-->
                <img width="16" height="16" border="0" src="/_layouts/15/images/icgen.gif">
            <!--#_ 
            }
            _#-->
            </td>

            <!--#_
            // Show the properties that aren't empty
            for(var i = 1; i <= 10; i++) { 
                var property = $getItemValue(ctx, String.format("Property {0}", i));
                if (property.managedPropertyName !== String.format("Property {0}", i)) {
            _#-->
                <td class="ms-cellstyle ms-vb2">
            <!--#_
                    if(!property.isEmpty)
                    {
                        var value = i === 1 ? String.format("<a href='{0}' class='ms-listlink'>{1}</a>", linkURL, property) : property;
            _#-->
                    _#= value =#_
            <!--#_
                        if (i === 1 && !listID.isEmpty && !listItemID.isEmpty && !ContentTypeId.isEmpty) {
                            var viewPropUrl = String.format('/_layouts/15/listform.aspx?ListId={0}&ID={1}&ContentTypeID={2}&Source={3}', listID, listItemID, ContentTypeId, window.location.href.split('#')[0]);
            _#-->
                            &nbsp;&nbsp;
                            <span title="Open Menu" class="NotificationDiv ms-ellipsis-a" rel="_#= viewPropUrl =#_" ref="_#= property =#_" path="_#= linkURL =#_" style="cursor: pointer; margin-top: 3px; float: right;">
                                <img alt="Open Menu" src="/_layouts/15/images/spcommon.png" class="ms-ellipsis-icon">
                            </span>
            <!--#_
                        }
                    }
            _#-->
                </td>
            <!--#_
                }
            } 
            _#-->
        </tr>
<!--#_
if (currentItemIdx === ctx.CurrentGroup.RowCount) {
_#-->
    </tbody>
<!--#_
}
_#-->
    </div>
</body>
</html>

so i am not sure how/where i need to add the related code var desc = $getItemValue(ctx, "Description"); & _#= STSHtmlDecode(desc.value) =#??

2

I too faced a similar issue, to solve this i created a copy of the display template. In the display template, i added the below code:

var desc = $getItemValue(ctx, "Description");

This gives me the value of the text and then in the HTML i added the below code:

_#= STSHtmlDecode(desc.value) =#

After that it displays the value correctly without the HTML tags. In your case , replace the managed property as per your requirement.

Another option, if your are going to use only text in the column, would be to use the plain text box option which will automatically disable the html tags.

enter image description here

Updated to include display template:

    <html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"> 
<head>
<title>List Table Item</title>

<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>
<mso:ManagedPropertyMapping msdt:dt="string">ListID','ListItemID','ContentTypeId','Link URL':'Path','Property 1':'Title','Property 2':'','Property 3':'anArticleBodyOWSMTXT','Property 4:'anArticleBodyOWSMTXT','Property 5':'','Property 6':'','Property 7':'','Property 8':'','Property 9':'','Property 10':'','FileExtension','SecondaryFileExtension','anArticleBodyOWSMTXT':'anArticleBodyOWSMTXT'</mso:ManagedPropertyMapping>
<mso:MasterPageDescription msdt:dt="string">This is the item row template, use this template in combination with the List Table Control template.</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">https://rapidcircle1com.sharepoint.com/sites/GautamIIWDevSite/_catalogs/masterpage/Display Templates/Content Web Parts/Item_TwoLines_copy(1).html, Conversion successful.</mso:HtmlDesignStatusAndPreview>
<mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>
</mso:CustomDocumentProperties>
</xml><![endif]-->
</head>

<body>
    <div id="TwoLines">
<!--#_
// Give up your names for the properties in the following array
var propertyNames = {"Property 1":"Tile","Property 2":"Created BY"};
var encodedId = $htmlEncode(ctx.ClientControl.get_nextUniqueId() + "_tableitems_");
var linkURL = $getItemValue(ctx, "Link URL");
linkURL.overrideValueRenderer($urlHtmlEncode);
var iconURL = Srch.ContentBySearch.getIconSourceFromItem(ctx.CurrentItem);
var listID = $getItemValue(ctx, 'ListID');
var listItemID = $getItemValue(ctx, 'ListItemID');
var ContentTypeId = $getItemValue(ctx, 'ContentTypeId');
var rowId = encodedId + "row";
var editCellId = rowId + "_cell";
var currentItemIdx = ctx.CurrentItemIdx + 1;
var alternating = currentItemIdx % 2 === 0 ? "ms-alternating" : "";
if (currentItemIdx === 1) {
_#-->
    <table>
    <thead>
        <tr>
            <!--#_ 
            // Show the file icon
            _#-->
            <th class="ms-vh-icon ms-minWidthHeader">
                <img width="16" height="16" border="0" src="/_layouts/15/images/icgen.gif">
            </th>
            <!--#_ 
            // Show the properties that aren't empty
            for(var i = 1; i <= 10; i++) { 
                var property = $getItemValue(ctx, String.format("Property {0}", i));
                if(property.managedPropertyName !== String.format("Property {0}", i)) {
                    var propertyName = typeof propertyNames[property.propertyLookupName] === "undefined" ? property.managedPropertyName : propertyNames[property.propertyLookupName];                    
            _#-->
            <th class="ms-vh2">
                _#= propertyName =#_ 

                <span id="_#= property.managedPropertyName.replace(/ /g, '-') =#_">
                    <span style="" class="sortarrow ms-sortarrowup-iconouter" ></span>
                    <a id="_#= property.managedPropertyName =#_ASC" href="#" title="Ascending" onclick="$getClientControl(this).sortOrRank('_#= property.managedPropertyName =#_ASC');return false;">
                        <img alt="Ascending" src="/_layouts/15/images/sortaz.gif">
                    </a>
                    <a id="_#= property.managedPropertyName =#_DES" href="#" title="Descending" onclick="$getClientControl(this).sortOrRank('_#= property.managedPropertyName =#_DES');return false;">
                        <img alt="Descending" src="/_layouts/15/images/sortza.gif">
                    </a>
                </span>
            </th>
            <!--#_ 
                }
            } 
            _#-->
        </tr>
    </thead>
    <tbody>

<!--#_
}
_#-->
        <tr id="_#= rowId =#_" class="_#= alternating =#_ ms-itmHoverEnabled ms-itmhover">
            <td class="ms-cellstyle ms-vb-icon">
            <!--#_ if(!iconURL.isEmpty) { _#-->
                <img src="_#= iconURL =#_" />
                <span id="_#= editCellId =#_"></span>
            <!--#_ 
            } else {
            _#-->
                <img width="16" height="16" border="0" src="/_layouts/15/images/icgen.gif">
            <!--#_ 
            }
            _#-->
            </td>

            <!--#_
            // Show the properties that aren't empty
            for(var i = 1; i <= 10; i++) { 
                var property = $getItemValue(ctx, String.format("Property {0}", i));
                if(property.managedPropertyName=="CommentOWSMTXT"){
                    var desc = $getItemValue(ctx, "CommentOWSMTXT");
                    if(!property.isEmpty)
                    {
             _#-->
                    <td class="ms-cellstyle ms-vb2">
                        _#= STSHtmlDecode(desc.value) =#_
                    </td>
            <!--#_
                    }
                }
                else if(property.managedPropertyName !== String.format("Property {0}", i)) {
            _#-->
                <td class="ms-cellstyle ms-vb2">
            <!--#_
                    if(!property.isEmpty)
                    {
                        var value = i === 1 ? String.format("<a href='{0}' class='ms-listlink'>{1}</a>", linkURL, property) : property;

            _#-->
                    _#= value =#_
            <!--#_
                        if (i === 1 && !listID.isEmpty && !listItemID.isEmpty && !ContentTypeId.isEmpty) {
                            var viewPropUrl = String.format('/_layouts/15/listform.aspx?ListId={0}&ID={1}&ContentTypeID={2}&Source={3}', listID, listItemID, ContentTypeId, window.location.href.split('#')[0]);
            _#-->
                            &nbsp;&nbsp;
                            <span title="Open Menu" class="NotificationDiv ms-ellipsis-a" rel="_#= viewPropUrl =#_" ref="_#= property =#_" path="_#= linkURL =#_" style="cursor: pointer; margin-top: 3px; float: right;">
                                <img alt="Open Menu" src="/_layouts/15/images/spcommon.png" class="ms-ellipsis-icon">
                            </span>
            <!--#_
                        }
                    }
            _#-->
                </td>
            <!--#_
                }
            } 
            _#-->
        </tr>
<!--#_
if (currentItemIdx === ctx.CurrentGroup.RowCount) {
_#-->
    </tbody>
   </table>
<!--#_
}
_#-->
    </div>
</body>
</html>
  • thanks a lot for the info. can you please check my edit ? as i provided more details about the temple i am using , as i am not sure where/how i need to add the related code "var desc = $getItemValue(ctx, "Description");)" & "#= STSHtmlDecode(desc.value) =#" inside my display template?? – john Gu Oct 10 '16 at 14:28
  • can you check my edit please? – john Gu Oct 10 '16 at 15:01
  • 1
    Hey @johnG , you can follow this link - drisky.co.uk/2014/04/01/… to create a display template and associate with the CSWP webpart. Once you do that, you need to add the above code in the new display template and it will start working. – Gautam Sheth Oct 10 '16 at 15:53
  • now the templete i am using is the one provided in this link eliostruyf.com/… not sure if there is a way to apply your code to it? – john Gu Oct 10 '16 at 16:09
  • now i provided the full code for my display template (check my edit please) .. so can you please adivce where i do need to add the "var desc = $getItemValue(ctx, "Description");" & "_#= STSHtmlDecode(desc.value) =#" ?? – john Gu Oct 11 '16 at 13:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.