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

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

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 )

w

Connecting to %s

%d bloggers like this: