Archive

Archive for July, 2012

“Hack attack” jQuery in a list view

9 July 2012 Leave a comment

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>");      
     $(this).append(viewLink);
  
     viewLink.click(function(event){
         
      var options = {
       url: "/MyLibrary/Forms/DispForm.aspx?ID=" + id,
       title: "Document Properties",
       allowMaximize: true,
       showClose: true,
       dialogReturnValueCallback: function(dialogResult, returnValue) { }
      };
      
      SP.UI.ModalDialog.showModalDialog(options);
     });
    }
  });

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.

Advertisements
Categories: Code Tags: ,