JQuery, Sharepoint

Sharepoint 2010 – Add a ‘Last Updated’ column in custom List

A ‘Last Updated’ column would have been cool feature for Sharepoint 2010 Lists. One look at the list and you would know how much time has elapsed since the items were updated. Something like, ‘This list item was updated 3 days ago’.

Last Updated - How it looks

Makes life a lot easier, doesn’t it?

In search of an answer, I stumbled across this:
https://www.nothingbutsharepoint.com/sites/eusp/Pages/jquery-for-everyone-replacing-today.aspx

I followed the instructions exactly, but kept getting an error ‘NaN Min’. Apparently, the code works like a charm in Sharepoint 2007 but not in SP 2010. Now, what should we do? Debug, of course!

NaN stands for ‘Not a number’. Obviously, the JQuery was not reading the date string in the ‘Last Updated’ column correctly. I realized that this issue was quite common in SP 2010 and got down to solving it.
The solution: A bit of code needs to be added to parse the default value as Date.

This is the modified code:

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(function() {
 var str = “Last Updated”;
 var today = new Date();
 today = Date.parse(today)/1000;
 var a=0;
 var headers = $(“table.ms-listviewtable:first> tbody> tr:first th”).get();
$.each(headers, function(i,e){
x = $(e).contents().find(“a[title*='”+str+”‘]”).length;
a = x > 0 && i > a ? i : a;
})
 var dArray = $(“table.ms-listviewtable:first> tbody> tr:gt(0)”).find(“>td:eq(“+a+”)”).get();
 $.each(dArray, function(i,e){
             var MyDate= $(e).text();
             var MD_Y=MyDate.substring(6,10);
             var MD_M=MyDate.substring(3,5); // Jan-Dec=01-12
             var MD_D=MyDate.substring(0,2);
             var MD_H=MyDate.substring(11,13);
             var MD_N=MyDate.substring(14,16);
             var MD_S=0;
             var MD_M=MD_M-1; // Jan-Dec=00-11
             var Dobj=new Date(MD_Y, MD_M, MD_D, MD_H, MD_N, MD_S);
             var d1 = Date.parse(Dobj)/1000;
             var dd = (today-d1)/86400;
             var dh = (dd-Math.floor(dd))*24;
             var dm = (dh-Math.floor(dh))*60;
             var time = ((Math.floor(dd) > 0 ? Math.floor(dd) +” days, ” : “”)+
                         (Math.floor(dh) > 0 ? Math.floor(dh)+” hrs, ” : “”)+
                         (Math.floor(dm)+” min”));
             $(e).text(time);
 });
});</script>

How to deploy this to your Sharepoint list:
  • Add a column ‘Last Updated’ to your Sharepoint list.
  • In the list view, make sure that the ‘Last Updated’ column is the first column from the right.
  • Add a content editor to your List view page and copy the code into the HTML source.
  • Save your changes and enjoy.

Glad I could help!

Extras:

  • In case you want some other name for the column instead of ‘Last Updated’, change the value for the variable ‘str’ in the script.
  • If you do not want to keep ‘Last updated’ as the rightmost column, you can hard code the column number into the variable ‘a’.

A big thanks to Paul and his script.

Advertisements

23 thoughts on “Sharepoint 2010 – Add a ‘Last Updated’ column in custom List

  1. create date time column with this formula ‘=TEXT([Modified],”mmmm d, yyyy “)’

    just add this content field to your page layout
    you can change date time format
    This way is real work and i m using it in my project.
    Take it easy 🙂
    cool 🙂

  2. I loaded the script and the column name is Last Updated,
    yet I get nothing back just blank fields
    Tried using local Jquery and using the google path still nothing.
    Tried changing the column name in both the list and the code Nothing.

    Now my Title field is not called title would that matter? if so how do I get the script to reference a different title field when its looking the item up

    1. Hi Tom,
      The ‘Last Updated’ should be a calculated column with value set as ‘=[Today]’
      It should also be the last column in the row (first column from the right) for the script to work AS IS.
      You can later make changes according to your requirements.

      Hope this helps,
      Anurag

      1. Hello Anurag,
        Thank you for the code. But I have the same probleme as Tom. And I don’t think I can set value ‘=[Today]‘ in a calculated column.
        I have 2 questions:
        1. Right now, the “last updated” text shows in the first column from the left (the column of checkbox),
        2. and it shows “41566 days, 15 hrs, 52 min”. Luckily, it updates automatically. In fact, the item was created on septembre 19,2013, 15:59.
        Could you help me?
        Thanks again.

      2. My bad! I had written this post almost an year ago and did not verify on my machine before posting my last comment.
        Hey MK,
        can you create a view that contains “Modified” field as the right most field. On a page, add the list view web part with this view and a content editor with the code as in the blog post changing the “Last Updated” to “Modified”. Let me know if that works.
        Also, copy the jquery file to your style library to make the reference local.

  3. Hi Anurag, I follwoed the above steps, but I am still unalbe to get it to work. By “Modified” field you mean, sharepoint default modifiled field or just a column wiht Modified field? pls advise

  4. Hi Anurag,
    The column displays 19hrs 30 mins; and if i update the column it adds to this current time….Can you pls advise me if this is correct or do I need to make change to the code???

    1. For debugging, you can compare the column value on the page without the script and the value after adding the script. Also, edit an item and check what the value of last updated becomes. Note: If you are in a different time zone than the SP server (or the SP server has a time date set different from your local time, you will definitely see a time difference)

      1. Hi Anuraj,
        Thanks a lot for the info. Is there a way to know if a record was edited? and if it was edited, which column in it was edited? for example: Is there any kind of conditional formatting, wchih can be used to know whic column was edited, or any jquery, etc. your response is appreciated.

      2. Hi, you can enable version control on your list. You can find it in the List Settings page. You can see the previous versions of the file and compare them to find which fields have been changed. Unfortunately, there’s no direct way to achieve the conditional formatting that you mentioned. You can create dummy columns that store the current value of each column. If the list column is edited, it would no longer match the value in the dummy column and can be highlighted as a change. However, this would be better implemented using custom development.

  5. is there a way to apply this to multiple lists on a web part page? I tried, but it only applies to the first list shown. Any assistance would greatly be apprciated.

    1. Hi James,
      you would have to apply a loop in the beginning of the script to iterate through all webparts and run the algo for only list view web parts. Unfortunately, i have been quite busy at my office and won’t be able to spend time on this for at least three more weeks. Sorry about that!

  6. Hi Anurag
    Thanks for your code. I am trying to find the index of the column which i want to manipulate but i am unable to do so. Can you please help?
    var headers = $(“table.ms-listviewtable:first> tbody> tr:first th”).get();

    $.each(headers, function(i,e){

    var x=$($(headers)+”td:contains(‘ExpectedDate’)”).length;//length;//index();

    a = x > 0 && i > a ? i : a;

    });

    1. Hi Ishan,
      I didn’t realize the value of ‘a’ was hardcoded. I’ll fix it in y code snippet. Anyways, the original blog post contains this code:

      str=”ExpectedDate”;
      var headers = $(“table.ms-listviewtable:first> tbody> tr:first th”).get();
      $.each(headers, function(i,e){
      x = $(e).contents().find(“a[title*='”+str+”‘]”).length;
      a = x > 0 && i > a ? i : a;
      });

      See if it works for you.

  7. I was wondering if you ever thought of changing the page layout of your website?
    Its very well written; I love what youve got to say. But maybe you could a
    little more in the way of content so people could connect with it better.
    Youve got an awful lot of text for only having
    1 or 2 pictures. Maybe you could space it out better?

    1. Thanks for the feedback. Really appreciate it.
      I’ll try to update the site layout with a cleaner one… if I find a free one.
      As for the pictures, I’m a bit old-school and prefer writing the thousand words instead. 🙂
      In any case, thanks for dropping by!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s