Thanks to those who attended my session today at the Collab365 Global Conference.
As stated in the session, normally when you think about enhancing the usability of your SharePoint site, JSLink isn’t the first thing that comes to mind.
The idea for the session came about as I was putting together my GTD Dashboard site template that I presented at the SPBiz conference earlier this summer. I wanted to implement some functionality to improve the usability of my GTD Dashboard site for myself and others who downloaded the template. Since I wanted to make sure everything would work in Office 365, as well as work without the publishing feature needing to be activated, I decided to use client side rendering via JSLink. And so I expanded on that and added a few new things for my Collab365 session.
If you’d like to download all the JavaScript, CSS, and image files that I demonstrated in the session, click the link below:
Download Files -> https://1drv.ms/f/s!AvujwBiXKUSX3Qu7NlrPgHFNJgJF
In case you missed the session, here are the slides:
And here is the YouTube video:
Hello Wendy, is it possible to watch your session on youtube or some place similar?
Thanks, Jakub
Hi Jalkub, yes I plan to upload the session to YouTube and then update this post. I tried uploading it yesterday and was having issues. Check back later today or tomorrow.
The article has been updated with the full video recording embedded.
HI Wendy
Thanks for the contributions! Your session was 3rd most popular of all. Only the Keynotes beat it. Well done!
Thanks Mark! Usability in SharePoint continues to be a hot topic. Thanks so much for all the hard work you and your team put in to make this conference a success!
Hi Wendy
Great article
Somehow I can’t get percentcomplete.js to work on editform on a Office365 site.
I think getElementById(‘inpPercentComplete’) doesn’t return anything.
Any ideas ?
Thank you !
Sorin
Hi Sorin, as long as you haven’t changed the name of the control in the return clause, it should be able to find it. Have you used developer tools to inspect the markup? I’m using this same script on my Office 365 site without any issue.
Hi Wendy , many thanks for your session at Collab365 . I am using one of the script you showed in SharePoint Online , but it does not work. Is there anything else to be done when using JSLink in SharePoint Onlie , many thanks in advance for your respond ! Aria
Hi again Wendy, the problem was due to browser chache which did not get the latest name of a coloumn in my list , now it working as you showed in the demo , once again many thanks for great session ! kind regards
Great, I’m glad it’s working for you!
Hi Wendy,
I am having problems with the ColorCodeDate.js file. the code is incorrectly formatting the date field as US English even though my locale is British English.
I tried to change the toLocaleDateString() to
toLocaleDateString(‘en-GB’) , but it is still not working. any ideas?
BTW. I bought your Black Magic Solutions for White Hat SharePoint. Awesome..
Thanks
Hi Luis, I’m not sure why using the British English locale isn’t formatting the date properly for you. One solution may be to extract the day, month, and year portion of the date and concatenate them in the proper order (day first, then month, then year). The first answer to this post may point you in the right direction: http://stackoverflow.com/questions/1056728/where-can-i-find-documentation-on-formatting-a-date-in-javascript?answertab=votes#tab-top. Hope it helps!
Hi Wendy,
Great article it was really helpful as I was doing for first time..Can u help me out in building count down timer on custom list using CSR JSLink.
Thanks for the feedback Desh. Unfortunately I don’t have any code sample handy on building a countdown timer with JSLink. Have you tried the SharePoint or StackExchange message boards?
Hi Wendy
Is percentcomplete.js working now on O365 ?
I’ve tried it with a new Task list and on edit it’s not showing the range control. Any ideas ?
Hi Sorin, yes the percent complete script was working on O365 the last time I tried it. Not sure what could be going on, can you be more specific? Are you getting an error message? What are you seeing instead of the range control?
Hi Wendy! Is there a way to “re-execute” the JS Link code more than once without the whole page reload? Consider a scenario: we present some initial data in the list updated by the JS Link code (first time JS Link code execution). Then we make an async-call to an external web service (lets’ say $.Get), and once the new data received, we’d like to refresh the list/re-execute the same JS Link code but now using the new data (second time JS Link code execution). Because if the call to RenderContext() is made from the async-call success handler (success for the $.Get), JS Link code does not work at all – page goes blank (but it works perfectly fine for the first time JS Link code execution).
Hi Wendy,
It looks like the link to the files is no longer active. Is there any way I can get a download link for these files?
Thanks,
NV
Not sure what happened to the original link, but I created a new one https://1drv.ms/f/s!AvujwBiXKUSX3Qu7NlrPgHFNJgJF and also updated the article to reflect the new link.
Hi Wendy,
Continue to Nu Vang comment, could you please provide a new link to download the files.
Try this link https://1drv.ms/f/s!AvujwBiXKUSX3Qu7NlrPgHFNJgJF. I also updated the article to reflect new link. Thanks!
The new link is fine.
Thank you,
Shady
AWESOME! and Very helpFull…Thanks
Hi Wendy
Thank you so much for this insightful article. And even providing all the files as well. Really appreciated.
I would like to know if the js code will work even if you aren’t using Office 365?
Hi Marlin, yes it will work on SharePoint on-premises as well. It has been tested with SharePoint 2013.
Thanks Wendy!
Hi Wendy,
Thanks for this great presentation. The download link, while it takes me to your onedrive location, it won’t download the zip file no matter what browser I tried. Maybe the access token from the link expired. Would you mind sharing it under a different location?
Row background works fine in IE but in Chrome it works only on page load. If I use sorting or filtering than it will not work.
Anyone facing similar issues? I am using on SP2016 on prem.
Here is my code:
var DeliveryListCustomize = DeliveryListCustomize || {};
DeliveryListCustomize.RenderHighlightRow = function () {
(window.jQuery || document.write(”));
var ctx = {};
ctx.Templates = {};
ctx.OnPostRender = DeliveryListCustomize.HighlightRow,
ctx.Templates.Fields = {
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctx);
};
DeliveryListCustomize.HighlightRow = function (ctx) {
var rows = ctx.ListData.Row;
var rows = ctx.ListData.Row;
for (var i = 0; i < rows.length; i++) {
var dateDue = rows[i]["DuefromTS"];
var docsUpload = rows[i]["DeliveryDocsUploadedDate"];
var rowId = GenerateIIDForListItem(ctx, rows[i]);
var row = document.getElementById(rowId);
dateDue = new Date(dateDue);
var today = new Date();
var newDate = new Date();
newDate.setDate(newDate.getDate() + 7);
//**Fill entire row with red when the due date from TS date field has passed and the Delivery Docs uploaded column is blank
if(dateDue<today && !docsUpload)
{
row.style.backgroundColor = '#f5d0ce';
}
//**• When any text is entered in Delivery Docs Uploaded (Date & Initial) column, this fill with gray
if(docsUpload)
row.style.backgroundColor = '#CCCBCB';
}
};
DeliveryListCustomize.RenderHighlightRow();