Custom List View by Using The JS Link Property

8/22/2020 Custom list view by using the JS Link property.
MICROSOFT PLAYGROUND
debug.write("Architecture, Azure, Visual Studio, Azure DevOps, ALM and DevOps");
 MENU
Custom list view by using the “JS Link” property.

 by Maik van der Gaag  August 15, 2014
Customizing a list view could be done by using XSLT in previous version of SharePoint. In
SharePoint 2013 this van be done by using the “JS Link” functionality. The “JS Link”
functionality is included in list view web parts of SharePoint.
You can use this property for adding speci c JavaScript les. You can add 1 or multiple
when you want to add multiple you will have to separate them using the “|” symbol. On the
internet you can nd a lot of articles on how to use the “JS Link” functionality. Normally the
“JS Links” functionality is used to adjust the rendering of a speci c eld type in my
scenario I had to change the complete list view.
In this article I will show you how to de ne a custom list view using the “JS Link”
functionality according to a speci c scenario: On project sites we want to follow the status
of site migrations (for example SharePoint sites). The status of these migrations can be
saved within SharePoint lists:
Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use.
To nd out more, including how to control cookies, see here: Cookie Policy
Close and accept

Privacy - Terms
https://msftplayground.com/2014/08/custom-list-view-by-using-the-js-link-property/ 1/22
In this list you will need to have two elds:
Title: The title of the site that needs to be migrated.

Status: The status of the migration. In this example we will have three statuses: “Not
started”, “In progress” en “Done”.
Using this list we can manage the status of the migrations. At this moment we only have to
add functionality to see the migration status of all sites in one view without the use of a
farm solution.
In the above image you can see the same list but a altered view with the use of “JS LInk”.
This view shows a doughnut view with three different colours. So how can we achieve this
without creating a full trust solution.
First off all we searched for a JavaScript library to be able to create a doughnut chart. We
choose the following library:
Chart.js – http://www.chartjs.org
Close and accept
Privacy - Terms
Now that we have a library we can start writing a JavaScript le that we need to load within
the “JS Link” property. Within the JavaScript le we rst off all register a namespace to not
get in the way of other JavaScript code besides that we also de ne a view variables that we
can use within the namespace.
1 var migrationStatus = migrationStatus || {};

2
3 migrationStatus.InProgressString = 'In progress';
4 migrationStatus.DoneString = 'Done';
5 migrationStatus.NotStartedString = 'Not started';

6 migrationStatus.ListName = 'Migration';
7 migrationStatus.ItemsDone = 0;
8 migrationStatus.ItemsInProgress = 0;
9 migrationStatus.ItemsNotStarted = 0;
To be able to de ne template you will need to de ne speci c overrides. These overrides can
be de ned by using the “RegisterTemplateOverrides” method on the
“SPClientTemplates.TemplateManager” object. This method needs one object that de nes
what needs to be overridden. We will de ne this within the method:
“CustomizeViewRendering”.
1 // Create a function for customizing the view rendering of the list

2 migrationStatus.CustomizeViewRendering = function () {
3 var migrationStatusContext = {};
4 migrationStatusContext.Templates = {};
5 migrationStatusContext.Templates.View =
6 migrationStatus.RenderMigrationViewBodyTemplate;
7 migrationStatusContext.OnPostRender = migrationStatus.OnMigrationViewPostRender;
8 SPClientTemplates.TemplateManager.RegisterTemplateOverrides(migrationStatusContext);
};
In the “migrationStatusContext” object needs to be de ned which rendering methods needs

