How to customize list forms in SharePoint 2007

One of the very first limit you hit when you are customizing a SharePoint list is the NewForm, EditForm, DispForm aspx pages’ missing edit functionality. First you want to do it from the UI, without any success then you will probably find some methods on the Internet to customize these forms.
I decided to sum the methods you can use to get rid of some fields or make them read only, etc.

I created a custom list and added a few columns, now my vanilla New Item page looks like this:

New item default

1. Using content types

It is possible to customize a list’s content types to hide some columns. Actually this method only needs a few clicks on the UI. Go to the Settings -> List Settings page and click on Advanced settings. Set Yes under the Allow management of content types section and save the settings. After this a new section will appear on the settings page above the Columns area.

Content types section

Currently the list allows only one content type entitled, Item. Every new item will follow the settings of this content type including workflows, columns, etc. To customize this click on the name of the item, and select a column.

Hide column in content type

Select Hidden (Will not appear in forms) and click OK. Now the column named Author will not appear on any form including DispForm. This is useful if you need a field for temporary storage, calculation, special formatting or you want to manipulate it using event receivers.

Pros:

  • easy to do in the list’s advanced settings

Cons:

  • adds another content type
  • hides it from every Form

2. With SharePoint Designer 2007

Good ol’ SharePoint Designer! I think this is one of the most popular methods because the WYSIWYG method. Personally I am not a big fan of this software, the workflow creation part is great but otherwise it is a bit sloppy. Since the software is free and you can find plenty of articles on this topic it is very easy to implement so I won’t write just another post with screenshots and detailed steps here.
Instead I want to mention a few drawbacks:
In some scenarios you may receive “Invalid page URL:” error message when try to create a new item in the list or you receive “An unexpected error has occurred” if you click an existing item in the list. According to Microsoft the solution is to delete the list and re-create it, which is not funny. (http://support.microsoft.com/?id=935504)
Another very common problem is that you cannot attach a file to a listitem because you get the following error message: “This form was customized not working with attachment” The following article contains the solution: http://support.microsoft.com/kb/953271/

Pros:

  • easy with the WYSIWYG tool
  • plenty of resources, tutorials on the web

Cons:

  • have to be done carefully
  • attachment problem
  • invalid page url/unexpected error can occur

3. Javascript

Our goal is to add a JS code to the page and manipulate the form elements based on their names, hierarchy, etc. I will show you how to hide the Year row on the above mentioned NewForm.aspx page.

First of all add javascript to the page and a ContentEditor Web Part (CEWP) is a good candidate for this. Unfortunately you just cannot simply add a CEWP to the NewForm.aspx page, the well known Edit Page functionality is not available. No problem just write “&ToolPaneView=2” at the end of the current url and press enter. From now this screen should be very familiar. Add a Content Editor Web Part, click on edit -> Modify shared web part, and under Layout click Hidden.

CEWP settings

Then in the source editor add some code.

<script language="javascript" type="text/javascript"
 src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js">
</script>

For this example I use Jquery library and reference it from the Internet. It is also possible to download it to a document library on this site and use it from there just don’t forget to give enough permission for your users.
After this point JQuery selectors and methods can be used.

<script language="javascript" type="text/javascript">
$(document).ready(function() {
 $('input[title^="ISBN"]').parent().parent().parent().hide();
});
</script>

After the page has been loaded the script searches for all input fields with a title starts with ISBN then gets the third parent element and hides it. In this example it is a tr, a single row of a table. Unfortuantely you have to be familiar with the page’s source code for this method.

You can do almost the same things with JS as usual, the possibilities are endless.

One of the main drawback is that this solution is not secure at all. There are plenty of ways to by-pass this trick so never try to hide important fields from your users this way because it cannot hold up an eager user for more than 2 minutes.

Pros:

  • with this method the page can also be customized

Cons:

  • not a secure way to hide a field
  • involves coding
  • administrative overhead

4. Writing code

Finally let’s check the Microsoft.SharePoint namespace. Our goal is to hide a row on the NewForm.aspx page. Till now I referenced to these items as columns but to achieve our goal take a look at the SPField class. There are a few very promising properties:

According to the documentation this is exactly what I need! Let’s change these values and see what happens. You can write a console application in visual studio to change the boolean values or you can use powershell. For this example let’s write a powershell code:


[System.reflection.Assembly]::LoadWithPartialName("Microsoft.SharePoint")
$site = new-object Microsoft.SharePoint.SPSite("http://localhost")
$web = $site.AllWebs["letitknow"]
$fields = $web.Lists["Library"].Fields
$field = $fields["Year"]
$field.ShowInNewForm = $false
$field.Update()

I tried to make it small, but for future use put it in a function so it’s reusable.

If we check the $field variable this should be the result:

After running the script voila, the Year field is also hidden.

New item modified

Pros:

  • uses the Microsoft.SharePoint namespace
  • clean solution
  • can be set individually on the 3 mentioned forms

Cons:

  • involves coding (but with powershell it’s really easy!)

Are you interested in what you can do in SharePoint 2010? In a future article I will show you. Stay tuned.

Advertisements

6 thoughts on “How to customize list forms in SharePoint 2007”

  1. Ola! Letitknow,
    Thanks for the info, If you run (or plan to run) an online business, it’s especially important that you maintain and add to a customer/prospect list. Unlike a store-front business, which can draw on pedestrian traffic, you’re only location is cyberspace.
    Keep up the posts!

  2. Morning

    This was just what I was looking for I use a lot of J query on SharePoint as it’s harmless and easily fixed. However I have used this function as specified above. I have noticed 2 things.

    (Please be aware I’m no coder)

    first thing is that I can’t hide more than one column using this script I have tried adding more lines also using , to add more items neither work.

    Second it doesn’t hide Choice Columns, I have come to this conclusion because I decided to modify the columns that I wanted to hide so that they all started with (. ) that way I could use the one line of script.

    However it hides all other columns except the choice ones.

    Could you advise how I rectify either of these issues.

    I appreciate this is an old post.

    1. Hi Us,
      To hide multiple fields, please use the 3rd line multiple times:
      $(‘input[title^=”ISBN”]’).parent().parent().parent().hide();
      $(‘input[title^=”Customer”]’).parent().parent().parent().hide();

      This only hides one liner textboxes. To hide drop-downs, replace input string with select:
      $(‘select[title^=”Customer”]’).parent().parent().parent().hide();

      1. Hey KovaCcz1

        You are a hero! Thank you for even posting this valuable information and in fact bothering to respond.

        I knew I had to put select somewhere but was putting in the place of (title)^= instead of before

        Cheers dude

  3. Great article! Thanks.
    How would you add a row with formated text above a given field? For exemple, to add section titles to groups of fields in a form contains many fields. I suppose the script method is the more appropiate, but how would you write the code?
    Thanks in advance.
    GEG

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 )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s