List view render using JSLink with Fabric UI

We will see how to change the look and feel of the List View using JS Link , For this I am using Tasks list and I have created a view called “myview”.

I am going to achieve the functionality using JQuery, Fabric UI, On Call out I am showing body of the task.

Step 1:

here ,we need to load required js files by using below snippet.

Step 2:

load required css files (in my case I am loading fabric UI Css)

Step 3: 

write your code to render your view .

Complete JS File will look as follows,

var imported1 = document.createElement('script');
imported1.src = 'https://code.jquery.com/jquery-3.3.1.min.js';
document.head.appendChild(imported1);

var imported2 = document.createElement('script');
imported2.src = 'https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/js/fabric.min.js';
document.head.appendChild(imported2);

var cssId = 'myCss';
if (!document.getElementById(cssId)) {
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.id = cssId;
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css';
link.media = 'all';
head.appendChild(link);
}

var cssId = 'myCss1';
if (!document.getElementById(cssId)) {
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.id = cssId;
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.2.0/css/fabric.components.min.css';
link.media = 'all';
head.appendChild(link);
}


(function(){

var overrideCtx={};
overrideCtx.Templates={};
overrideCtx.Templates.Header="<table id='example' class='ms-Table' cellspacing='0' width='100%'>"+
"<thead><tr><th></th><th>Task Name</th><th>Status</th><th>Date</th><th>Percent Complete</th><th>Priority</th></tr></thead>"+
"<tbody>";

overrideCtx.Templates.Item=dataTemplate;

overrideCtx.Templates.Footer="</tbody></table>";
overrideCtx.OnPostRender = [];
overrideCtx.OnPostRender.push(function(){dataTableOnPostRender(); });

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

function dataTemplate(ctx)
{
var callOutText="";
if(ctx.CurrentItem.Body!=""){
callOutText="<div class='ms-CalloutExample'>"+
"<div class='ms-Callout is-hidden'>"+
"<div class='ms-Callout-main'>"+
"<div class='ms-Callout-inner'>"+
"<div class='ms-Callout-content'>"+
"<p class='ms-Callout-subText'>"+ctx.CurrentItem.Body+"</p>"+
"</div>"+

"</div>"+
"</div>"+
"</div>"+
"<div class='ms-CalloutExample-button'>"+
"<span><i class='ms-Icon ms-Icon--InfoSolid' aria-hidden='true'></i></span>"+
"</div>";
}

return "<tr><td><span style='display:none;'>"+ ctx.CurrentItem.ID +"</span>"+
callOutText+
"</td><td>"+
ctx.CurrentItem.Title +"</td><td>"+ ctx.CurrentItem.Status +"</td>"+
"<td>"+ctx.CurrentItem.DueDate+"</td>"+
"<td>"+ctx.CurrentItem.PercentComplete+"</td>"+
"<td>"+ctx.CurrentItem.Priority+"</td>"+
"</tr>";

}

function dataTableOnPostRender()
{
var CalloutExamples = document.querySelectorAll(".ms-CalloutExample");
for (var i = 0; i < CalloutExamples.length; i++) {
var Example = CalloutExamples[i];
var ExampleButtonElement = Example.querySelector(".ms-CalloutExample-button .ms-Icon");
var CalloutElement = Example.querySelector(".ms-Callout");
new fabric['Callout'](
CalloutElement,
ExampleButtonElement,
"right"
);
}

var TableElements = document.querySelectorAll(".ms-Table");
for (var i = 0; i < TableElements.length; i++) {
new fabric['Table'](TableElements[i]);
}
}

Output will looks as follows

Thanks !

Related Post