to be overridden. As you can see in the above snippet the “OnPostRender” and the
“Templates.View” will be overridden. These methods we will discuss in the upcoming
paragraphs.
Note:When
Privacy & Cookies:you
Thisoverride the rendering
site uses cookies. methods,
By continuing this
to use this will be
website, youfor every
agree list
to their view
use. on a page. If
you want to override the view rendering of one speci c list you will have to build in a check if
you are performing the action on the correct list. Close and accept
Privacy - Terms
1 migrationStatus.RenderMigrationViewBodyTemplate = function (ctx) {

2 if (ctx.Templates.Body == '') {
3 return RenderViewTemplate(ctx);
4 }
5
6 if (ctx.ListTitle == migrationStatus.ListName) {
7 var listData = ctx.ListData;
8
9 for (var idx in listData.Row) {
10 var listItem = listData.Row[idx];

11
12 if (listItem.Status == migrationStatus.InProgressString) {
13 migrationStatus.ItemsInProgress++;
14 } else if (listItem.Status == migrationStatus.NotStartedString) {

15 migrationStatus.ItemsNotStarted++;
16 } else if (listItem.Status == migrationStatus.DoneString) {
17 migrationStatus.ItemsDone++;
18 }
19 }
20
21 var htmlOutput = [];
22 htmlOutput.push('<div id="listData"><a href="' + ctx.listUrlDir + '"> View
23 this list</a></div>');
24 htmlOutput.push('<div id="migrationstatusView"
25 style="height:400px;width:400px;margin-top:10px;float:left;margin-
26 bottom:10px;display:block;">');
27 htmlOutput.push('<canvas id="myChart" width="250" height="250"></canvas>');
28 htmlOutput.push('<div id="chartLegend" style="width:150px;float:right;" />');

29 htmlOutput.push('</div>');
30
31
32 var retVal = htmlOutput.join('');
33 return retVal;
34 }
35 else {
return RenderViewTemplate(ctx);
Privacy & Cookies:}This site uses cookies. By continuing to use this website, you agree to their use.
To nd out more,
} including how to control cookies, see here: Cookie Policy
The “migrationStatus.RenderMigrationViewBodyTemplate” function needs to be used

Close andtoaccept
adjust the view. This method also receives the context (ctx) object in which all informationPrivacy - Terms
regarding the context (in this example list) is saved. From this context we can retrieve all of
the list data.
But rst we will have to check if the body of the template isn’t empty. When it is empty we
will have to call the default renderer. After that we can check if the list we are performing
the actions for is our migration list: “ctx.ListTitle == migrationStatus.ListName” if this isn’t
the case we also call the default rendering function:
1 return RenderViewTemplate(ctx);
When this list is our list we count all of the statuses and place them in the speci c
variables. When all this is done we write out the HTML we need for the rendering of the
graph and legend and we return this.
De “PostRender” function will be called as last. In this function the graph will be loaded with
the correct data and besides that we will also load the legend of the graph.
1 migrationStatus.OnMigrationViewPostRender = function (ctx) {
2 if (ctx.ListTitle == migrationStatus.ListName) {
3
4 var pieData = [
5 {
6 value: migrationStatus.ItemsNotStarted,
7 color: "#F7464A",
8 highlight: "#FF5A5E",
9 label: migrationStatus.NotStartedString
10 },
11 {
12 value: migrationStatus.ItemsDone,
13 color: "#46BFBD",
14 highlight: "#5AD3D1",
15 label: migrationStatus.DoneString
16 },
17 {
18 value: migrationStatus.ItemsInProgress,
19 color: "#FDB45C",
To 20 highlight:
nd out more, including how to control "#FFC870",
cookies, see here: Cookie Policy
21 label: migrationStatus.InProgressString
Close and accept
22 }];
Privacy - Terms
23
24 var options = {
25 //Boolean - Whether we animate the rotation of the Doughnut
26 animateRotate: true,
27 //String - A legend template
28 legendTemplate: '<ul style="list-style-type:none;" class="

29 <%=name.toLowerCase()%>-legend"><% for (var i=0; i<segments.length; i++){%><li><span
30 style="width:20px;height:10px;display:block;background-color:
31 <%=segments[i].fillColor%>"></span><%if(segments[i].label){%><%=segments[i].label%>
32 <%}%></li><%}%></ul>'
33 };
34
35 //get the chart element and setup the doughnut chart
36 var ctxChart = document.getElementById("myChart").getContext("2d");
37 var myPie = new Chart(ctxChart).Doughnut(pieData, options);

38
39 //generate the legend html
var legend = document.getElementById("chartLegend");

legend.innerHTML = myPie.generateLegend();
}
};
In the “PostRender” function we also need to check if we are performing the action for the
correct list.
The nal thing we need to adjust to the JavaScript le is adding the following line:
1 migrationStatus.CustomizeViewRendering();
This line of code will be called on the moment the le is loaded and by calling this function
is will make sure that the overrides for the list views will be registered.
Know that the les are ready we only need to specify the les in the “JS Link” property of the
list view.
Close and accept

