Saturday, July 2, 2011

Custom Form Template Step By Step

When you open New/Edit/Display form the rendering template that is displayed by default is ListForm and can be found at SharepointRoot\TEMPLATE\CONTROLTEMPLATES\DefaultTemplates.ascx. Default template shows almost all fields. You can define your own templates depending on your requirement.

Source code also available at codeplex

Let talk directly about how to create Custom Form Template without wasting time in discussing about it.

Open Visual Studio 2010 and create new "Empty SharePoint Project". Select the site you want to use for debugging and most important select "Deploy as farm Solution" and click Finish.

Add New Item "Empty Element" to the Project. We will use this to create Fields. Open Elements.xml file and create fields.

 Add new "Content Type" and edit "Elements.xml" file. Add the fields declared above.

Now create a new "List Definition From Content Type" using the content type created in above step. Now the most important steps.

Open Elements.xml file of the content type. Add following lines after the </FieldRefs>

CustomDispForm is the id of the custom rendering template that we will create in comming step.

Add new Mapped Folder "ControlTemplates" in current project. Add new user control in controltemplates and name it MyFields.ascx. Design your form as required.

Add new user control to design you new rendering template. Open usercontrol in Source Mode and add the following code

See below the id of rendering template, its same as we defined in content type.

<SharePoint:RenderingTemplate id="CustomDispForm" runat="server">
  <span id='part1'>
   <SharePoint:InformationBar ID="InformationBar1" runat="server"/>
            <wssuc:ToolBar CssClass="ms-formtoolbar" id="toolBarTbltop" RightButtonSeparator="&nbsp;" runat="server">
                        <SharePoint:NextPageButton runat="server"/>
                        <SharePoint:SaveButton runat="server"/>
                        <SharePoint:GoBackButton runat="server"/>
   <SharePoint:FormToolBar ID="FormToolBar1" runat="server"/>
   <SharePoint:ItemValidationFailedMessage ID="ItemValidationFailedMessage1" runat="server"/>
   <table class="ms-formtable" style="margin-top: 8px;" border="0" cellpadding="0" cellspacing="0" width="100%">
   <SharePoint:ChangeContentType ID="ChangeContentType1" runat="server"/>
   <SharePoint:FolderFormFields ID="FolderFormFields1" runat="server"/>
            <!-- the user control containg form design-->            <uc1:MyFields ID="EditForm1"   runat="server" />           

   <SharePoint:ApprovalStatus ID="ApprovalStatus1" runat="server"/>
   <SharePoint:FormComponent ID="FormComponent1" TemplateName="AttachmentRows" runat="server"/>
   <table cellpadding="0" cellspacing="0" width="100%"><tr><td class="ms-formline"><img src="/_layouts/images/blank.gif" width='1' height='1' alt="" /></td></tr></table>
   <table cellpadding="0" cellspacing="0" width="100%" style="padding-top: 7px"><tr><td width="100%">
   <SharePoint:ItemHiddenVersion ID="ItemHiddenVersion1" runat="server"/>
   <SharePoint:ParentInformationField ID="ParentInformationField1" runat="server"/>
   <SharePoint:InitContentType ID="InitContentType1" runat="server"/>
   <wssuc:ToolBar CssClass="ms-formtoolbar" id="toolBarTbl" RightButtonSeparator="&amp;#160;" runat="server">
      <SharePoint:CreatedModifiedInfo ID="CreatedModifiedInfo1" runat="server"/>
      <SharePoint:SaveButton ID="SaveButton2" runat="server" Visible="" />
      <SharePoint:GoBackButton ID="GoBackButton2" runat="server" />
  <SharePoint:AttachmentUpload ID="AttachmentUpload1" runat="server"/>

Thats all, deploy the project and see it working.

Source code also available at codeplex


  1. Nice.
    However, in Sharepoint designer, for this List in section Forms, there are displayed still the original forms. I wonder why?

  2. Thank you for the helpful article.

  3. Thank you!! You saved my life :D


Popular Posts