SharePoint 2010 Cookbook: 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:

See Also:


Posted May 12 2011, 01:00 PM by Long Nguyen

Comments

LanaF wrote re: SharePoint 2010 Cookbook: How to Create a Custom List Edit Form for Development in Visual Studio 2010
on Fri, Sep 23 2011 9:51 PM

Hello. I  am having some issue with it, did all same way as in this sample, but when try to open in Edit mode i am getting an error:

The file /sites/PMODocCenter/Lists/MyPmoDocuments-ListInstance1/masterurl/default.master does not exist.

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.IO.FileNotFoundException: The file /sites/Mysite/Lists/MyDocuments-ListInstance1/masterurl/default.master does not exist.

Please let me know what is wrong with my code. Thank you .

Here is what i have in my edit2.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Edit2.aspx.cs"

Inherits="MyDocuments.Layouts.MyDocuments.Edit2" MasterPageFile="~masterurl/default.master"

Add a Comment

Please sign into Bamboo Nation to leave a comment.
Bamboo Solutions Corporation, 2002-2014