JQuery to see if the user is on either the display, edit or new list item form

April 18, 2012

There have been a few situations where I have wanted to run some JQuery on either a display, edit or new item form to change the layout of the pages or hide certain fields. Typically I done this by checking the URL to see if I’m on the list in question, see example below, and then running my JQuery.

  1. if (window.location.href.indexOf('/Lists/TestListName/') != -1) {
  2.         alert('Am in list');
  3.         }

 

This works fine but it results in the above condition generally being true when you are interacting with the list i.e. looking at a particular view. I decided to take a look around to see if there was anything out there which would allow me to see if I was on one of the list forms but I didn’t find anything.

I spent some time looking at the HTML of the list forms to see if there was any way I could accurately check which page I was on. In the end I decided I would use the ribbon as part of the way I would target the type of form along with the breadcrumb. When checking the HTML I noticed the display form had an element for the ribbon which had an ID of ‘Ribbon.ListForm.Display’. From my previous experience of working with the ribbon I knew this was a relatively safe way of checking as the element wouldn’t appear on any other pages as it was particularly targeted at List Forms ribbon options, see function below.

Check if display form
  1. function IsDisplayForm()
  2. {
  3.     var isDisplayForm = false;
  4.  
  5.     var ribbonLiElement = document.getElementById("Ribbon.ListForm.Display");    
  6.     if ($(ribbonLiElement).length > 0) {
  7.         isDisplayForm = true;
  8.     }            
  9.  
  10.     return isDisplayForm;
  11. }

 

While this worked for display forms the solution for the edit and the new forms was slightly more complex as while both of these have a ribbon element they are both ‘Ribbon.ListForm.Edit’. This meant I needed another way to be able to distinguish between a new and an edit form. After comparing the HTML I decided to use the current breadcrumb node as the text for the two types of forms is slightly different. For the new forms it is ‘New Item’ and for the edit form it is ‘Edit Item’, see code below.

Check if edit form
  1. function IsEditForm() {
  2.     var isEditForm = false;
  3.  
  4.     var ribbonLiElement = document.getElementById("Ribbon.ListForm.Edit");
  5.     var currentBreadcrumbElement = $("span.s4-breadcrumbCurrentNode");    
  6.     if (currentBreadcrumbElement.length > 0 && currentBreadcrumbElement.text().toLowerCase() == "edit item"
  7.     && $(ribbonLiElement).length > 0) {
  8.         isEditForm = true;
  9.     }
  10.  
  11.     return isEditForm;
  12. }

 

Check if new form
  1. function IsNewForm() {
  2.     var isNewForm = false;
  3.  
  4.     var ribbonLiElement = document.getElementById("Ribbon.ListForm.Edit");
  5.     var currentBreadcrumbElement = $("span.s4-breadcrumbCurrentNode");        
  6.     if (currentBreadcrumbElement.length > 0 && currentBreadcrumbElement.text().toLowerCase() == "new item"
  7.     && $(ribbonLiElement).length > 0) {
  8.         isNewForm = true;
  9.     }
  10.  
  11.     return isNewForm;
  12. }

Conclusion

The easy option for this may have been to simply check the URL for NewForm.aspx, DispForm.aspx  or EditForm.aspx but I decided it would be better not to use this approach as it is possible to create custom versions of these forms which would have different names.

The one area I have tested where this will not work is if you create a custom InfoPath form using the option in the list ribbon so this is worth keeping in mind.

The other limitation is I have hardcoded the text I’m testing against so this will only work in English but it could be change for other languages.

As always please check this works on a development environment and is tested thoroughly before using. Fingers crossed this will help some people.

Advertisements

Hide column in list depending on another columns value

October 5, 2011

While working on a SharePoint 2010 project a client wanted to have some columns in a list to only display depending on the value entered in another field. The obvious choice for this was InfoPath but dues to project decisions this was not an option.

With InfoPath not being an option I decided the next best option would be to use JQuery. After some looking around I found a similar article, however this didn’t seem to work for SharePoint 2010 so I have altered it original and included it below. 

Not only have i changed it to work in 2010 I have also modified it so you can pass in an additional parameter to the function which determines if the column should be displayed on the page load and if the column should be hidden or displayed on the click event.

I have not touched on how you include this JavaScript function and call it as there are several different ways of achieving this depending on your circumstances.

Function
  1. function HideColumn(targetColumn, hideColumn, hideInitially) {
  2.     var columnToHide = $("h3:contains('" + hideColumn +"')");
  3.     var columnToAttachClick = $("h3:contains('"+ targetColumn +"')");
  4.     var inputToAttachClick = columnToAttachClick.closest('td').next('td').find('input');
  5.  
  6.     if (hideInitially == 'true') {
  7.         columnToHide.closest("tr").hide();
  8.     }
  9.  
  10.     if (inputToAttachClick.is(':checked')) {
  11.         if (hideInitially == 'true') {
  12.             columnToHide.closest("tr").show();
  13.         }
  14.         else {
  15.             columnToHide.closest("tr").hide();
  16.         }
  17.     }
  18.     else {
  19.         if (hideInitially == 'true') {
  20.             columnToHide.closest("tr").hide();
  21.         }
  22.         else {
  23.             columnToHide.closest("tr").show();
  24.         }
  25.     }
  26.  
  27.     inputToAttachClick.bind('click', function () {
  28.         if ($(this).is(':checked')) {
  29.             if (hideInitially == 'true') {
  30.                 columnToHide.closest("tr").show();
  31.             }
  32.             else {
  33.                 columnToHide.closest("tr").hide();
  34.             }
  35.         }
  36.         else {
  37.             if (hideInitially == 'true') {
  38.                 columnToHide.closest("tr").hide();
  39.             }
  40.             else {
  41.                 columnToHide.closest("tr").show();
  42.             }
  43.         }
  44.     });     
  45.    }

Displayed on load then hidden
  1. HideColumn('Target column name','Column to hide', 'false');

 

Hidden on load then displayed
  1. HideColumn('Target column name','Column to hide', 'true');


%d bloggers like this: