{"id":868,"date":"2017-05-23T14:45:32","date_gmt":"2017-05-23T09:15:32","guid":{"rendered":"https:\/\/blog.binarybits.net\/?p=868"},"modified":"2017-07-19T10:36:42","modified_gmt":"2017-07-19T05:06:42","slug":"displaying-sharepoint-user-presence-indicator-csr","status":"publish","type":"post","link":"https:\/\/blog.binarybits.net\/displaying-sharepoint-user-presence-indicator-csr\/","title":{"rendered":"Displaying SharePoint user presence indicator in CSR"},"content":{"rendered":"
The following are code snippets which can be used to show a user’s Lync\/Skype for Business presence status in SharePoint Client Side Rendering (CSR).<\/p>\n
<span>\r\n <span class=\"ms-imnSpan\">\r\n <a href=\"#\" onclick=\"IMNImageOnClick(event);return false;\" class=\"ms-imnlink ms-spimn-presenceLink\">\r\n <span class=\"ms-spimn-presenceWrapper ms-imnImg ms-spimn-imgSize-10x10\">\r\n <img name=\"imnmark\" title=\"\" ShowOfflinePawn=\"1\" class=\"ms-spimn-img ms-spimn-presence-disconnected-10x10x32\" src=\"\/_layouts\/15\/images\/spimn.png?rev=23\" alt=\"User Presence\" sip=\"user@domain.com\" id=\"imn_1,type=sip\"><\/img>\r\n <\/span>\r\n <\/a>\r\n <\/span>\r\n <span>\r\n <a href=\"#\" onclick=\"IMNImageOnClick(event);return false;\" class=\"ms-imnlink\" tabIndex=\"-1\">\r\n <img name=\"imnmark\" title=\"\" ShowOfflinePawn=\"1\" class=\" ms-hide\" src=\"\/_layouts\/15\/images\/spimn.png?rev=23\" alt=\"User Presence\" sip=\"user@domain.com\" id=\"imn_2,type=sip\"><\/img>\r\n <\/a>\r\n <span>User<\/span>\r\n <\/span>\r\n<\/span><\/pre>\nWith Picture Detail View<\/h2>\n
<div>\r\n <div class=\"ms-tableRow\">\r\n <div>\r\n <span class=\"ms-imnSpan\">\r\n <a href=\"#\" onclick=\"IMNImageOnClick(event);return false;\" class=\"ms-imnlink ms-spimn-presenceLink\">\r\n <span class=\"ms-spimn-presenceWrapper ms-imnImg ms-spimn-imgSize-10x10\">\r\n <img name=\"imnmark\" title=\"\" ShowOfflinePawn=\"1\" class=\"ms-spimn-img ms-spimn-presence-disconnected-10x10x32\" src=\"\/_layouts\/15\/images\/spimn.png?rev=23\" alt=\"User Presence\" sip=\"user@domain.com\" id=\"imn_661,type=sip\"><\/img>\r\n <\/span>\r\n <\/a>\r\n <\/span>\r\n <\/div>\r\n <div class=\"ms-tableCell ms-verticalAlignTop\">\r\n <div class=\"ms-peopleux-userImgDiv\">\r\n <span class=\"ms-imnSpan\">\r\n <a href=\"#\" onclick=\"IMNImageOnClick(event);return false;\" class=\"ms-imnlink\" tabIndex=\"-1\">\r\n <img name=\"imnmark\" title=\"\" ShowOfflinePawn=\"1\" class=\"ms-hide\" src=\"\/_layouts\/15\/images\/spimn.png?rev=23\" alt=\"User Presence\" sip=\"user@domain.com\" id=\"imn_3452,type=sip\"><\/img>\r\n <\/a>\r\n <span>\r\n <img style=\"width:62px; height:62px; border:none\" src=\"http:\/\/userimageurl\" alt=\"User\"><\/img>\r\n <\/span>\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"ms-tableCell ms-peopleux-userdetails ms-noList\">\r\n <ul style=\"max-width:150px\">\r\n <li>\r\n <div class=\"ms-noWrap\">\r\n <span>\r\n <a href=\"#\" onclick=\"IMNImageOnClick(event);return false;\" class=\"ms-imnlink\" tabIndex=\"-1\">\r\n <img name=\"imnmark\" title=\"\" ShowOfflinePawn=\"1\" class=\"ms-hide\" src=\"\/_layouts\/15\/images\/spimn.png?rev=23\" alt=\"User Presence\" sip=\"user@domain.com\" id=\"imn_34523,type=sip\"><\/img>\r\n <\/a>\r\n <span>User<\/span>\r\n <\/span>\r\n <\/div>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n<\/div><\/pre>\nWith Picture<\/h2>\n
<div>\r\n <div>\r\n <span>\r\n <a href=\"#\" onclick=\"IMNImageOnClick(event);return false;\" class=\"ms-imnlink\" tabIndex=\"-1\">\r\n <img name=\"imnmark\" title=\"\" ShowOfflinePawn=\"1\" class=\"ms-hide\" src=\"\/_layouts\/15\/images\/spimn.png?rev=23\" alt=\"User Presence\" sip=\"user@domain.com\" id=\"imn_1,type=sip\"><\/img>\r\n <\/a>\r\n <span>\r\n <img style=\"width:62px; height:62px; border:none\" src=\"http:\/\/userimageurl\" alt=\"User\"><\/img>\r\n <\/span>\r\n <\/span>\r\n <\/div>\r\n <div class=\"ms-floatLeft ms-descriptiontext\">\r\n <span class=\"ms-verticalAlignTop ms-noWrap ms-displayInlineBlock\">\r\n <span class=\"ms-imnSpan\">\r\n <a href=\"#\" onclick=\"IMNImageOnClick(event);return false;\" class=\"ms-imnlink ms-spimn-presenceLink\">\r\n <span class=\"ms-spimn-presenceWrapper ms-imnImg ms-spimn-imgSize-10x10\">\r\n <img name=\"imnmark\" title=\"\" ShowOfflinePawn=\"1\" class=\"ms-spimn-img ms-spimn-presence-disconnected-10x10x32\" src=\"\/_layouts\/15\/images\/spimn.png?rev=23\" alt=\"User Presence\" sip=\"user@domain.com\" id=\"imn_2,type=sip\"><\/img>\r\n <\/span>\r\n <\/a>\r\n <\/span>\r\n <span class=\"ms-noWrap ms-imnSpan\">\r\n <a href=\"#\" onclick=\"IMNImageOnClick(event);return false;\" class=\"ms-imnlink\" tabIndex=\"-1\">\r\n <img name=\"imnmark\" title=\"\" ShowOfflinePawn=\"1\" class=\"ms-hide\" src=\"\/_layouts\/15\/images\/spimn.png?rev=23\" alt=\"User Presence\" sip=\"user@domain.com\" id=\"imn_3,type=sip\"><\/img>\r\n <\/a>\r\n <span>User<\/span>\r\n <\/span>\r\n <\/span>\r\n <\/div>\r\n<\/div><\/pre>\nPresence Only<\/h2>\n
<span class=\"ms-imnSpan\">\r\n <a href=\"#\" onclick=\"IMNImageOnClick(event);return false;\" class=\"ms-imnlink ms-spimn-presenceLink\">\r\n <span class=\"ms-spimn-presenceWrapper ms-imnImg ms-spimn-imgSize-10x10\">\r\n <img name=\"imnmark\" title=\"\" ShowOfflinePawn=\"1\" class=\"ms-spimn-img ms-spimn-presence-disconnected-10x10x32\" src=\"\/_layouts\/15\/images\/spimn.png?rev=23\" alt=\"User Presence\" sip=\"user@domain.com\" id=\"imn_1,type=sip\"><\/img>\r\n <\/span>\r\n <\/a>\r\n<\/span><\/pre>\nPicture Only<\/h2>\n
<div>\r\n <div>\r\n <div class=\"ms-tableCell\">\r\n <span class=\"ms-imnSpan\">\r\n <a href=\"#\" onclick=\"IMNImageOnClick(event);return false;\" class=\"ms-imnlink ms-spimn-presenceLink\">\r\n <span class=\"ms-spimn-presenceWrapper ms-spimn-imgSize-8x72\">\r\n <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=\"user@domain.com\" id=\"imn_1,type=sip\"><\/img>\r\n <\/span>\r\n <\/a>\r\n <\/span>\r\n <\/div>\r\n <div class=\"ms-tableCell ms-verticalAlignTop\">\r\n <div class=\"ms-peopleux-userImgDiv\">\r\n <span class=\"ms-imnSpan\">\r\n <a href=\"#\" onclick=\"IMNImageOnClick(event);return false;\" class=\"ms-imnlink\" tabIndex=\"-1\">\r\n <img name=\"imnmark\" title=\"\" ShowOfflinePawn=\"1\" class=\"ms-hide\" src=\"\/_layouts\/15\/images\/spimn.png?rev=23\" alt=\"User Presence\" sip=\"user@domain.com\" id=\"imn_2,type=sip\"><\/img>\r\n <\/a>\r\n <span class=\"ms-peopleux-imgUserLink\">\r\n <span class=\"ms-peopleux-userImgWrapper\" style=\"width:72px; height:72px\">\r\n <img style=\"min-width:72px; min-height:72px; clip:rect(0px, 72px, 72px, 0px); max-width:72px\" src=\"http:\/\/userimageurl\" alt=\"User\"><\/img>\r\n <\/span>\r\n <\/span>\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div><\/pre>\n