Walkthrough: Create custom SharePoint 2010 list form for deployment in a Visual Studio 2010 project

(This is part 1 of 2. See link below.)

Today I want to show you how to create a custom list form for deployment within a custom list template developed in Visual Studio 2010.

Download or update or modify my demo code on Codeplex.com:
http://spcustomlistformdemo.codeplex.com/

For me I was difficult to figure out this way. I could not find a good documentation about this topic so I’ll write ist Smile – If you found another description please post a link in the comments below. Thanks!

1. Create a Site Collection in your SharePoint 2010. Mine is called “http://sharepoint.local/sites/listform”

2. In Visual Studio 2010 create an empty SharePoint 2010 project.

image

Choose “Deploy as farm solution!”

image

3. Add new item to you project: “List Definition” with type “Custom list” and with “Add a list instance”

image

image

4. Deploy this project “as is”.

5. Have a look in your browser:

image

6. Open SharePoint Designer 2010 (SPD) and open the site “http://sharepoint.local/sites/listform”. Open the deployed list “SPCustomListFormDemo – ListInstance1”

image

7. In the SPD in the List Settings of “SPCustomListFormDemo – ListInstance1” click the Ribbon tab “List Settings”. Then click “List Form”. You get this dialog:

image

Enter the name of the new list form, e.g. “new2.aspx”.

8. In SPD in the List Settings in the “Forms” view you can see your newly created list form.

image

Select it and open it for edit.

Click “Advanced Mode” in the Ribbon !!!

image

Select all the content of the new2.aspx file.

Copy the HTML code.

Open NOTEPAD and paste the HTML code.

image

9. Go into your project in Visual Studio 2010. There add a new project item of type “Application Page”.  Name it “new2.aspx”.

image

The page will be created in folder “LayoutsSPCustomListFormDemo”

image

With “drag & drop” Move the new2.aspx note to your List Definition:

image

Remove the “Layouts” folder. You get:

image

Select “new2.aspx” in the Solution Explorer and change its property “DeploymentType” to “ElementFile”

image

10. In VS2010 open “new2.aspx” for edit. Delete all content of the file except this two lines:

image

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

image

11. Got to NOTEPAD. Remove the “Page” tag as marked in the screenshow:

image

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

Now remove the complete content of the “ZoneTemplate” node. – Do not remove the “ZoneTemplate” node itself. Now the specific part of “new2.aspx” looks like this:

image

(There is a “DataFormWebPart” included in the “ZoneTemplate” node. This you remove by following the last step from above. But at runtime SharePoint will create a new DataFormWebPart in the Web Part Zone with ID “Main”. That’s the reason why we need to remove the copied and pasted Web Parts: It’s one of such a DataFormWebPart too much on the site after SharePoint creates the new one on runtime…)

12. In VS2010 paste the code into “new2.aspx”

13. Open “new2.aspx.cs” from the Solution Explorer:

image

Insert this “using”:

image

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

14. In the Solution Explorer open “schema.xml” of your list definition:

image

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

image

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

features$SharePoint.Feature.DeploymentPath$ListDefinition1new2.aspx

You get:

image

15. Deploy your solution.

16. Go into the browser, reload the list and “add new item”.

Now your custom list form will be used!

The URL in the Browser is identically to the first try! Why is it “NewForm.aspx” and not “new2.aspx”?

-> SharePoint uses “NewForm.aspx” as page for “Add new item” but internally redirects to the defined “New Form” of the list.

You can add some code for demo purpose to help you identifying your custom list form. For that reason I inserted

<h1>Hello World</h1>

into the the ASP Content PlaceHolder “PlaceHolderMain”:

image

 

The final result:

image

  Now you can do your own staff on your custom list form.

In Part Two I want to show you how to use you own form input fields instead using the at runtime inserted DataFormWebPart Web Part. …


It’s done: Part 2: https://blog.kenaro.com/2011/01/24/walkthrough-create-custom-sharepoint-2010-list-form-for-deployment-in-a-visual-studio-2010-project-part-2/