Skip to content

List Forms Deployment for SharePoint 2010 Part 1 of 4

March 20, 2012

This post is the first in a four part series of posts about deploying SharePoint 2010 customized  list forms through Visual Studio 2010. I want these posts to help guide future endeavors in deploying forms through VS2010 so that readers can know what the options and limitations are for each type of form deployment and how to implement these forms in their WSP.

This post will show you:

- How to create a custom list aspx form for deployment in a wsp

- No code behind for this form (Part 2 will show how to add that)

I wanted to optimize the deployment of the whole solution package by deploying custom forms for a SharePoint list. While you can implement forms from scratch, SharePoint OOTB does a lot of work in creating and customizing forms for you. I wanted to use as much of those forms as possible but found out this was difficult to do. So this post was my first approach:

Approach 1 : ListFormWebPart

Setup

For this solution I am using the following setup:

  • SP2010 Farm SP1  Enterprise licence (not necessary for this post)
  • Visual Studio 2010 Professional
  • Team Site Template for my Site Collection Root Web
  • Starting from an Empty SharePoint Project Template for my solution

Step 1: Create Site Columns, Custom Content Type, and List Definition

I am creating two basic columns. First, add a new “Empty Element” to your SharePoint project and name it “Site Columns”:

Add two site columns to your elements file. The xml looks like the following:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<Field ID="{851F446E-444B-40E3-86AB-6E42A03C5C03}" Type="DateTime" Name="RequestedTime" DisplayName="Requested Time"></Field>
<Field ID="{FF8D936F-9A4D-4FC3-A9E6-B01E1A948953}" Type="Currency" Name="Cost" DisplayName="Cost"></Field>
</Elements>

Now lets add a content type to the project that inherits from the base list item content type and name it “ContentType_Request”:

Lets open the content type that you just created and add the Field References to the site columns you just created:

<xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<!--Parent ContentType: Item (0x01) -->
<ContentTypeID="0x010066dfb86560bb43659fa2d928a7dfa6e1" Name="Request" Group="Custom Content Types" Description="Project Request"Inherits="TRUE" Version="0">
<FieldRefs>
<FieldRefID="{851F446E-444B-40E3-86AB-6E42A03C5C03}"Name="RequestedTime" />
<FieldRefID="{FF8D936F-9A4D-4FC3-A9E6-B01E1A948953}"Name="Cost"  />
</FieldRefs>
</ContentType>
</Elements>

So we do not have to create a schema.xml from scratch, I am creating a list definition from this content type but not creating a list instance from this. Why am I splitting this up? I’ve had issues in the past where errors were thrown from the list instance that was created so I have split the step up (feel free to create at the same time if this has not been your experience):

My dialog looks like this:

Right click on the list definition you just created and add a list instance (Fill out the description and make the list name and url more user friendly):

And now, my project looks like the following:

We can now deploy the project. Right click on the project and deploy. Verify that the site columns, site content type, list definition, and list instance all deployed.

Step 2: Create Custom Forms in SharePoint Designer

Everything deployed and is good to go? Great! Lets go to SharePoint designer and go to our list.

Go to the Forms Container and open NewForm.aspx in code view:

Copy all of the contents of the NewForm.aspx to a text file and save it.

Step 3: Import These forms into Visual Studio and Modify

Go to Visual Studio and create a module in the project and call it Forms:

Now, in the module, remove the sample.txt and add a new text file to the module by going to General, click on “Text File”, and name it “NewRequest.aspx”:

Add the following text on the blank aspx page:


<%@ Page language="C#" MasterPageFile="~masterurl/default.master"     Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage,Microsoft.SharePoint,Version=14.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c"  %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities"  Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

Now take the original form that you saved from SharePoint designer. Copy the line below and everything below the line as well (should be the first line after the directives):


<asp:Content ContentPlaceHolderId="PlaceHolderPageTitle" runat="server">

Now within the page do a ctrl + F to find all instances of <ZoneTemplate> and remove all text between the tags <ZoneTemplate> and </ZoneTemplate>

Now copy the page you just created and paste into the same module but rename the file to EditRequest.aspx. Do the same for DispRequest.aspx.

A few simple edits on each page so that on deployment you can verify that the forms are deploying correctly and associating with the correct form type. I like <div>Hello world! Ed </div>

Now open the Schema.xml in the list definition and go to the Forms element. It should look like this:

<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" />

Change these elements to the following:


<Form Type="NewForm" Url="NewForm.aspx" SetupPath="Features\$SharePoint.Feature.DeploymentPath$\Forms\NewRequest.aspx" WebPartZoneID="Main" />
<Form Type="DisplayForm" Url="DispForm.aspx" SetupPath="Features\$SharePoint.Feature.DeploymentPath$\Forms\DispRequest.aspx" WebPartZoneID="Main" />
<Form Type="EditForm" Url="EditForm.aspx" SetupPath="Features\$SharePoint.Feature.DeploymentPath$\Forms\EditRequest.aspx" WebPartZoneID="Main" />

Step 4: Deploy and Enjoy

Your project should now look like this:

Hit the deploy and you will have a list instance deployed to the site with the forms. Test this by adding an item, clicking on the item’s title to view the display form, and then click “edit” to view the edit form.

Summary

This is a good start for deploying customized aspx forms to the server. Here are a couple of things to note:

- You can add javascript, custom css, or custom controls to this part of the page

- SharePoint dynamically adds web parts into the web part zone, if you copy a web part from SharePoint Designer into the form you will get  two web parts in the same zone.

- I have not tested all scenarios with customizing the page. These forms can be a little quirky so be careful with your deployments and edits.

About these ads
One Comment
  1. Sam permalink

    excellent!!!.. love it
    sweet and simple :)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 521 other followers

%d bloggers like this: