Thursday, November 1, 2012

Programmatically creating a custom hyperlink within a content editor web part

Not certain how useful this is; however, I was recently asked if I could update the title of a web part hosting a view to a SharePoint list so that it would not only be larger, but would also incorporate the upcoming date of the next weekly meeting in the title's text.  The solution I decided to implement for this particular site consisted of the following activities:
  1. Set the Appearance -> Chrome Type of the list web part to "None" in order to hide the existing title of the list web part
  2. Added a new Content Editor Web Part immediately above the applicable list web part
  3. Used Notepad to create a javascript file, OutstandingRCATitle.txt, that would create the custom hyperlink within the content editor web part
  4. Uploaded the custom javascript file to the Site Assets library of the given SharePoint site
  5. Linked the content editor web part to this file via the Content Link parameter of the content editor web part
With that accomplished, I simply had to add the appropriate javascript code to the OutstandingRCATitle.txt file in the Site Assets library to provide the requested functionality.  This functionality is listed as follows:
  1. Increase the size of the link to make it stand out to the users (i.e. used <h1> for this purpose)
  2. Append the date of the next weekly team meeting to the link (i.e. the meeting always takes place on a Tuesday so I created code that would add additional days to the current date so that the upcoming Tuesday's date would be listed)
  3. Have the link reference the appropriate view to the list (i.e. I maintained the link to the original AllItems.aspx view of the list; however, you could specify another view)
Here is the javascript code that I used for meeting this particular user's needs:
<script language="javascript"> var now = new Date(); var todaysDay = new Date().getDay(); var nextTuesdaysDate = new Date(); var numDays; switch (todaysDay) { case 0 : numDays = 2; break; case 1 : numDays = 1; break; case 2 : numDays = 0; break; case 3 : numDays = 6; break; case 4 : numDays = 5; break; case 5 : numDays = 4; break; case 6 : numDays = 3; break; } nextTuesdaysDate.setDate(now.getDate() + numDays); var displayDate = "<h1><a href='../Lists/Outage/AllItems.aspx' class='customLink'>Outstanding RCAs to be reviewed on " + nextTuesdaysDate.toLocaleDateString() +"</a></h1>"; document.write(displayDate); </script>
Since this was a one-time request for a particular user (i.e. a priority one at that) and not something that would be applicable to multiple sites, I decided to use this solution; however, I would have used a radically different approach to solving this problem if this was something that was required across multiple sites.  Not certain how useful this might be to others, but I thought I'd share anyway.

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.