Override SharePoint Default Control Template

SharePoint 2013 Default Templates for rendering List / Library forms located at below location. You could find in 14 folder in SharePoint 2010 or 12 folder in SharePoint 2007.
C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\15\TEMPLATE\CONTROLTEMPLATES\DefaultTemplates.aspx

In this article, I would like to show you how to Override SharePoint Default Document Library Form Control Template.

  1. Create SharePoint Empty Project and Name the solution “MyCustomDocumentLibraryForm
  2. Select Farm Solution as solution deployment and Populate the Site URL.
  3. Right click on the solution and Click Add > New Item > User Control, Name the user control “DocumentLibraryFormUserControl.ascx
  4. Populate DocumentLibraryFormUserControl.ascx file with code below. I got below code from DefaultTemplates.aspx with additional notes at the bottom.
    <%@ Control Language="C#"   AutoEventWireup="false" %>
    <%@ Assembly Name="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Register TagPrefix="SharePoint" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" namespace="Microsoft.SharePoint.WebControls"%>
    <%@ Register TagPrefix="ApplicationPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" namespace="Microsoft.SharePoint.ApplicationPages.WebControls"%>
    <%@ Register TagPrefix="SPHttpUtility" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" namespace="Microsoft.SharePoint.Utilities"%>
    <%@ Register TagPrefix="wssuc" TagName="ToolBar" src="~/_controltemplates/15/ToolBar.ascx" %>
    <%@ Register TagPrefix="wssuc" TagName="ToolBarButton" src="~/_controltemplates/15/ToolBarButton.ascx" %>
    
    <SharePoint:RenderingTemplate id="DocumentLibraryForm" runat="server">
    	<Template>
    	    <SharePoint:InformationBar runat="server"/>
    	    <div id="listFormToolBarTop">
    	    <wssuc:ToolBar CssClass="ms-formtoolbar" id="toolBarTbltop" RightButtonSeparator="&amp;#160;" runat="server">
    		    <Template_RightButtons>
    			    <SharePoint:SaveButton runat="server"/>
    			    <SharePoint:GoBackButton runat="server"/>
    		    </Template_RightButtons>
    	    </wssuc:ToolBar>
    	    </div>
    	    <SharePoint:FormToolBar ID="FormToolBar2" runat="server"/>
    	    <table width="100%">
    		    <tr>
    			    <td valign="top" width="100%">
    				    <SharePoint:FormComponent ID="FormComponent2" TemplateName="DocumentLibraryFormCore" ComponentRequiresPostback="false" runat="server"/>
    			    </td>
    			    <td valign="top">
    				    <SharePoint:DelegateControl ID="DelegateControl1" runat="server" ControlId="RelatedItemsPlaceHolder"/>
    			    </td>
    		    </tr>
    	    </table>
            <div style="padding-top: 40px; font: 8pt Tahoma;">
              <span style="color: red; font-weight: bold">Note:</span>My Custom Document Library Form located at <a href="https://tjendarta.wordpress.com">Tjen blog</a>k
            </div>
    	</Template>
    </SharePoint:RenderingTemplate>
    
  5. Delete the DocumentLibraryFormUserControl.ascx.cs file and Ensure it is deployed directly to ControlTemplates folder instead of under another sub folder. Solution Explorer will look like below. Build and Deploy the solution.
    MyCustomDocumentLibraryForm5
Results

New, Edit and Display Form updated with my small notes at the bottom.
MyCustomDocumentLibraryForm MyCustomDocumentLibraryForm2 MyCustomDocumentLibraryForm3

The Next question is, How are we going to include custom code into the Control Template ?

We just need to add another user control with code customization and register it to our DocumentLibraryForm Rendering Template.

  1. Right click on the solution, Add > New Item > User Control > Name it “MyCustomCodeUserControl.ascx
  2. Update the MyCustomCodeUserControl.ascx file to below
    <%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
    <%@ Assembly Name="Microsoft.Web.CommandUI, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
    <%@ Import Namespace="Microsoft.SharePoint" %>
    <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MyCustomCodeUserControl.ascx.cs" Inherits="MyCustomDocumentLibraryForm.ControlTemplates.MyCustomDocumentLibraryForm.MyCustomCodeUserControl" %>
    <table>
        <tr>
            <td><asp:Button ID="Button1" runat="server" Text="Update" OnClick="Button1_Click" /></td>
            <td><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
        </tr>
    </table>
    
  3. Update the MyCustomCodeUserControl.ascx.cs file to below
    using System;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    
    namespace MyCustomDocumentLibraryForm.ControlTemplates.MyCustomDocumentLibraryForm
    {
        public partial class MyCustomCodeUserControl : UserControl
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                TextBox1.Text = string.Empty;
            }
    
            protected void Button1_Click(object sender, EventArgs e)
            {
                DateTime currTime = DateTime.Now;
                TextBox1.Text = currTime.ToShortDateString() + " " + currTime.ToShortTimeString();
            }
        }
    }
    
  4. Update the DocumentLibraryFormUserControl.ascx to below
    <%@ Control Language="C#"   AutoEventWireup="false" %>
    <%@ Assembly Name="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Register TagPrefix="SharePoint" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" namespace="Microsoft.SharePoint.WebControls"%>
    <%@ Register TagPrefix="ApplicationPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" namespace="Microsoft.SharePoint.ApplicationPages.WebControls"%>
    <%@ Register TagPrefix="SPHttpUtility" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" namespace="Microsoft.SharePoint.Utilities"%>
    <%@ Register TagPrefix="wssuc" TagName="ToolBar" src="~/_controltemplates/15/ToolBar.ascx" %>
    <%@ Register TagPrefix="wssuc" TagName="ToolBarButton" src="~/_controltemplates/15/ToolBarButton.ascx" %>
    <%@ Register TagPrefix="wssuc" TagName="MyCustomCode" src="~/_controltemplates/15/MyCustomDocumentLibraryForm/MyCustomCodeUserControl.ascx" %>
    <SharePoint:RenderingTemplate id="DocumentLibraryForm" runat="server">
    	<Template>
    	    <SharePoint:InformationBar runat="server"/>
    	    <div id="listFormToolBarTop">
    	    <wssuc:ToolBar CssClass="ms-formtoolbar" id="toolBarTbltop" RightButtonSeparator="&amp;#160;" runat="server">
    		    <Template_RightButtons>
    			    <SharePoint:SaveButton runat="server"/>
    			    <SharePoint:GoBackButton runat="server"/>
    		    </Template_RightButtons>
    	    </wssuc:ToolBar>
    	    </div>
    	    <SharePoint:FormToolBar ID="FormToolBar2" runat="server"/>
    	    <table width="100%">
    		    <tr>
    			    <td valign="top" width="100%">
    				    <SharePoint:FormComponent ID="FormComponent2" TemplateName="DocumentLibraryFormCore" ComponentRequiresPostback="false" runat="server"/>
    			    </td>
    			    <td valign="top">
    				    <SharePoint:DelegateControl ID="DelegateControl1" runat="server" ControlId="RelatedItemsPlaceHolder"/>
    			    </td>
    		    </tr>
    	    </table>
            <div style="padding-top: 40px; font: 8pt Tahoma;">
              <span style="color: red; font-weight: bold">Note:</span>My Custom Document Library Form located at <a href="https://tjendarta.wordpress.com">Tjen blog</a>k
            </div>
            <div style="padding-top: 40px; font: 8pt Tahoma;">
              <wssuc:MyCustomCode runat="server"/>
            </div>
    	</Template>
    </SharePoint:RenderingTemplate>
    
  5. Solution Explorer hierarchy looks like below. Deploy and Build the solution
    MyCustomDocumentLibraryForm
Results

MyCustomDocumentLibraryForm
References

References

Advertisements

Tagged: , , , , ,

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

%d bloggers like this: