Create List Custom Form in SharePoint 2013

Recently, I need to create custom List NewForm.aspx in SharePoint 2013 and intended to include my custom java script inside the aspx page. I tried to implemented it like I used to do or everyone experienced before 2013 as in this article.

When I did that, WebParts and WebPart elements not recognized and my content editor webpart thats included my java script not inserted into my list custom form.

After spending sometime figuring it out, I would like to share my experience here and for my reference as well.

  1. Create new Empty SharePoint project as farm solution and Provide “MyListCustomForm” as Solution name.
  2. Right click SharePoint project > Add New Item > List > Provide List Name “MyList” and click Add.
  3. Right click new List > Add New Item (Text File) > Provide File Name “CustomNewForm.aspx” and click Add.
  4. Set CustomNewForm.aspx Deployment Type as “Element File”. The solution explorer will look like below now.
    MyListCustomForm1
  5. Go to 15 hive folder and search for default NewForm.aspx page that you can copy contents to CustomNewForm.aspx page.
    <%@ Page language="C#" MasterPageFile="~masterurl/default.master"    Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage,Microsoft.SharePoint,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" %> <%@ Import Namespace="Microsoft.SharePoint" %> <%@ Assembly Name="Microsoft.Web.CommandUI, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderId="PlaceHolderPageTitle" runat="server">
    
        <SharePoint:ListProperty ID="ListProperty1" Property="Title" runat="server"/> - <SharePoint:EncodedLiteral ID="EncodedLiteral1" runat="server" text="<%$Resources:wss,listformtitle_newitem%>" EncodeMethod='HtmlEncode'/>
    
    </asp:Content>
    
    <asp:Content ID="Content2" ContentPlaceHolderId="PlaceHolderPageTitleInTitleArea" runat="server">
        <span class="die">
    		<SharePoint:ListProperty Property="LinkTitle" runat="server" id="ID_LinkTitle"/>
    	</span>
    </asp:Content>
    
    <asp:Content ID="Content3" ContentPlaceHolderId="PlaceHolderPageImage" runat="server">
        <img src="/_layouts/15/images/blank.gif?rev=23" width='1' height='1' alt="" />
    </asp:Content>
    
    <asp:Content ID="Content4" ContentPlaceHolderId="PlaceHolderMain" runat="server">
    <SharePoint:UIVersionedContent ID="UIVersionedContent1" UIVersion="4" runat="server">
        <ContentTemplate>
        <div style="padding-left:5px">
        </ContentTemplate>
    </SharePoint:UIVersionedContent>
        <table class="ms-core-tableNoSpace" id="onetIDListForm">
         <tr>
          <td>
         <WebPartPages:WebPartZone runat="server" FrameType="None" ID="Main" Title="loc:Main" />
          </td>
         </tr>
        </table>
    <SharePoint:UIVersionedContent ID="UIVersionedContent2" UIVersion="4" runat="server">
        <ContentTemplate>
        </div>
        </ContentTemplate>
    </SharePoint:UIVersionedContent>
    </asp:Content>
    
    <asp:Content ID="Content5" ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
        <SharePoint:DelegateControl ID="DelegateControl1" runat="server" ControlId="FormCustomRedirectControl" AllowMultipleControls="true"/>
        <SharePoint:UIVersionedContent ID="UIVersionedContent3" UIVersion="4" runat="server"><ContentTemplate>
            <SharePoint:CssRegistration Name="forms.css" runat="server"/>
        </ContentTemplate></SharePoint:UIVersionedContent>
        <script>
            alert("My custom javascript added !");
        </script>
    </asp:Content>
    
    <asp:Content ID="Content6" ContentPlaceHolderId="PlaceHolderTitleLeftBorder" runat="server">
    <table cellpadding="0" height="100%" width="100%" cellspacing="0">
     <tr><td class="ms-areaseparatorleft"><img src="/_layouts/15/images/blank.gif?rev=23" width='1' height='1' alt="" /></td></tr>
    </table>
    </asp:Content>
    
    <asp:Content ID="Content7" ContentPlaceHolderId="PlaceHolderTitleAreaClass" runat="server">
    <script type="text/javascript" id="onetidPageTitleAreaFrameScript">
        if (document.getElementById("onetidPageTitleAreaFrame") != null) {
            document.getElementById("onetidPageTitleAreaFrame").className = "ms-areaseparator";
        }
    </script>
    </asp:Content>
    
    <asp:Content ID="Content8" ContentPlaceHolderId="PlaceHolderBodyAreaClass" runat="server">
    <SharePoint:StyleBlock ID="StyleBlock1" runat="server">
    .ms-bodyareaframe {
        padding: 8px;
        border: none;
    }
    </SharePoint:StyleBlock>
    </asp:Content>
    
    <asp:Content ID="Content9" ContentPlaceHolderId="PlaceHolderBodyLeftBorder" runat="server">
    <div class='ms-areaseparatorleft'><img src="/_layouts/15/images/blank.gif?rev=23" width='8' height='100%' alt="" /></div>
    </asp:Content>
    
    <asp:Content ID="Content10" ContentPlaceHolderId="PlaceHolderTitleRightMargin" runat="server">
    <div class='ms-areaseparatorright'><img src="/_layouts/15/images/blank.gif?rev=23" width='8' height='100%' alt="" /></div>
    </asp:Content>
    
    <asp:Content ID="Content11" ContentPlaceHolderId="PlaceHolderBodyRightMargin" runat="server">
    <div class='ms-areaseparatorright'><img src="/_layouts/15/images/blank.gif?rev=23" width='8' height='100%' alt="" /></div>
    </asp:Content>
    
    <asp:Content ID="Content12" ContentPlaceHolderId="PlaceHolderTitleAreaSeparator" runat="server"/>
    
  6. In MyList Schema.xml, update the Form element for New Form. When UseLegacyForm attribute set to “FALSE”, a default list web part to a custom new form page inside web part zone “Main”.
    <Form Type="NewForm" Url="CustomNewForm.aspx" Path="CustomNewForm.aspx" WebPartZoneID="Main" UseLegacyForm="FALSE"  />
    
  7. Build and Deploy.

