Customizing ListItem Forms Using RenderingTemplates

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.

How to create Custom Form Template?

  • 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.

  • CustomListForm is the id of the custom rendering template that we will create in coming step.
  • Add new Mapped Folder “ControlTemplates” in current project. Add new user control in control templates and name it CustomForm.ascx. Design your form as required.
  • Add new user control to design your new rendering template (CustomTemplates.ascx). Open user control in Source Mode and add the following code

<SharePoint:RenderingTemplate id=”CustomListForm” runat=”server”>


          <span id=’part1′>

                 <SharePoint:InformationBar ID=”InformationBar1″ runat=”server”/>






                            runat=”server” />






                 <SharePoint:FormToolBar ID=”FormToolBar1″ runat=”server”/>

                 <SharePoint:ItemValidationFailedMessage ID=”ItemValidationFailedMessage1″ runat=”server”/>

                 <table style=”margin-top: 8px;” border=”0″ cellpadding=”0″ cellspacing=”0″ width=”100%”>

                 <SharePoint:ChangeContentType ID=”ChangeContentType1″ runat=”server”/>

                 <SharePoint:FolderFormFields ID=”FolderFormFields1″ runat=”server”/>


            <JRD:Custom ID=”JRDFormNew” runat=”server”></JRD:Custom>


                 <%–<SharePoint:ListFieldIterator ID=”ListFieldIterator1″ 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><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 runat=”server”/>



                    <JRDCustomButton:SaveButtonCustom ID=”SaveButtonCustom2″ TemplateName=”SaveButtonCustom”

                            runat=”server” />

                                      <%–<SharePoint:SaveButton runat=”server”/>–%>

                                      <SharePoint:GoBackButton runat=”server”/>





          <SharePoint:AttachmentUpload ID=”AttachmentUpload1″ runat=”server”/>




<SharePoint:RenderingTemplate ID=”SaveButtonCustom” runat=”server” >


        <table cellpadding=”0″ cellspacing=”0″ width=”100%”>


                <td align=”<SharePoint:EncodedLiteral runat=’server’

                    text='<%$Resources:wss,multipages_direction_right_align_value%>’ EncodeMethod=’HtmlEncode’/>”



                    <asp:Button UseSubmitBehavior=”false” ID=”diidIOSaveItem” CommandName=”SaveItem”

                        Text=”<%$Resources:wss,tb_save%>” AccessKey=”<%$Resources:wss,tb_save_AK%>”

                        target=”_self” runat=”server” />







  •  Here SaveButtonCustom Template is to override the existing button submit
  • See the id of rendering template CustomListForm, its same as we defined in content type.
  • Find the code for the same on the below link

Customizing ListItem Forms Using RenderingTemplates

  • Deploy the project and see it working.

Thank you Pawan Ashish, you helped me a lot to understand this concept.

Leave a Reply

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

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

Google photo

You are commenting using your Google 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 )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.