JSLink to render the list to show people detail info with picture

I  create a custom list, and create a poeple column to store poeple detail info with picture in this list, the custom list with following people:Name1, Name2, NAme3, Name4.

here is the list info:

Then Display custom list webpart into 2 columns in webpart section, here is the picture:

I render the webpart with JSLink, JSLink is greate! here is the code.

(function () {

 

var itemCtx = {};

itemCtx.Templates = {};

 

itemCtx.Templates.Header = "<span></span>";

itemCtx.Templates.Item =  ItemOverrideFun ;

itemCtx.Templates.Footer =  "";

 

itemCtx.BaseViewID = 1;

itemCtx.ListTemplateType = 100;

 

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(itemCtx);

 })();

 

function ItemOverrideFun(ctx) {

 

    if (ctx.CurrentItem.Name[0].picture == "")

    {

        ctx.CurrentItem.Name[0].picture = "_layouts/images/O14_person_placeHolder_96.png";

    }

    return "<div style ='float:left;width: 206px;height:40px;margin-bottom:13px'>" +



                                // status

                                "<div style ='float: left;width: 4px; height:40px;overflow:hidden;' class='ms-tableCell'>" +

                                "<span class='ms-imnSpan'>" +

                                "<a href='#' onclick='IMNImageOnClick(event);return false;' class='ms-imnlink ms-spimn-presenceLink' >" +

                                "<span class='ms-spimn-presenceWrapper ms-spimn-imgSize-8x72'  >" + //4*36 //5x36x32

                                "<img name='imnmark' title='' ShowOfflinePawn=  '1' class='ms-spimn-img ms-spimn-presence-disconnected-8x72x32' src='/_layouts/15/images/spimn.png?rev=23' alt='User   Presence' sip='" + ctx.CurrentItem.Name[0].email + "' id='imn_1" + ctx.CurrentItem.Name[0].email + ",type=sip' />" +

                                "</span></a></span></span></div>" +



                                //picture

                                "<div style ='float: left;width: 41px; height:40px;overflow:hidden;' class='ms-tableCell ms-verticalAlignTop'>" +

                                "<div class='ms-peopleux-userImgDiv' style ='width: 41px; height:40px;'>" +

                                "<span class='ms-imnSpan'>" +



                                "<a href='#' onclick='IMNImageOnClick(event);return false;' class='ms-imnlink' tabIndex='-1'>" +

                                "<img name='imnmark' title='' ShowOfflinePawn='1' class=' ms-hide' src='/_layouts/15/images/spimn.png?rev=23' alt='User Presence' sip='" + ctx.CurrentItem.Name[0].email + "'  id='imn_2" + ctx.CurrentItem.Name[0].email + ",type=sip' />" +

                                "<span class='ms-peopleux-imgUserLink'>" +

                                "<span class='ms-peopleux-userImgWrapper' style='width:41px; height:40px'>" +

                                "<img style='min-width:41px; min-height:40px; clip:rect(0px, 41px, 40px, 0px); max-width:41px' src=" + ctx.CurrentItem.Name[0].picture + " alt=' Ram' />" +

                                "</span></span></a></span>" +

                                "</div>" +

                                "</div>" +



                                "<div style ='float: left; margin-left:9px;'>" +

                                //name

                                "<div style = 'Color:X#000000;font-size:12px;max-width: 150px;'>" + ctx.CurrentItem.Name[0].title + "</div>" +

                                //email

                                "<div style ='height:19px;font-size:12px;' >" +

                                "<a style = 'Color:#0072c6;' class='ms-subtleLink' onclick='GoToLinkOrDialogNewWindow(this);return false;' href='/_layouts/15/userdisp.aspx?ID=" + ctx.CurrentItem.Name[0].ID +

                                "' id='ProfileLink" + ctx.CurrentItem.Name[0].email + "'>" + ctx.CurrentItem.Name[0].email +

                                "</a>" +

                                "</div>" +

                                "</div>" +



                                "</div>";

                                





}

 

More info about how to deploy the code see my last blog:http://blog.csdn.net/tristan_dong/article/details/12621033

And the lync detail to : http://blog.csdn.net/tristan_dong/article/details/10432793