MyListCustomForm2

Furthermore, I also find you could have Page_Load event in the custom new form aspx page as per ikarstein

Advertisements

Tagged: , , , , , , ,

4 thoughts on “Create List Custom Form in SharePoint 2013

  1. Richard H 12/29/2013 at 5:02 PM Reply

    I’m using SharePoint Online 2013, and I’m getting an exception: “Could not complete this action due to an invalid site or feature definition. Please examine the server logs or contact your administrator for assistance.”

    I wasn’t able to check the server logs. Any idea what can cause this problem?

    • tjenho 01/07/2014 at 4:29 PM Reply

      Sorry for the late response, I just came back from my holiday. Try to create a simple list without custom new / edit form page – if it successful then the culprit is the custom new / edit form page.

      I’m not sure where to get default new / edit form page in SharePoint Online.

  2. Mircea Lar 01/09/2014 at 10:14 AM Reply

    I’m using SharePoint Server 2013 and I’m getting the error “Error 16 Error occurred in deployment step ‘Activate Features’: The system cannot find the file specified. (Exception from HRESULT: 0x80070002)”

    I suspect to be because of the CustomNewForm.aspx that is not deployed to the team site and then it is not found when activating Feature.

    Any idea that may fix this error?

    • tjenho 01/09/2014 at 10:52 AM Reply

      Have you tried to:
      -Activate Office SharePoint Server Publishing Infrastructure feature in site collection features, in Site Collection Administration section of Site Settings page

      -Activate Office SharePoint Server Publishing feature in destination site features, located on Site Administration section of Site Settings page

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: