Ariwibawa: December 2012

Suppose we want to develop web application on the sharepoint 2010. But the requirement to design form need customization.

To accomplish this there are 2 options (that i know of) that we can do:

Use formtemplate
Create aspx page with page content master from sharepoint

Here, I'm going to explain how to customize form using formtemplate:

Open Visual Studio 2010
Create new Sharepoint project (Sharepoint 2010 -> Empty SharePoint Project)

On the next page, enter Uri from site we want to add. In my example i used: http://mlpt-sp/my/personal/testingground
Select Deploy as a farm solution because we're going to use ascx and place it in ControlTemplate folder

After project has been loaded, next we're going to create content type. Left click on your project name (SharePointProject1) -> Add -> New Item -> click on Content Type -> give it a name and then click Add

Choose base content type you want to create. Since I'm going to create this content type for custom list, i picked Item. Click Finish

Open file Elements.xml, delete Inherits="TRUE" and add the following xml after tag </FieldRefs>

<XmlDocuments>

 <XmlDocument 
        NamespaceURI="http://schemas.microsoft.com/sharepoint/v3/contenttype/forms">

  <FormTemplates 
        xmlns="http://schemas.microsoft.com/sharepoint/v3/contenttype/forms">

   <Display>CustomFormTemplates</Display>

   <Edit>CustomFormTemplates</Edit>

   <New>CustomFormTemplates</New>

  </FormTemplates>

 </XmlDocument>

</XmlDocuments>

The name CustomFormTemplates will became id for RenderingTemplate in ascx, This was the result from that Elements.xml

When you have finished editing the file Elements.xml we need to add a new ascx that will become the template for Add / Edit / View later. Right click on project name -> Add -> New Item -> select the User Control -> you can name it anything (in the example I used UserControl1.ascx) and click Add

on file UserControl1.ascx paste the following html at the bottom

<%@ Register
        TagPrefix="wssuc"
        TagName="ToolBar"
        src="~/_controltemplates/ToolBar.ascx"
        %>

<SharePoint:RenderingTemplate
        ID="CustomFormTemplates"
        runat="server">

 <Template>

  <span
        id='part1'>

   <SharePoint:InformationBar
        ID="InformationBar1"
        runat="server"
        />

   <div
        id="listFormToolBarTop">

    <wssuc:ToolBar
        CssClass="ms-formtoolbar"
        ID="toolBarTbltop"
        RightButtonSeparator="&amp;#160;" 
        runat="server">

     <Template_RightButtons>

      <SharePoint:NextPageButton
        ID="NextPageButton1"runat="server"/>

      <SharePoint:SaveButton
        ID="SaveButton1"runat="server"/>

      <SharePoint:GoBackButton
        ID="GoBackButton1"runat="server"/>

     </Template_RightButtons>

    </wssuc:ToolBar>

   </div>

   <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:FolderFormFields
        ID="FolderFormFields1"
        runat="server"/>

    <h2>Custom Form Template</h2>

    <SharePoint:FormComponent
        ID="FormComponent1"
        TemplateName="AttachmentRows"
        runat="server"
        />

   </table>

   <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:ParentInformationFieldID="ParentInformationField1"runat="server"/>

      <wssuc:ToolBar
        CssClass="ms-formtoolbar"ID="toolBarTbl"RightButtonSeparator="&amp;#160;" 
        runat="server">

       <Template_Buttons>

        <SharePoint:CreatedModifiedInfoID="CreatedModifiedInfo1"runat="server"/>

       </Template_Buttons>

       <Template_RightButtons>

        <SharePoint:SaveButton
        ID="SaveButton2"runat="server"/>

        <SharePoint:GoBackButton
        ID="GoBackButton2"runat="server"/>

       </Template_RightButtons>

      </wssuc:ToolBar>

     </td>

    </tr>

   </table>

  </span>

  <SharePoint:AttachmentUpload
        ID="AttachmentUpload1"
        runat="server"/>

 </Template>

</SharePoint:RenderingTemplate>

Move file UserControl1.ascx from folder SharePointProject1 to ControlTemplates
Now we need to create WebControl for SaveButton. right click on project name -> Add -> New Item -> under installed templates click Code -> give this class a name CustomSaveButton-> click Add
On file CustomSaveButton.cs change this class access to Public with by adding the word in front of the word class, we alse need to inherits this class from Microsoft.SharePoint.WebControls.SaveButton
Override method SaveItem which is available under inherits class. Here we can add any custom code that we would like.

Back to file UserControl1.ascx here we're going to change default SaveButton with SaveButton that we've created before. Add this tagprefix in above.

<%@ Register
        Assembly="$SharePoint.Project.AssemblyFullName$"
        Namespace="SharePointProject1" TagPrefix="cusa"
        %>

Change <SharePoint:SaveButton to <cusa:CustomSaveButton so it becomes like this

<cusa:CustomSaveButton
        ID="SaveButton1"
        runat="server"
        />

Set trust level in sharepoint site target to Full
Deploy ours solution by right clicking on Project Name (SharePointProject1) -> clik Deploy
Run iisreset
Let's try this by creating a new Custom List and set this list to use other content type, from menu List Settings -> Advance Settings -> Allow management of content types, select yes -> then click on OK
Back to menu List Settings klik Add from existing site content type pick content type that we've already made, mine was SharePointProject1 – CustomFormWithSaveButton