How to Create a Custom List Edit Form for Development in Visual Studio 2010

SharePoint lists contain list forms that allow users to display, edit, and add items to a list. In this post, we will take a look at how to create a customized list edit form for development in Visual Studio 2010.

Challenge:

How do I create a customized list edit form for development in Visual Studio 2010?

Solution:

Step 1. Create a Site Collection in your SharePoint 2010 environment. Mine is called “http://mosslong2010/sites/ListEditForm”

Step 2. In Visual Studio 2010, create an Empty SharePoint Project.

Select Deploy as a farm solution.

Step 3. Add a new item to your project with a List Definition type of Custom list, and with Add a list instance for this list definition checked.

Step 4. Deploy the project

Step 5. Have a look in your browser:

Step 6. Open SharePoint Designer 2010 (SPD) and open the site “http://mosslong2010/sites/ListEditForm”. Open the deployed list “SPCustomListEditForm – ListInstance1”

Step 7. In the SPD List Settings for “SPCustomListEditForm – ListInstance1,” click the Ribbon tab List Settings, then click List Form. You'll get this dialog in response:

Enter a name for the new list form, e.g., “edit2.aspx.”

Step 8. In the Forms view of List Settings in SPD, you can see your newly created list form:

Select and open it for editing.

Click the Advanced Mode button on the Ribbon:

Step 9.Customize the edit2.aspx form.

Select all of the content from the edit2.aspx file.

Copy the HTML code.

Open Notepad and paste the HTML code.

Step 10. Go into your project in Visual Studio 2010 and add a new project item of the Application Page type.  Name it “edit2.aspx”:

The page will be created in the folder “Layouts\SPCustomListEditForm”:

Drag and drop the edit2.aspx note to your List Definition:

Remove the Layouts folder, and you'll get:

Select “edit2.aspx” in the Solution Explorer and change its “Deployment Type” property to ElementFile:

Step 11. In Visual Studio 2010, open “edit2.aspx” for editing. Delete all of the content of the file except for these two lines:

Replace the “DynamicMasterPageFile” attribute name through “MasterPageFile.” You get:

Step 12. Go to Notepad. Remove the “Page” tag as marked in the screenshot below:

Select the rest of the file and copy it to the clipboard.

Now remove the entire contents of the “ZoneTemplate” node (but do not remove the “ZoneTemplate” node itself). Now the specific part of “edit2.aspx” looks like this:

(There is a “DataFormWebPart” included in the “ZoneTemplate” node. Remove this by following the last step above, but note that at runtime SharePoint will create a new DataFormWebPart in the Web Part Zone with ID “Main.” This is the reason why we need to remove the copied and pasted Web Parts: Otherwise there would be one DataFormWebPart too many on the site after SharePoint creates the new one at runtime.)

Step 13. In Visual Studio 2010, paste the code into “edit2.aspx.”

Step 14. Open “edit2.aspx.cs” from the Solution Explorer:

Insert this “using”:

Replace the base type of your class definition from “LayoutsPageBase” to “WebPartPage”.

Step 15. In the Solution Explorer, open the “schema.xml” of your list definition:

Scroll to the bottom of the file and find this piece of XML code:

Replace the “SetupPath” attribute of the Form node with type “EditForm” with this value:

features\$SharePoint.Feature.DeploymentPath$\ListDefinition1\edit2.aspx

You get:

Step 16. Deploy your solution.

Step 17. Go into the browser, reload the list and “view edit item.”

Now your custom list edit form will be used!

The final result: