Add Custom New/ Edit/ Display Form To List Using SharePoint Hosted App

In this article you will learn how to add custom New/Edit/Display form to List using SharePoint Hosted App.

SharePoint lists provide OOTB New, Edit and Display forms. However if we have specific requirements to create and attach a new form we can either create a new form via designer and make it the default form or else we can custom code and deploy aspx forms to the list.

In one of the requirements I had to create a Share Point Hosted App, create a custom form and attach it to the list. This is fairly straightforward and involves editing the list schema.xml. Let’s see the steps involved.

Default New Form would look plain like below.

new

Let’s create a new custom form,

add

Add a new aspx page to the list.

add

Open the newly added page. It would be as below,

code

Remove<WebPartPages:WebPartZonerunat="server"FrameType="TitleBarOnly"ID="full"Title="loc:full"/> from Placeholder Main section and add Field label, Field description and Form field as per need. The Field Name is the internal name of the column. Control Mode specifies whether the form Mode is New/Edit/Display.

I will be placing the fields within a div inside a table to give a tabular look and feel. 

  1. <div>  
  2.     <SharePoint:FieldLabel runat="server" FieldName="EmployeeName" ControlMode="New" />  
  3.     <SharePoint:FieldDescription runat="server" FieldName="EmployeeName" ControlMode="New" />  
  4.     <SharePoint:FormField runat="server" FieldName="EmployeeName" ControlMode="New" />  
  5. </div>   
The updated custom new form will look as below,

code

As you can see the ControlMode attribute is set to New. This is because it is a new form we are creating. For editing and displaying forms the control mode value will be Edit and Display respectively.

Now let’s attach the new form to the SharePoint list. Go to the schema.xml of the list figure out the content within the <Forms></Forms> tag which will be usually towards the end of the file.

code

Replace the NewForm tag with the below line.
  1. <Form Type="NewForm" Url="NewEmployee.aspx" Path="NewEmployee.aspx" WebPartZoneID="Main"Template="NewEmployee.aspx" />  
The updated schema looks like below:

code

If we are attaching custom edit and display forms change the corresponding Form Tags accordingly.

Now once the customization is done, let go to the custom page’s properties (Press F4) and change the deployment type to Element File.

properties

Deploy the app and click on Trust It.

Trust

Click on new Item to create an item with the custom form.

new

Now you can see that the custom form has been successfully deployed along with the app. On clicking New it picks up the Custom Form and not the OOTB one,

form

Currenlly no CSS has been applied . If any CSS or javascript needs to be added to this custom form we can add it within the custom aspx mark up inside the PlaceHolderAdditionalPageHead section.

The CSS can be referred as:
  1. <link rel="Stylesheet"type="text/css"href="../../Content/App.css"/>  
The JS can be referred as:
  1. <script type="text/javascript" src="../../Content/CustomJS.js"></script>  
Thus we saw how to create a new custom New/ Edit/ Display form and attach it to the List within a SharePoint Hosted App.