2

I am trying to customize search result through display template. my template has two block for Rendering. how to customize search result such as following image:

enter image description here

my HTML code for implement is:

<div id="tabbed-nav">

            <!-- Tab Navigation Menu -->
            <ul>
                <li><a>Overview<span>New Features in Zozo Tab</span></a></li>
                <li><a>Subscribe<span>New Releases and Updates</span></a></li>
                <li><a>Themes<span>10 Preset themes</span></a></li>
                <li><a>Support<span>Step-by-step Guide</span></a></li>
                <li><a>Purchase<span>Get Zozo Tabs Now!</span></a></li>
            </ul>

            <!-- Content container -->
            <div>

                <!-- Overview -->
                <div>
                    <h4>Overview</h4>
                    <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer</p>
                </div>

                <!-- Subscribe -->
                <div>
                    <h4>Subscribe</h4>
                    <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer</p>
                </div>

                <!-- Themes -->
                <div>
                    <h4>Themes</h4>
                    <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer</p>
                </div>

                <!-- Support -->
                <div>
                    <h4>Support</h4>
                    <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer</p>
                </div>

                <!-- Purchase -->
                <div>
                    <h4>Purchase</h4>
                    <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer</p>
                </div>

            </div>

        </div>

how to create Control Display Template and Item Display Template?

Improve this question
8
  • And wehre is your Problem now? :)
    – Sascha
    Jan 13, 2015 at 18:59
  • My Display Template have two block (DIV and UL) for Rendering?
    – A-Dastani
    Jan 13, 2015 at 20:54
  • As mentioned below, check the link under your post. This is a very usefull help.
    – Sascha
    Jan 14, 2015 at 6:51
  • under link is useful help for one rendering .
    – A-Dastani
    Jan 14, 2015 at 7:47
  • please, help me.
    – A-Dastani
    Jan 14, 2015 at 10:15

2 Answers 2

Reset to default
2
+50

What you need is to create the UL and DIV element in the control template and push your content in it via the item template.

Now because you are working with display templates, this can only be done onces the rendering is complete, because at that time, the HTML is placed on the page. My approach is to add your list items and description values to two strings (can also be a array if you want) and use the AddPostRenderCallback function to insert these item and description values to the corresponding elements in the control template.

I also explained this approach in one of my blog posts: Grouping search results with display templates for the CSWP

I worked out an example for the structure you need.

Control Template

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

<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>
<mso:MasterPageDescription msdt:dt="string">Stackexchange</mso:MasterPageDescription>
<mso:ContentTypeId msdt:dt="string">0x0101002039C03B61C64EC4A04F5361F385106601</mso:ContentTypeId>
<mso:TargetControlType msdt:dt="string">;#Content Web Parts;#</mso:TargetControlType>
<mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
</mso:CustomDocumentProperties>
</xml><![endif]-->
</head>

<body>
    <script>
        Type.registerNamespace('search.Stackexchange');

        search.Stackexchange = function() {
            var currentCtx;

            var init = function (currentContext, ulId, elmId) {
                currentCtx = currentContext;

                // Creating empty strings
                currentCtx.listItems = "";
                currentCtx.descItems = "";

                // Add an on post render callback, this will be excuted when all the results are rendered
                AddPostRenderCallback(currentContext, function() {
                    var ulElm = document.getElementById(ulId);
                    var descElm = document.getElementById(elmId);
                    show(ulElm, descElm);
                });
            },
            push = function (title, description) {
                currentCtx.listItems += '<li>' + title + '</li>';
                currentCtx.descItems += '<div>' + description + '</div>';
            },
            show = function (ulElm, descElm) {
                ulElm.innerHTML += currentCtx.listItems;
                descElm.innerHTML += currentCtx.descItems;
            };

            return {
                init: init, 
                push: push,
                show: show
            };
        }();

        Srch.U.registerRenderTemplateByName("stackexchange_init", search.Stackexchange.init);
        Srch.U.registerRenderTemplateByName("stackexchange_push", search.Stackexchange.push);
        Srch.U.registerRenderTemplateByName("stackexchange_show", search.Stackexchange.show);
    </script>

    <div id="Control_Stackexchange">
<!--#_ 
var dtId = ctx.ClientControl.get_nextUniqueId();
var ulId = $htmlEncode(dtId + "_List");
var descId = $htmlEncode(dtId + "_Descriptions");

Srch.U.getRenderTemplateCollection().stackexchange_init(ctx, ulId, descId);

if (!$isNull(ctx.ClientControl) &&
    !$isNull(ctx.ClientControl.shouldRenderControl) &&
    !ctx.ClientControl.shouldRenderControl())
{
    return "";
}
ctx.ListDataJSONGroupsKey = "ResultTables";
_#-->
        _#= ctx.RenderGroups(ctx) =#_

        <ul id="_#= ulId =#_">

        </ul>
        <div id="_#= descId =#_">

        </div>
    </div>
</body>
</html>

Item Template

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

<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>
<mso:ManagedPropertyMapping msdt:dt="string">'Link URL'{Link URL}:'Path','Title':'Title','Description':'Description','FileExtension','SecondaryFileExtension'</mso:ManagedPropertyMapping>
<mso:MasterPageDescription msdt:dt="string">Stackexchange</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:CustomDocumentProperties>
</xml><![endif]-->
</head>

<body>
    <div id="Item_Stackexchange">
<!--#_
    var linkURL = $getItemValue(ctx, "Link URL");
    var title = $getItemValue(ctx, "Title");
    var description = $getItemValue(ctx, "Description");

    // Push the content to the control template
    Srch.U.getRenderTemplateCollection().stackexchange_push(title, description);
_#-->
    </div>
</body>
</html>

If you want, I also worked out a jQuery UI tab display template which can be found on GitHub: jQuery UI Tabs Templates (CSWP)

Improve this answer
1
1

you need to customize the item display template, Go to Design Manger and then Go to Design Templates, download the item display template and then you can modify it and save it with a new name. here you go with an code example.

http://blogs.technet.com/b/sharepoint_quick_reads/archive/2013/08/01/sharepoint-2013-customize-display-template-for-content-by-search-web-part-cswp-part-1.aspx

You only need to modify the design of the Template which you download, if you need more data to be fetched from any lists or site, you need to add the Managed property of that in your design template.

Improve this answer
3
  • my template has two block for item display template and one Control display template, such as figure.
    – A-Dastani
    Jan 13, 2015 at 5:33
  • Please check the link, you will understand you need to modify two files one for control Template and one for Item template. The use of both is different, Control Template provides structure to Overall HTML Layout while Item Template provides layout of each searched item.
    – Akarsh Gupta
    Jan 13, 2015 at 5:47
  • Hi Could you please elaborate more about the issue, I will post my code how i did it. I have customized the item display, control display and Hover display template
    – Akarsh Gupta
    Jan 15, 2015 at 5:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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