Privacy - Terms
Dave
December 27, 2015 at 16:08
I got the to work but my animated donut is all “Green” Do I need to do something in the code
to get it to display Red, and Yellow as well? Thanks!
REPLY
Dave
December 27, 2015 at 17:56
[removed source code for readability]

REPLY
Maik van der Gaag

December 29, 2015 at 18:55
Hi,
Dave you should check with the debugger if the values in the array are lled
correctly. My guess is because you only have one colour the array isn’t lled
correctly.
Regards,
Maik
REPLY
Dave
December 31, 2015 at 11:28
I give up. I have spent the past two days trying to gure out why this tutorial is not working
for me.
Privacy WhenThis
& Cookies: mysite
“chart” renders
uses cookies. it only gives
By continuing to use me the “Done”
this website, status
you agree from
to their use. my “Migration” list.
I am to much of “newbie” at JSLink to know how to debug this situation. I need some help
please. Do I need to change the code in ‘Chart.js’. When I open up the code in debugger the
Close and accept
only clues I have is it says “pieData”, “options”, “ctxChart”, “myPie” and “legend” in the Privacy - Terms
In the “JS Link” we have speci ed the following value:
1 /siteassets/Migration/Chart.js|/siteassets/Migration/MigrationStatus.js
/siteassets/Migration/Chart.js: JavaScript library for the generation of graphs.

/siteassets/Migration/MigrationStatus.js: JavaScript le for the list view.
GitHub Repository:
https://github.com/MaikvanderGaag/MigrationStatus
Video from Webucator with a complete outline of my blog post:
Custom List View by Using the JS Link Property
Close and accept

Privacy - Terms
Share this:
 Twitter  Facebook
Posted in Javascript • Tagged Javascript, List View, SharePoint 2013
44 Replies to “Custom list view by using the “JS Link” property.”
Jason
December 7, 2015 at 19:42
Thanks for the tutorial. It was very helpful. I have this implemented for a site and it has the
same list used twice on one page. The problem is since it looks for list title, it is trying to run
this code for both instances of the list view. I only have the JSlink active on the one view,
but it is still treating both instances the same. Any ideas?
REPLY
Maik van der Gaag

December 8, 2015 at 14:20
Hi Jason,
I think there is a option for this. You will have to check with the ‘ctx’ attribute if there
is a option to lter options out.
REPLY
Close and accept

Privacy - Terms
“Watches” window are all “unde ned” As I said, I have followed the video and
documentation and am using the JavaScript code and Chart.js code. Please help me
understand what I need to “modify” in each code to make this work. Any help in
understanding why this is not working would be greatly appreciated for this “newbie”. I am
at a loss…. Thanks!!
REPLY
Maik van der Gaag

December 31, 2015 at 14:36
Hi Dave, make sure the string values are exactly the same as the values in your
status column. Maybe you have a space in front or at the end of the status values.
REPLY
Dave
December 31, 2015 at 17:50
Maik, that did the trick!!! In the code above ‘In progress’ needs to be ‘In Progress’ and
‘Not started’ needs to be “Not Started’ in order to match up with what SharePoint
names them in the “Status” column. Thanks!!
REPLY
Efrain
September 2, 2016 at 01:32
Did you xed this code, I’m trying to apply it but not luck.
REPLY
Close and accept

Wal Privacy - Terms
June 7, 2016 at 20:41
I followed your example and recreated MigrationStatus.js , Migration list, and download
Chart.js on my SharePoint site but I am not able to get it to work. Is there a location where I
can download MigrationStatus code to ensure I do not have typos?
REPLY
Maik van der Gaag

June 8, 2016 at 13:23
Hi,
No there isn’t maybe your problem is related to the problem in Dave comments
above.
With regards,
Maik
REPLY
Mubashshira
August 19, 2016 at 16:23
Hi,
i can only see the View this list url on the page. i tried debugging the page but couldnt see
any error or anything else unusual. Everything is same including column names except for
the ListName. Can you please suggest what has gone wrong.
Thanks,
REPLY
Privacy & Cookies:

