Home > Code > “Hack attack” jQuery in a list view

“Hack attack” jQuery in a list view

Useful jQuery snippet to add a “View Properties” icon, so the user doesn’t have to use context menu or ribbon (apparently they prefer this)

$(".ms-listviewtable > tbody > tr:first").append("<TH class='ms-vh2 ms-vh2-icon' noWrap>View</TH>");
  $(".ms-listviewtable > tbody > tr").each(function() {
    if ($('td:first', $(this)).hasClass("ms-vb-title"))
     var id = $("td.ms-vb-title > div.ms-vb", $(this)).attr("id");
     var viewLink = $("<td class='ms-vb-icon'><IMG style='CURSOR:hand; BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px' title='View Properties' alt=Search src='/_layouts/images/gosearch15.png' /></td>");      
      var options = {
       url: "/MyLibrary/Forms/DispForm.aspx?ID=" + id,
       title: "Document Properties",
       allowMaximize: true,
       showClose: true,
       dialogReturnValueCallback: function(dialogResult, returnValue) { }

This just adds an extra column to the end with an icon that opens the ‘View Properties’ dialog.

You can either use a Content Editor web part to make it view specific or add it to a global script for all views.
It’s a little hacky, but does the job.

It relies on the title column being available to extract the id of the item.

Categories: Code Tags: ,
  1. No comments yet.
  1. No trackbacks yet.

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

%d bloggers like this: