none
Group Items in a Template Override RRS feed

  • Question

  • I've got a Link list that I'd like to do a Template Override on in order to group the Category and SubCategory then present the items.

    List:

    My current script renders like this:

    But I want to make it look like:

    My current code is:

    (function () {
        var overrideCtx = {};
         overrideCtx.Templates = {};
         overrideCtx.Templates.Header = HeaderOverrideFun;
         //overrideCtx.Templates.Group = CustomGroup;
         overrideCtx.Templates.Item = ItemOverrideFun;
         overrideCtx.Templates.Footer = FooterOverrideFun;
         SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
     })();
    
    function HeaderOverrideFun(ctx) {
        return '<div> <h1> Quick Links </h1> <ul>'
      }
    
    
    function ItemOverrideFun(ctx) {
        return '<li><a href=\"' + ctx.CurrentItem.URL + '\" target=\"_blank\">' + ctx.CurrentItem['URL.desc'] + '</a></li>';
    }
    
    function FooterOverrideFun(ctx) {
        return '</ul> <h6> ' + ctx.ListTitle + '</h6> </div>'
        
      }


    David Jenkins

    Thursday, February 9, 2017 9:21 PM

Answers

  • Hi,

    You could try to check the whether the sample code would help (you may need add CSS).

    (function () {
    
        var overrideCtx = {};
        overrideCtx.Templates = {};
        overrideCtx.Templates.Header = HeaderOverrideFun;
        //overrideCtx.Templates.Group = CustomGroup;
        overrideCtx.Templates.Item = ItemOverrideFun;
        //overrideCtx.Templates.Body = customBody;
        //overrideCtx.Templates.Footer = FooterOverrideFun;
        overrideCtx.OnPostRender = OnPostRenderHandler;
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
    })();
    
    function HeaderOverrideFun(ctx) {
        return '<div> <h1> Quick Links </h1><h6> ' + ctx.ListTitle + '</h6> </div></div>'+
            '<div style="><div style="width:180px;float:left">Category1<ul id="Category1" ></ul></div><br />' +
            '<div style="width:180px;float:left;>Category2<ul id="Category2" ></ul></div><br />' +
            '<div style="width:180px;float:right;>Category3<ul id="Category3" ></ul></div></div>'
    }
    
    function ItemOverrideFun(ctx) {    
        return '<li id="link_item' + ctx.CurrentItem.ID + '"><a href=\"' + ctx.CurrentItem.URL + '\" target=\"_blank\">' + ctx.CurrentItem['URL.desc'] + '</a></li>';
    }
    function CustomGroup(ctx, group, groupId, listItem, listSchema, level, expand) {
        return '<div><h6> ' + group + groupId + '</h6> </div>'
    }
    function FooterOverrideFun(ctx) {
        return '<div> <h6> ' + ctx.ListTitle + '</h6> </div>'
    }
    
    function customBody() {
        return '<div id="Category1"></div>';
    }
    
    function OnPostRenderHandler(ctx) {
        var rows = ctx.ListData.Row;
        for (var i = 0; i < rows.length; i++) {
            var category = rows[i]["Category"];
            if (category == "Category1") {
                var itemID = '#link_item' + rows[i]["ID"];
                $(itemID).appendTo($("#Category1"));
            }
            if (category == "Category2") {
                var itemID = '#link_item' + rows[i]["ID"];
                $(itemID).appendTo($("#Category2"));
            }
            if (category == "Category3") {
                var itemID = '#link_item' + rows[i]["ID"];
                $(itemID).appendTo($("#Category3"));
            }
            
        }
    }

    Here is the thread referenced.

    http://jsuhail.blogspot.sg/2014/09/client-side-rendering-using-jslink-post_30.html

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Friday, February 10, 2017 8:08 AM

