Office 365 SharePoint Usability

Enhance the Usability of Your SharePoint Site with JSLink #Collab365 #C365114

Enhance the Usability of Your SharePoint Site with JSLinkThanks 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:

(Visited 2,922 time, 1 visit today)

28 Comments

Click here to post a comment

    • 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.

  • 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

  • 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

  • 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 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();

About Me

Wendy Neal

Wendy Neal

I am a .NET SharePoint Developer for DMI. I've worked with SharePoint since 2007. I love to share my passion for SharePoint and Office 365 by speaking at various industry and user group events, as well as writing articles for various publications and this blog.   Read More

MCSA Office 365
Top 50 SharePoint Blogs

Buy My Book

Archives

  • 2018 (1)
  • 2017 (1)
  • 2016 (8)
  • 2015 (23)
  • 2014 (20)
  • 2013 (22)
  • 2012 (15)
  • 2011 (13)