Customize List View Using Jquery

Client-Side Programming in Sharepoint # 4
- Customize List View Using Jquery

SharePoint views allow us to show SharePoint Lists in different ways. You can select subset of columns to show on the tabular grid, Can define sorting, filters, grouping, paging etc on list items. As Views represent logical subset of list record, so a list can have multiple views.
Sometime we need to customize these OOB views that match our requirement, Here are some customization on list views using jquery.Save jquery-1.3.2.js in local document library (Jquery) , and update jquery file reference in below scripts.

• Remove lookup column hyper link – SharePoint display a lookup fields as an hyperlink to linked item in list view. We can replace this hyperlink with simple no clickable text by JQuery.
  
  
  <script type="text/javascript" src="/Jquery/jquery-1.3.2.js"></script>
  <script type="text/javascript">
  $(document).ready(function() {
  $('a[href*="RootFolder=*"]').each(function(index) {
  var link = $(this);
  $(this).after("<span>" + link.text() + "</span>");
  $(this).remove();
  });
  });
  </script>
  
  
  


• Remove SPUser Hyperlink - SharePoint display a SPUser fields (created by , modified by etc) as an hyperlink to user info list item in list view. We can replace this hyperlink with simple not clickable text by JQuery.
  
  
  <script type="text/javascript" src="/Jquery/jquery-1.3.2.js"></script>
  <script type="text/javascript">
  $(document).ready(function() {
  $('a[href*="userdisp.aspx?ID="]').each(function(index) {
  var link = $(this);
  $(this).after("<span>" + link.text() + "</span>");
  $(this).remove();
  });
  });
  </script>
  
  
  


• Remove Edit Heading for readonly users – We can add Edit Icon on list item view, so when a user will click on this icon they redirect to Edit Item Form. But for an readonly user it will not show any icon in the view table , only column heading say ‘Edit’ . We can remove this heading text using JQuery ..
  
  
  <script type="text/javascript" src="/Jquery/jquery-1.3.2.js"></script>
  <script type="text/javascript">
  $(document).ready(function() {
  if ($('a[href*="EditForm.aspx?ID="]').size() <= 0)
  {
  $('TH[scope*="col"]').each(function(index) {
  var link = $(this);
  if (link.text() == "Edit")
  link.text(link.text().replace("Edit", ""));
  
  });
  }
  });
  </script>
  
  
  


• Remove start time from calendar view – In a Calendar view SharePoint shows start time of the events & Title. For an Full day event it shows 12.00 AM as an start time. We can remove this 12:00 AM ,as
  
  
  <script type="text/javascript" src="/Jquery/jquery-1.3.2.js"></script>
  <script type="text/javascript">
  $(document).ready(function() {
  $('NOBR').each(function(index) {
  var link = $(this);
  if(link.text().indexOf("12:00 AM") >= 0)
  {
  //alert(link.text());
  link.text(link.text().replace("12:00 AM", ""));
  }
  });
  });</script>
  
  
  


• Remove SPUser Hyperlink From Discussion list’s Flat View - SharePoint display a SPUser fields (created by , modified by etc) as an hyperlink to user info list item in list view. We can replace this hyperlink with simple not clickable text by JQuery.
  
  
  <script type="text/javascript" src="/Jquery/jquery-1.3.2.js"></script>
  <script type="text/javascript">
  $(document).ready(function() {
  $('a[href*="userdisp.aspx?ID="]').each(function(index) {
  var link = $(this);
  if (link.children().length <= 0)
  {
  $(this).after("<span>" + link.text() + "</span>");
  $(this).remove();
  }
  else
  {
  //$(this).attr('href', '#');
  $(this).after("<span>" + link.html() + "</span>");
  $(this).remove();
  
  }
  });
  });</script>
  
  
  


• remove open in explorer view link (Open With Windows Explorer) from list action menu
  
  
  <script type="text/javascript" language="JavaScript">
  var doc = document.getElementsByTagName('ie:menuitem');
  for (var i = 0; i < doc.length; i++)
  {
  itm = doc[i];
  if (itm.id.match('OpenInExplorer')!=null)
  { itm.hidden=true; }
  }
  </script>