SharePoint create custom list forms with Visual Studio Part 2

This is the second part of my post serie. In this post serie i would like to share my experience with custom list forms in SharePoint 2010 and 2013. Normally you start a visual studio solution with a list definition and a list instance. These posts will show you step by step to add a custom list form which will work fine even with code behind.

Part 1: Setting up a solution with a list definition, a list instance and deploy it.

Part 2: Creating a custom list form and connect it with the list definition.

Part 3: Necessary settings for custom listform in Visual Studio

In the last post we discovered some basics. Creating list definition and list instance and deploy it without modification. Now we are going to modificate the display form. We simple want to have a custom header in it.

I personally do the same as described in Ingo Karstein’s post or the post of bamboo solutions. Thanks to them for writing such nice instructions.

Step 1: Get the display form contents

Ok, open SharePoint Designer, go to your list and open the form section. Open the dispform.aspx page and copy the whole content to your clipboard or notepad.

Now remove everything between <WebPartPages:WebPartZone runat=”server” FrameType=”None” ID=”Main” Title=”loc:Main”><ZoneTemplate> and </ZoneTemplate></WebPartPages:WebPartZone>

This part will be created automatically afterwords.

Remove also the Page tag of this page: <%@ Page language=”C#” MasterPageFile=”~masterurl/default.master”    Inherits=”Microsoft.SharePoint.WebPartPages.WebPartPage,Microsoft.SharePoint,Version=14.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c” meta:webpartpageexpansion=”full” meta:progid=”SharePoint.WebPartPage.Document”  %>

Step 2: Create an application page

First we add an application page to the _layouts folder of our project. We name it customDispForm.

Step 3: Move it to your list folder

Move your application page in the same folder like your schema.xml file (in this case it is the list definition of RequestRentalCar)

Now we have to make some modifications:

1. Remove all Content Placeholders
2. Remove the autoeventwireup attribute
3. Change DynamicMasterPageFile to MasterPageFile.
4. Change DeploymentType from TemplateFile to ElementFile in the property window of your customDispForm.aspx
5. In customDispForm.aspx.cs file and change the  inheritance from LayoutsPageBase to WebPartPage

If the line <%@ Assembly Name=”$SharePoint.Project.AssemblyFullName$” %> is underlined with a blue line, it doesn’t matter. you can simply close and reopen your solution and it will go away.

Step 4: Add original display form contents

Now we paste the contents from clipboard or notepad into that.

Step 5: Add header

Now we add a header Text so that we can see whether our customization works.

I put the heading before the webpartzone starts

<h1>..:: I Like SharePoint ::..</h1>
<WebPartPages:WebPartZone runat=”server” FrameType=”None” ID=”Main” Title=”loc:Main”><ZoneTemplate>

Step 6: Connect your custom dispform with list schema / list definition

Our final step: Now we have to tell our list definition, that it should use our custom display form.

Open the schema.xml file. Look for this paragraph:

<Forms>
<Form Type=”DisplayForm” Url=”DispForm.aspx” SetupPath=”pages\form.aspx” WebPartZoneID=”Main” />
<Form Type=”EditForm” Url=”EditForm.aspx” SetupPath=”pages\form.aspx” WebPartZoneID=”Main” />
<Form Type=”NewForm” Url=”NewForm.aspx” SetupPath=”pages\form.aspx” WebPartZoneID=”Main” />
</Forms>

In this we change the first line to the following:

<Form Type=”DisplayForm” Url=”DispForm.aspx” SetupPath=”features\$SharePoint.Feature.DeploymentPath$\RequestRentalCar\customDispForm.aspx” WebPartZoneID=”Main” />

If you now try to deploy your custom list form project, you might receive this error:

To avoid getting this error, you have to open the spprojectitem.spdata. Click on this icon in visual studio:

Then open the SharePointProjectItem.spdata file of your List definition (RequestRentalCar) and make sure, that the line of your custom form page looks like this:

<ProjectItemFile Source=”customDispForm.aspx” Target=”RequestRentalCar\” Type=”ElementFile” />

It normally looks like that:

Step 7: Deploy

Now let’s see results – how our custom display form looks like:

Tada…

Ok, that was the way like the both posts i mentioned above do the trick. It’s working now, why we would need a third part of this post serie? Well, read it or you’ll find it out some later this day 🙂 Go to Part 3

..:: I Like SharePoint ::..