Display the File Last Updated Date Using jQuery in SharePoint

In this example, assume there is a dashboard page on a SharePoint site that displays a number of graphs and charts. This dashboard is based on data contained in a single file located in a document library on the same site. Whenever this file is updated, the last modified date of the file needs to be automatically reflected on the dashboard page. This allows the page viewer to understand the freshness of the dashboard data without requiring the content owner to edit the dashboard page itself with every data change. The following code displays the file last updated date as well as the last modified by user name using jQuery, the SharePoint Client Object Model (sp.js), and a bit of HTML. The formatDate function is used to format the file last modified timestamp in dd-mon-yyyy format.

Step 1 – Add Content Editor Web Part

Add a Content Editor Web Part to the dashboard page.

Step 2 – Modify the Script

Change the fileRelativeUrl variable in getFileInfo() to the appropriate local file path. In other words, only include the subdirectory path and filename.

<script src="https://code.jquery.com/jquery-latest.min.js"></script>

<script language='javascript'>
  var file = null;
  var user = null;

  function getFileInfo() {
    var clientContext = SP.ClientContext.get_current();
    var web = clientContext.get_web();
    var fileRelativeUrl = '/server/path/to/file.txt';

    this.file = web.getFileByServerRelativeUrl(fileRelativeUrl);
    clientContext.load(this.file);

    this.user = this.file.get_modifiedBy();
    clientContext.load(user);

    clientContext.executeQueryAsync(
      Function.createDelegate(this, this.onQuerySucceeded), 
      Function.createDelegate(this, this.onQueryFailed)
    );
  }

  function onQuerySucceeded(sender, args) {
    $('#source_data_info').html("Data Last Updated: " + formatDate(this.file.get_timeLastModified()) + "<p> </p>" + "Data Modified By: " + user.get_title());
  }

  function onQueryFailed(sender, args) {
    console.log('Function getFileInfo() failed: ' + args.get_message());
  }

  function formatDate(timestamp) {
    var month_names = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
    var pad = "00";

    if(timestamp) {
      var d = new Date(timestamp);
      return (pad + d.getDate()).slice(-pad.length) + "-" + month_names[d.getMonth()] + "-" + d.getFullYear();
    }
  }

  $(document).ready(function() {
    ExecuteOrDelayUntilScriptLoaded(getFileInfo, "sp.js");
  });
</script>

Step 3 – Edit Content Editor Web Part Properties to Reference Script

Edit the Content Editor Web Part properties. Include a link to the below script by adding the code to a file in a document library on the SharePoint site.

Result

When the code executes, it replaces the contents of the “source_data_info” container with the formatted last modified timestamp and the last modified by user name.