A new type of web part, Content Search Web Part (CSWP), was introduced in SharePoint 2013. The CSWP functionality is only available when your site is a publishing site, otherwise you may not be able to see the HTML page for an item template.

This article will discuss how to change item templates in Content Search Web Part, according to your needs and requirements. (Assuming basic fundamental knowledge of CSWP to start).

Let’s get started!

  1. Locate the item template closest to your requirements. To see the item template in action, add a CSWP to a page and try applying all of the item templates from the web part properties.
    Content Search SharePoint
  2. Go to /_catalogs/masterpage/Display Templates/Content Web Parts/ using SharePoint designer where you can see all the item templates HTML and their JavaScript files in the designer. Please Note: Do not edit the JavaScript files. As a developer, we are only allowed to touch the HTML files for our customizations.
  3. Copy and paste the selected item HTML template file and SharePoint Designer will generate an associated JavaScript file for you.Content Web Parts SharePoint
  4. Rename the file to “Item_Announcements.html” and hit the refresh button on the top right corner of the grid.Content Web Part Grid SharePoint
  5. Make sure the properties for both the HTML files are the same. Open a folder in the browser, and open the properties of the both of the files. Then, change the title to “Announcements.” This will start appearing in the properties window under item in CSWP properties.
  6. Make sure the properties for both the HTML files are the same. Open a folder in the browser, and open the properties of the both of the files. Then, change the title to “Announcements.” This will start appearing in the properties window under item in CSWP properties.
    Your new value for Managed Property Mappings should be:‘Link URL'{Link URL}:’Path’,’Line 1′{Line 1}:’Title’,’Line 2′{Line 2}:’Title’,’Line 3′{Line 3}:’Title’,’Line 4′{Line 4}:”,’FileExtension’,’SecondaryFileExtension’If you select Announcements in item for CSWP, you will be able to see item 3 and item 4 in the property mappings in the web part properties. But you will not be able to see the data for item 3 and item 4 in CSWP. To get the values in the web part you need to edit the “Item_Announcements.html” file.
  7. To open the HTML file in Advanced Mode, navigate to “/_catalogs/masterpage/Display Templates/Content Web Parts/” and right click on “html” then select open in the advanced mode.
  8. You can now edit the view as you want things to appear. Take a look at the example below:Try finding “<div id=”TwoLines”>” and change the ID of the div.Try findingvar line2 = $getItemValue(ctx, “Line 2”);and pastevar line3 = $getItemValue(ctx, “Line 3”);var line4 = $getItemValue(ctx, “Line 4”);under that.Try finding line2.overrideValueRenderer($contentLineText);And pasteline3.overrideValueRenderer($contentLineText);line4.overrideValueRenderer($contentLineText);

    under that.

     

    Try finding var line2Id = encodedId + “line2”;

    And paste

    var line3Id = encodedId + “line3”;

    var line4Id = encodedId + “line4”;

    under that.

  9. At this point, you can add you CSS and JavaScript files to the CSWP. You can access the code for JavaScript in the HTML file.
    <script>
    $includeLanguageScript(this.url, “~sitecollection/_catalogs/masterpage/Display Templates/Language Files/{Locale}/CustomStrings.js”);

    </script>
  10. You can now add the newly created columns to the template by replacing:
    <div class=”cbs-Item” id=”_#= containerId =#_” data-displaytemplate=”Item2Lines”>
    <a class=”cbs-ItemLink” title=”_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_” id=”_#= pictureLinkId =#_”>

    <img class=”cbs-Thumbnail” src=”_#= $urlHtmlEncodeString(iconURL) =#_” alt=”_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_” id=”_#= pictureId =#_” />
                </a>
    <div class=”cbs-Detail” id=”_#= dataContainerId =#_”>

    <a class=”cbs-Line1Link ms-noWrap ms-displayBlock” href=”_#= linkURL =#_” title=”_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_” id=”_#= line1LinkId =#_”>_#= line1 =#_</a>
    <!–#_if(!line2.isEmpty){_#–>                <div class=”cbs-Line2 ms-noWrap” title=”_#= $htmlEncode(line2.defaultValueRenderer(line2)) =#_” id=”_#= line2Id =#_”>_#= line2 =#_</div><!–#_}_#–>With

     

    _#–>

            <div class=”cbs-Item” id=”_#= containerId =#_” data-displaytemplate=”Item4Lines”>

                <a class=”cbs-ItemLink” title=”_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_” id=”_#= pictureLinkId =#_”>

                    <img class=”cbs-Thumbnail” src=”_#= $urlHtmlEncodeString(iconURL) =#_” alt=”_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_” id=”_#= pictureId =#_” />

                </a>

                <div class=”cbs-Detail” id=”_#= dataContainerId =#_”>

                    <a class=”cbs-Line1Link ms-noWrap ms-displayBlock” href=”_#= linkURL =#_” title=”_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_” id=”_#= line1LinkId =#_”>_#= line1 =#_</a>

                    By-<Span class=”cbs-Line2 ms-noWrap” title=”_#= $htmlEncode(line2.defaultValueRenderer(line2)) =#_” id=”_#= line2Id =#_”>_#= line2 =#_</Span>| at- <Span class=”cbs-Line2 ms-noWrap” title=”_#= $htmlEncode(line3.defaultValueRenderer(line3)) =#_” id=”_#= line3Id =#_”>_#= line3 =#_</Span>

    <!–#_

    if(!line4.isEmpty)

    {

    _#–>

                    <div class=”cbs-Line2 ms-noWrap” title=”_#= $htmlEncode(line4.defaultValueRenderer(line4)) =#_” id=”_#= line4Id =#_”>_#= line4 =#_</div>

    <!–#_

    }

    _#–>

    Then simply save the page.

  11. Now Edit the page and add CSWP and select Announcements in item at the web part properties window.
  12. Lastly, go to the CSWP properties window and check “Change the mapping of managed properties for the fields in the Item Display Template” under Property Mapping. And select the values as shown in the snippet below.SharePoint Alternate Mapping
    Save the Page. Your Web part should look similar to this:SharePoint Project Launch

One great perk about SharePoint is that it is very simple to customize. In just a short few steps, you can now create web parts based on your needs. If you have any additional questions about how to make SharePoint work for you, please feel free to fill out the contact form below and we would be happy to help.