15 June 2010

How do I – Customize the NewForms.aspx or EditForm.aspx of my SharePoint list

Sometimes, it is necessary to override the default list edit forms provided by SharePoint. A common example is the “Title” column. In most cases, we design our lists to have some field that is a single line text field that we can map to the Title field. The reason that has to be done is because SharePoint throws the Title field into the list by default. This behavior cannot be changed, so we have to work around it.
In some cases, we don’t have any single line text fields in the list, and in such cases, the only thing we can do is to IGNORE the field. It’s pretty hard to ignore the field if we still see it though. This is when we would want to override the NewForm.aspx and EditForm.aspx pages.
Another example would be when we are designing a Support Request type of form. In such a case, the user filling out the form doesn’t care about all the tracking information we tie to the form, such as who it’s assigned to etc. All they care about is to give us a description of the error. A minimalist approach would have the user making the support request fill out just a Title and Description of the error.
If the form the user is filling out has lots of other fields in it, it can be confusing for the user. This is another good example of when we would want to override at least the NewForm.aspx page.
To override default forms and hide fields:
  1. Begin by launching SharePoint Designer.
  2. Using the File/Open Site menu, open the target site.
  3. As always, backup, Backup, BACKUP!!!
  4. Navigate to the target list.
  5. You should see the forms AllItems.aspx, DispForm.aspx, EditForm.aspx and NewForm.aspx in the listing.
  6. Right click the form you’re about to edit.
  7. On the popup menu, click “Copy”.
  8. clip_image002
  9. Now right click somewhere in the white space of the listing.
  10. On the popup menu, click “Paste”.
  11. clip_image004
  12. The forms list should now show a backup copy of the form we’re about to edit e.g. “NewForm_copy(1).aspx” if we backed up the NewForm.aspx.
  13. clip_image006
  14. Double click the NewForm.aspx to open it. It should look like this:
  15. clip_image008
  16. What we want to do, is insert a new “Custom List Form” in order to control the controls used on the page.
  17. Select the list form that is there by clicking on it. The entire thing should be highlighted, as above.
  18. VERY IMPORTANT!!! Do NOT miss this step. With the list form selected, press the RIGHT ARROW key on your keyboard, one time.
  19. This moves the cursor just to the right of the list form. It also unselects the list form. This is the exact position where we wish to insert our custom list form content.
  20. From the menu, select “Insert/SharePoint Controls/Custom List Form”.
  21. image
  22. In the modal window that pops up, change the “List or document library…” dropdown to target your current list.
  23. Leave the “Content type…” dropdown value as “Item”.
  24. Check the radio button for the type of form to insert. In our example, we’re overriding the NewForm.aspx so we select the first value.
  25. Click “OK” to insert the content.
  26. clip_image012
  27. Your page should now look like this with the standard list form content on top and the new custom list form content right below it:
  28. clip_image014
  29. Scrolling to the bottom of our list, we find the controls we wanted to remove from the NewForm.aspx.
  30. Select the entire row.
  31. clip_image016
  32. Right click on the selected row.
  33. On the popup menu, click “Delete/Delete Rows”.
  34. clip_image018
  35. The row and it’s controls should now be missing from view.
  36. clip_image020
  37. Now that we have the custom content ready, we need to hide the default content.
  38. IMPORTANT!!! DO NOT DELETE THE DEFAULT LIST VIEW CONTENT!
  39. Select the default list content by clicking on it.
  40. clip_image022
  41. Now click the “Split” view button below the preview window. This should show you both the preview AND the source code behind it. Note the <IsVisible> node value of “true”.
  42. image
  43. Double click on the <IsVisible> line to edit it.
  44. Change the value to “false”.
  45. image
  46. Click the “Save” icon to commit your changes.
  47. image
  48. If it’s the fist time editing the form, you will be prompted with this warning:
  49. clip_image030
  50. The warning basically just warns that the list is being customized, which we already know because that was our intention from the outset.
  51. Click “Yes” to continue.
  52. Now when you go to add a new item to the list, the new form we just designed, is used and the fields hidden.
  53. clip_image032


Cheers
C

No comments:

Post a Comment

Comments are moderated only for the purpose of keeping pesky spammers at bay.

SharePoint Remote Event Receivers are DEAD!!!

 Well, the time has finally come.  It was evident when Microsoft started pushing everyone to WebHooks, but this FAQ and related announcement...