All replies

  • I keep reading about Grouping stuff but I haven't really understood how it works.  The examples make no sense so I've given up on it.  If there is a decent example and how it works I'd love to group links and present them like the screenshot shows.

    So far I've started messing around trying to do a for loop or something like that but of course I'm repeating all items so it's not consolidating under the categories I want.  I'm kind of new to JavaScript so forgive me if I am not noticing something obvious. 


    David Jenkins


    Thursday, February 9, 2017 9:24 PM
  • Hi David,

    Can you create Four views on your link list, here you can filter as per Category Name and group by category Name after that you can add them on a your page [ on page you can add a table having two row and two column or take Page having four section as you want in four box ] as list view webpart and select the particular view on each webpart.

    See this link if you can do customize using CSS and JS.

    https://www.codeproject.com/Articles/620110/SharePoint-Client-Side-Rendering-List-Views

    http://v4-alpha.getbootstrap.com/components/list-group/#links-and-buttons


    KRISHANA KUMAR

    SharePoint Architect

    Mosstechnet-kk.com

     

    Please click "Mark As Answer" if this post solves your problem or "Vote As Helpful" if it was useful

    Thursday, February 9, 2017 9:39 PM
  • I've been trying to avoid using separate web parts.  I am hoping the category and subcategory fields could be read from and dynamically make the table.  I'm just not really sure how I'd do that with iterating through all items.

    I've read the first link you sent over and over and that is where I got much of my example. The second link is new and I'll read it but I'm not sure it will answer my question.


    David Jenkins

    Thursday, February 9, 2017 9:44 PM
  • Hi,

    You could try to check the whether the sample code would help (you may need add CSS).

    (function () {
    
        var overrideCtx = {};
        overrideCtx.Templates = {};
        overrideCtx.Templates.Header = HeaderOverrideFun;
        //overrideCtx.Templates.Group = CustomGroup;
        overrideCtx.Templates.Item = ItemOverrideFun;
        //overrideCtx.Templates.Body = customBody;
        //overrideCtx.Templates.Footer = FooterOverrideFun;
        overrideCtx.OnPostRender = OnPostRenderHandler;
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
    })();
    
    function HeaderOverrideFun(ctx) {
        return '<div> <h1> Quick Links </h1><h6> ' + ctx.ListTitle + '</h6> </div></div>'+
            '<div style="><div style="width:180px;float:left">Category1<ul id="Category1" ></ul></div><br />' +
            '<div style="width:180px;float:left;>Category2<ul id="Category2" ></ul></div><br />' +
            '<div style="width:180px;float:right;>Category3<ul id="Category3" ></ul></div></div>'
    }
    
    function ItemOverrideFun(ctx) {    
        return '<li id="link_item' + ctx.CurrentItem.ID + '"><a href=\"' + ctx.CurrentItem.URL + '\" target=\"_blank\">' + ctx.CurrentItem['URL.desc'] + '</a></li>';
    }
    function CustomGroup(ctx, group, groupId, listItem, listSchema, level, expand) {
        return '<div><h6> ' + group + groupId + '</h6> </div>'
    }
    function FooterOverrideFun(ctx) {
        return '<div> <h6> ' + ctx.ListTitle + '</h6> </div>'
    }
    
    function customBody() {
        return '<div id="Category1"></div>';
    }
    
    function OnPostRenderHandler(ctx) {
        var rows = ctx.ListData.Row;
        for (var i = 0; i < rows.length; i++) {
            var category = rows[i]["Category"];
            if (category == "Category1") {
                var itemID = '#link_item' + rows[i]["ID"];
                $(itemID).appendTo($("#Category1"));
            }
            if (category == "Category2") {
                var itemID = '#link_item' + rows[i]["ID"];
                $(itemID).appendTo($("#Category2"));
            }
            if (category == "Category3") {
                var itemID = '#link_item' + rows[i]["ID"];
                $(itemID).appendTo($("#Category3"));
            }
            
        }
    }

    Here is the thread referenced.

    http://jsuhail.blogspot.sg/2014/09/client-side-rendering-using-jslink-post_30.html

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Friday, February 10, 2017 8:08 AM
  • Thank you.  This is where I'm heading.  I had read the link you sent but did not recognize what you have shown in your example.

    I understand the example sort of.  I don't appear to get the post render to work like you have it.

    var category = rows[i]["Category"];

    This doesn't appear to show up.  When I look at the information I get back the list uses the word "Categories", but when I try to use that it fails.

    Here is what the debugger shows before I change the word from Category to Categories.  After the change even the debugger fails so I'm not sure what that issue is.


    David Jenkins

    Friday, February 10, 2017 3:40 PM
  • Switching the double quotes to single quotes helped.

    Right now I don't fully understand this:

          var category = rows[i]['Categories'];
            if (category == 'Category1') {
                var itemID = '#link_item' + rows[i]['ID'];
                $(itemID).appendTo($('#Category1'));
                debugger;
            }
    What are you doing with itemID?  I don't understand the #link_item part. 


    David Jenkins

    Friday, February 10, 2017 3:55 PM
  • A I found where <li id="link_item'  is used.

    David Jenkins

    Friday, February 10, 2017 5:09 PM
  • Hi,

    The id just used to find the items, for example: for item 3, I use the id to find it and check it’s Category so attach it to Category1.

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Monday, February 13, 2017 1:21 AM