Maik vanThis site uses cookies. By continuing to use this website, you agree to their use.
der Gaag
To nd outAugust
more, including how
31, 2016 at to control cookies, see here: Cookie Policy
15:13
Make sure the status items are the samen and correctly cased. Close and accept
Privacy - Terms
REPLY
Jhunior
August 26, 2016 at 18:28
Same thing here Mubashshira.. any other information ?

REPLY
Maik van der Gaag

August 31, 2016 at 15:12
Make sure the status items are the samen and correctly cased.
REPLY
Efrain
Hi, I’ve been struggling with this code for a couple of days, nally it is running but not show
anything, debuggin the code i found this: ReferenceError: Chart is not de ned at
Array.migrationStatus.OnMigrationViewPostRender, could you please help me with this
issue.
Regards
REPLY
Maik van der Gaag

September
Privacy & Cookies: 5, site
This 2016uses
at 14:41
cookies. By continuing to use this website, you agree to their use.
Hi Efrain,
Close and accept
Privacy - Terms
Problems can occur because of different things other versions of SharePoint or JS

versions. The version we used is explained on the site. Maybe you could try the Fix
Dave applied and is described in the Comments.
REPLY
Vusi
October 3, 2016 at 14:08
This looks like a good solution, pity it just doesn’t work on my page. Looked at the developer
tool to see if the scripts load, but they don’t even load. I’m really not sure what the problem
could be. I also tried reference the Chart.js le from their instead, that didn’t work either.
Please help anyone
REPLY
Maik van der Gaag

October 4, 2016 at 08:33
Hi Vusi,
First things rst, you will have to make the script load rst. Is the le checked-in and
referenced correctly?
REPLY
Vusi
October 4, 2016 at 12:02
Hi Maik
the referencing to the js les was correct, but it would seem the js link property just
doesn’t
To nd out more, work
including howonto me, atcookies,
control all. I put
seethe
here:scripts in script editor webparts
Cookie Policy and there was
something even the it was a blank screen with just page numbers. I put some alerts
Close and accept
Privacy - Terms
for testing everything seems cool. I’m really not sure what could be wrong. Please
assist.
REPLY
Maik van der Gaag

October 4, 2016 at 12:17
Hi Vusi,
Where did you save the JS le for JS Link? Did you try the SiteAssets library
or Style Library? Also make sure that all properties de ned are correct (Case
sensitive and all).
What is the output on your page at this moment.
REPLY
Vusi
October 4, 2016 at 12:22
I have a Document Library where I save my scripts. Currently it shows a blank

page with the text “View this list” and paging numbers at the bottom. That’s
only when I use the script editor webpart instead of the js link property. js link
property doesn’t even load the scripts. Is it maybe my sharepoint version? I’m
on SharePoint 2013 standard on premise.
Vusi
October 5, 2016 at 08:29
I’m really convinced now that location of the le is really a problem but I
really don’t where I should put the les. I tried masterpage gallery, site assets
library
To nd out more, including howand site cookies,
to control script library
see here:and still
Cookie no luck. But based on
Policy the responses I
see that location of the le is very important.
Close and accept
Privacy - Terms
Maik van der Gaag

October 4, 2016 at 12:38
Try a different location for your scripts, a site assets library and if that
doesn’t work the style library. I can remember that I hade problems using a
document library.
REPLY
Vusi
October 4, 2016 at 15:08
I have no luck still. When I use script editor I see it loads blank, the chart is
just not loading. I just wonder if there’s more stuff to do when downloading
that Chart.js or it’s plug and play??
Maik van der Gaag

October 4, 2016 at 15:51
Hi Vusi, I would stop using the script editor and place the script les in a
siteassets library. When loaded in the correct order everything would
have to work correctly, if you also used the right parameters.
Vusi
October 19, 2016 at 08:15
Hisite
Privacy & Cookies: This Maik
uses cookies. By continuing to use this website, you agree to their use.
I have managed to get the scripts to load, it needed to be under master page
galleries and make sure you choose javascript display templateClose
in theand accept
properties of the le you uploading. But the charts are still not showing, andPrivacy - Terms
no error. I just a blank space where the chart should be displaying. I checked
the eld names, it is correct. what else is missing??
Maik van der Gaag

October 20, 2016 at 09:34
Hi Vusi,
That’s great, you will have to try the Internet explorer debugger and make
sure that every thing is con gured correctly according to your data in the
list and the saved values.
Ankit
November 12, 2016 at 19:38
Hi where can I download MigrationStatus.js?

