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”>

   <Template>

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

                 <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”>

                               <Template_Buttons>

                                      <SharePoint:CreatedModifiedInfo runat=”server”/>

                               </Template_Buttons>

                               <Template_RightButtons>

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

                            runat=”server” />

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

                                      <SharePoint:GoBackButton runat=”server”/>

                               </Template_RightButtons>

                 </wssuc:ToolBar>

                 </td></tr></table>

          </span>

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

   </Template>

</SharePoint:RenderingTemplate>

 

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

    <Template>

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

            <tr>

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

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

                    width=”100%”>

 

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

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

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

                       

                </td>

            </tr>

        </table>

    </Template>

</SharePoint:RenderingTemplate>

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

Advertisements

About Joseph Velliah
As a SharePoint Developer my professional interests tend to be technical and SharePoint focused. I run a blog at "SP RIDER" where you can expect to read HOW TOs and scenarios that I run into during my day to day job. I hope my posts will give back a little to the community that is helped me.

Leave a Reply

Please log in using one of these methods to post your comment:

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