Good day,

Currently I have a "schedule" list (document library) which is used to store vessel schedules. Shedules uploaded are Excel files, which have named cells linked to custom properties in order to fill additional columns in the list.

There are 20 of these columns. 5 for port, 5 for ETA, 5 for ETS and 5 for agent. Using the JLink feature, a JS file will save them all 4 corresponding arrays and handle them, returning a string to an empty column called "Status". Status displays where the vessel is located (port), since when (ETA), until when (ETS) and who is the Agent on that port. Otherwise it will Display "at sea" and the next port and ETA, or "update schedule" if it is out of date.

Therefore, for my users the important column is "Status" and the 20 columns mentioned above, are irrelevant to them. But in order for the JS file to get the valid Content from those columns, they have to be checked (and appear) in the current view used, thus are dispayed on the page. This makes the list too long, looks bad and is confusing for some users.

My question is: is there a way to hide those columns from the users, yet still exctract valid information from them?

Thank you in advance!

  • Isn't it simpler to do the Status calculation in a Calculated Column and not use CSR at all? With some creativity you can even mix JavaScript in a Calculated column. See viewmaster365.com/#/How Jan 19 '15 at 20:35
  • I will try to make Status a calculated column including all of the info separeted by "!". Then I can use it as my only input and split when "!" to assign my variables in the script. Then return on Status to hide the long string. I'm not really fond of this solution, but probably will work, and a working solution is better than no solution! :) Thanks again for the idea! Jan 20 '15 at 9:42
  • When you set a Calculated Column to Number it is evaluated as HTML. So in your apporach you can use: ="<!-- "& [AllMyFields here] & "-->" to hide that long string in the UI. What I suggested is taking this forward and put all you JavaScript logic in there as well Jan 20 '15 at 10:52
  • Reading OP again; you do not need a calculation based on Today (which I thought you wanted). All the info is in existing fields so just one SharePoint Calculated Column should do... admitted.. a long Calculated Column.. but seems to me you do not need JavaScript. Jan 20 '15 at 11:02
  • that I can not do because I need to use today's date dynamically - updating every day - therefore using only calculated columns is not doable Jan 20 '15 at 11:03

With CSR you need the referenced Columns in the view, and OP asked for hiding those Columns.

With the non-CSR approach below the only Column needed in the View is Status.

And it works in any instance of the View on other pages.. without making JSlink connections

It also works with multiple Views on the same page, again, something CSR has issues with.

CSR is great technology, but not always the best solution. Method below works on SP2010 as well.

The Javascript code

Thanks for mailing me your JSlink code.

I rewrote it just a tad so its more modular and easier to work into a SharePoint Calculated Column (which I will post later)

The major change I made was using the dates instead of Port number to check where a ship is.

So the dates array is ETA1 , ETS1 , ETA2 , ETS2 , ...

That saves a whole lot of date comparisons.

/*jslint plusplus:true */
/*jslint bitwise:true */
/*global console*/
function ShipStatus(checkdate, ports, dates) {
    "use strict";
    var i = 0,
        state = {},
        lost = false;
    dates = dates.map(function (S) {
        return new Date(S);
    while (!lost && checkdate > dates[i]) {
        lost = !dates[i] || dates[i - 1] > dates[i];
    state = {
        'date': checkdate.toDateString(),
        'status': [['Sailing to:', 'In Port:'], ['Lost at sea', 'Lost in Port']][~~lost][i % 2],
        'port': ports[~~(i / 2)],
        'transit': ['Arriving', 'Departing'][i % 2],
        'nextdate': dates[i].toDateString(),
        'color': [['#00ffff', '#00ff00'], ['lightcoral', 'red']][~~lost][i % 2]
    return (state);

var ports, dates;
ports = ['[Port 1]', '[Port 2]', '[Port 3]', '[Port 4]', '[Port 5]'];
dates = ['1/14/2015', '1/19/2015', '1/19/2015', '1/20/2015', '1/21/2015', '1/24/2015', '1/27/2015', '1/27/2015', '1/28/2015', '1/29/2015'];

var S;
S = new ShipStatus(new Date(), ports, dates);//todays date
console.log(S.date, S.status, S.port, S.transit, S.nextdate, S.color);
S = new ShipStatus(new Date('1/22/2015'), ports, dates);
console.log(S.date, S.status, S.port, S.transit, S.nextdate, S.color);

//Now set status text in UI
//Now set background color in UI

You can paste this as a Chrome Snippet and easily test.

Some (dirty) JavaScript tricks.. lost is a boolean which is cast to a 0 or 1 with ~~lost; that way it can be used as in index in array

i % 2 results in an index as well

since each port has 2 dates (ETA and STS) ~~(i/2) gets us the correct index into the ports array

Now into SharePoint

Okay; so as discussed today in a private chat, you create 2 extra Calculated Columns: Ports and Dates

Ports I have hardcoded because I did not want to create all those other columns:


Dates you need to format like a long sequency of


The outcome needs to be the exact string:

'1/14/2015', '1/19/2015', '1/19/2015', .....

This formatting prevents any issues with different language setting.

My hardcoded version:


Note: we'll add the [ ] for the Javascript Array notation later

Once you have those two Calculated Columns add the big one... and set this one to datatype=Number so it evaluates the HTML

Formula for Calculated Column Status:

="<div style=""width:250px;"">placeholder</div>"
&"<img src=""/_layouts/images/blank.gif"" onload=""{"
&"  var i=0,state=[],lost=false,checkdate=new Date(),"
&"  ports=[" & [Ports] & "],"
&"  dates=[" & [Dates] & "].map(function (S) { return new Date(S); });"
&"  while (!lost && checkdate > dates[i]) {"
&"      i++; lost=!dates[i] || dates[i - 1] > dates[i];"
&"  }"
&"  state=["
&"      [['Sailing to:', 'In Port:'], ['Lost at sea', 'Lost in Port']][~~lost][i % 2],"
&"      ports[~~(i / 2)],"
&"      ['Arriving', 'Departing'][i % 2],"
&"      dates[i].toDateString()"
&"  ];"
&"this.parentNode.parentNode.parentNode.style.backgroundColor=[['#00ffff', '#00ff00'], ['lightcoral', 'red']][~~lost][i % 2];"
&"this.previousSibling.innerText=state.join(' ');"

I rewrote the script a bit so its shorter to output the textparts from an array 'state'

On my SP Online (with hardcoded Dates and Ports as I didn't want to type that much) it looks like:

As I have the same hardcoded dates for all ships all lines look the same!


ICSR iJS top20

  • I forgot an edge case when todays date is past any dates in the dates list.. the ship is lost after it left Port5 replace dates.[i].toDateString with lost?'unknown':dates[i].toDateString Jan 21 '15 at 8:47

You can use CSR also for hiding columns. Here is the sample (we are using similar solution ourselves):


Also you can look how others do this without CSR, and using plain jQuery:


  • Thank you for the response but this is not what I was looking for :) I did my small "research" before asking here, and came across these links but unfotrunetely they are not suitable for my case. Jan 20 '15 at 9:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.