When was that PAGE modified?

Years ago, I had a requirement to add “Content Last Modified” text to ALUI portal pages being served as a public web site. When a portlet was updated, this text needed to automatically update and be displayed inline for each Published Content Announcement portlet. Of course, this is pretty straight-forward; we just needed to insert the following tag into the Publisher Presentation Template:

<div align=right>
  Item last published on
  <pcs:value expr="modified" format="MM/dd/yy">
  </pcs:value>
</div>

The problem is, the portal isn’t a web site – it treats each portlet as an individual component on the page, so users aren’t really looking at the “page last modified” date, they’re looking at the “content item last modified” date. Get two Publisher portlets on the same page, and it looks a little weird with the “Last Published” date associated with the portlet showing up in the middle of the page: 

Recently, I came across a similar requirement for “Content Last Modified” text, but we wanted to avoid the text showing up more than once on pages with more than one portlet. The trick? Hit that “read” link.

The idea here is to use that “modified” tag to write a hidden element to the DOM, then use JavaScript in the footer to parse all of these hidden tags, find the latest date, and display it just above the footer. The tag used in the presentation template for each published content portlet is as follows:

<div name=lastmodified style="display:none">
  <pcs:value expr="modified" format="yyyy/MM/dd">
</pcs:value></div>

Three important notes about this tag: 

  1. The style setting (display:none) for the <div> tag prevents it from actually displaying inline
  2. The format setting for the <pcs:value> tag ensures the date can be sorted as a string
  3. The name of the div tag allows us to parse it out of the DOM in our JS

The last piece of secret sauce is to add the following JavaScript to the footer:

As you can see, the code grabs all the dates, string-sorts them, parses the date integer values, and writes out the string in the footer:

<script>
 displayLastModified = function () {
 try
 {
  // gets an array of last modified dates
  var lmdivs = [];
  if (navigator.appName == "Microsoft Internet Explorer") {
    var divs=document.getElementsByTagName("div");
    for(var ix=0; ix<divs.length; ix++){
      att = divs[ix].getAttribute('name');
      if(att == "lastmodified") { lmdivs.push(divs[ix]); }
    }
  }
else { lmdivs=document.getElementsByName("lastmodified"); }
// get the dates and sort them
var lmdates = [];
for (var x=0; x<lmdivs.length; x++) {
lmdates.push(lmdivs[x].innerHTML);
}
lmdates.reverse();

// process and display the most recent date
var m = parseInt(lmdates[0].substring(5,7),10);
var d = parseInt(lmdates[0].substring(8,10),10);
var y = parseInt(lmdates[0].substring(0,4),10);
document.write("<div align=left>Page last updated on:" +
     m + "/" + d + "/" + y + "</div>");
}
catch (err) { }
}
displayLastModified();
</script>

 

By the way, see this article on why we need to add a radix of 10 to parseInt, and this one for why we have to do an IE-specific branch in there (thank you very little, Microsoft).

Tags: , ,

2 Responses to “When was that PAGE modified?”

  1. Hey Matt, nice trick. Only thing you may want to add to this script is to first make sure that the DOM has been fully loaded before trying to access any of its elements.

  2. Matt Chiste says:

    Thanks Mike! This JS was added to the footer (as it writes out the “Page last updated” text directly into the DOM wherever the script is loaded), but you could certainly change the line:
    displayLastModified();
    to:
    window.onload=”displayLastModified()”;

Leave a Reply