REPLY
Maik van der Gaag

November 14, 2016 at 10:33
You can’t you will have to do a little bit of work by copying the source code.
REPLY
Maik van der Gaag

November
Privacy & Cookies: 14,uses
This site 2016 at 10:54By continuing to use this website, you agree to their use.
cookies.
I have setup a github repository for the le:
Close and accept
https://github.com/MaikvanderGaag/MigrationStatus
Privacy - Terms
REPLY
Ankit
November 15, 2016 at 04:00
Thank you very much. I have copied the le and was able to execute it. I can test
“RenderMigrationViewBodyTemplate” function is working. But unable to execute
– “OnMigrationViewPostRender”. I was not able to add htmlOutput.push to see if
I’m in that PostRender method.
I copied Chart.js from CDN, not worked; I’ve downloaded multiple les and
uploaded to my SharePoint, not worked. I tried to point to direct CDN link and not
worked.
I’m not able to instantiate the Chart object. Do you have tips on how to debug
any further? Or can you do a little consulting to con gure it? Please
Can you give me a pointer?
REPLY
Maik van der Gaag

November 16, 2016 at 09:53
Hi Ankit,
What is the error when you open the F12 Developer tools in Edge or
Internet Explorer?
Vusi
November 17, 2016 at 09:08
Hi Ankit
I had similar problems. But after sometime struggling to get
the scripts to
even load on the page. I bumped into the following link:
Close and accept
https://www.dynamics101.com/jslink-sharepoint-2013-get-started/ , which
Privacy - Terms
explained exactly where to load your js les. You need to load them on the
masterpage gallery as that provides with so many properties on le upload.
You need to tick properties like your Content Type(Javascript content type, in
this case), Target control type(View in this case), Target scope(which is the
url to the page you want this to work on) and Standalone(Override in this
case). Once that is done, you will be able to load your scripts on to the page.
I hope this helps.
Maik van der Gaag

November 18, 2016 at 08:58
Hi Vusi,
Thank you for the reply. It is still a strange issue, when I made the script I
have tested it in multiple libraries and never had any issues. Hope this
helps Ankit.
Mahesh kumar Ch
November 27, 2016 at 20:52
How can we implement this in sharepoint online, because there we can not give JS link in
the web part?
REPLY
Candelaria
March 7, 2017 at 12:00
Privacy
Its di& Cookies:
cult toThis site uses
acquire cookies. By continuing
knowledgeable folksto use this website,
during you agree to their use.
this topic,
but the trutyh is could be seen as guess what happens you are referring to!
Thanks Close and accept
Privacy - Terms
REPLY
Sameen Hewage
August 31, 2017 at 07:16
Showing error for me – “Uncaught TypeError: migrationStatus.CustomizeFieldRendering is

not a function”
REPLY
Maik van der Gaag

August 31, 2017 at 07:47
You should look at you javascript my gues is that it contains a error as it is not
recognizing the function.
REPLY
Adrian Gillem
Still getting the View this List error on SP 2013 environment. I’m correctly referencing the
le using JSLink and have placed all les in the master gallery folder. Any ideas?
REPLY
Maik van der Gaag

Hard to tell from here. Did you get any messages within the Debugging tools in Edge
To nd outor Chrome?
more, including how to control cookies, see here: Cookie Policy
REPLY
Close and accept
Privacy - Terms
Clayton Barrozo De Oliveira

October 25, 2017 at 23:34
Hi Maik,
Would this work on IE 11?
Thanks,
Clayton
REPLY
Maik van der Gaag

October 30, 2017 at 11:50
My guess is that it should work on IE11 but I do not know for sure.
REPLY
Simon W
June 15, 2018 at 02:09
Hi Maik
I have tried to get this to work for quite a while now using your sample list, have checked
the items previously mentioned but it just won’t render.
Is there something I should be checking for?
Thanks in Advance
REPLY
Leave a Reply
ToYour email
nd out more, address
including howwillto not becookies,
control published. Required
see here: elds are marked *
Cookie Policy
Close and accept

