Using CSR in List Items (SharePoint server 2013, 2016)

All of us have become very advanced users and of course we use various messengers for calls, such as Skype and many others, so users need to make a call. In my case, the contact information was in the SharePoint list, i.e. there was all the information including the email and of course the phones. In the list view, I see all users and their phones, but how do I call the phone number with a simple click, the more Skype is active? To help me came "CSR".

How is create of this solution, lets get started!

In my list 2 columns "Title" and "CellPhone", I was add 5 items (Users):


We need to add 2 items in library "Site Assets" "jquery-2.1.3.min.js" and picture size 16*16 (Metro-Phone-Blue-16.png), then create JavaScript-file CellPhone.js, open it and add code, where we using "Clien-Side rendering" and save it

<script type="text/javascript" src="/sites/test/SiteAssets/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
(function () { 
    var linkFilenameFiledContext = {}; 
    linkFilenameFiledContext.Templates = {}; 
    linkFilenameFiledContext.Templates.Fields = { 
        "CellPhone": { "View": linkFilenameFiledTemplate } 
    };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(linkFilenameFiledContext); 
})(); 

function linkFilenameFiledTemplate(ctx) {
    var title = ctx.CurrentItem["CellPhone"];
    var phone = ctx.CurrentItem["CellPhone"];
    title = title.replace(/\.[^/.]+$/, "") 
    if (phone != '') {
        return title + " <a href=" + "'callto: +7 " + phone + "'><img src='/sites/test/SiteAssets/Metro-Phone-Blue-16.png'/ title='Call number'></a>"; 
    } 
}
</script>

and save it:


"Add a Web Part" -> Category "Media and content" -> Add "Content Editor":



Content Editor "Edit Web Part"



Add script "Content link" url, your JavaScript-file('/sites/test/SiteAssets/CellPhone.js') and "Apply"



Refresh Page your list and we will see:



Click the button phone, call to Skype:



Happy Coding!