Comment
Privacy - Terms
Name *
Email *
Website
POST COMMENT
This site uses Akismet to reduce spam. Learn how your comment data is processed.
Search … 
Subscribe
Close and accept

Email Address
Privacy - Terms
SUBSCRIBE
Top Posts
Trigger a Pipeline from an Azure DevOps Pipeline
Combining SonarQube and Azure DevOps
Version number counter for Azure DevOps
Adding your Client IP to the Azure SQL server rewall
Trace listeners (Logging) with Application Insights
Categories
Select Category
Recent Comments
Maik van der Gaag on Combining SonarQube and Azure DevOps
Millie Frank on Kubernetes (AKS) attached to Azure Storage (Files)
SonarQubeAgent on Combining SonarQube and Azure DevOps
yashwanth on Administrating and publishing Power BI resources via Azure DevOps
Sandra on Combining SonarQube and Azure DevOps
Tags
Active Directory, ALM, API, Application Insights, App Services, ARM, ASP.net, Azure,
Azure Active Directory, Azure App Services, Azure DevOps, Azure Functions, C#, Certi cate, CI,
Privacy & Cookies: This
Deployment, site usesTools,
Developer cookies.Development,
By continuing to use this website,
DevOps, you agree to their
Documentation, use.
Error, Governance,
Hybrid Connection, Identity, Installation, Javascript, Logic Apps, O ce, Powershell, Release,
Release Management, Review, Search, Security, Service Pack, SharePoint, SharePoint
Close2007,
and accept
SharePoint 2010, SharePoint 2013, SharePoint Designer, TFS, Troubleshouting, Visual Studio, Privacy - Terms

Custom List View by Using The JS Link Property - PDF

Uploaded by

Copyright:

Available Formats

You might also like

Custom List View by Using The JS Link Property - PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Custom List View by Using The JS Link Property - PDF

Uploaded by

Copyright:

Available Formats

8/22/2020 Custom list view by using the JS Link property.

Custom list view by using the “JS Link” property.

Close and accept

In this list you will need to have two elds:

Title: The title of the site that needs to be migrated.

1 var migrationStatus = migrationStatus || {};

5 migrationStatus.NotStartedString = 'Not started';

1 // Create a function for customizing the view rendering of the list

In the “migrationStatusContext” object needs to be de ned which rendering methods needs

1 migrationStatus.RenderMigrationViewBodyTemplate = function (ctx) {

7 var listData = ctx.ListData;

10 var listItem = listData.Row[idx];

14 } else if (listItem.Status == migrationStatus.NotStartedString) {

16 } else if (listItem.Status == migrationStatus.DoneString) {

28 htmlOutput.push('<div id="chartLegend" style="width:150px;float:right;" />');

The “migrationStatus.RenderMigrationViewBodyTemplate” function needs to be used

1 migrationStatus.OnMigrationViewPostRender = function (ctx) {

28 legendTemplate: '<ul style="list-style-type:none;" class="

37 var myPie = new Chart(ctxChart).Doughnut(pieData, options);

var legend = document.getElementById("chartLegend");

Close and accept

[removed source code for readability]

Maik van der Gaag

In the “JS Link” we have speci ed the following value:

/siteassets/Migration/Chart.js: JavaScript library for the generation of graphs.

Video from Webucator with a complete outline of my blog post:

Close and accept

Posted in Javascript • Tagged Javascript, List View, SharePoint 2013

44 Replies to “Custom list view by using the “JS Link” property.”

Maik van der Gaag

Close and accept

Maik van der Gaag

Close and accept

June 7, 2016 at 20:41

Maik van der Gaag

Privacy & Cookies:

Same thing here Mubashshira.. any other information ?

Maik van der Gaag

Maik van der Gaag

Problems can occur because of different things other versions of SharePoint or JS

Maik van der Gaag

Maik van der Gaag

I have a Document Library where I save my scripts. Currently it shows a blank

Maik van der Gaag

Maik van der Gaag

Maik van der Gaag

Hi where can I download MigrationStatus.js?

Maik van der Gaag

Maik van der Gaag

Maik van der Gaag

Maik van der Gaag

Showing error for me – “Uncaught TypeError: migrationStatus.CustomizeFieldRendering is

Maik van der Gaag

Maik van der Gaag

Clayton Barrozo De Oliveira

Maik van der Gaag

Close and accept