SharePoint List NewForm Customization in SharePoint Hosted App

This article is about customizing SharePoint hosted app List NewForm and using SharePoint UI controls like Calendar, People picker etc... within custom form. Below steps help in understanding SharePoint hosted app UI customizing and leveraging SharePoint capabilities within app.

1. Create SharePoint hosted App and add columns as per your requirement. I added 'Data and Time' and 'People or group' columns for demo purpose but you can add any type of columns. Please refer How to: Create a basic SharePoint-hosted app for details about creating a SharePoint hosted app.

Fig1: SharePoint hosted app List with three columns of type 'Single Line of Text', 'Date and Time' and 'Person or Group.

2. Add new Page under the List(Right click on List -> Add new items). I added CustomForm.aspx.

Fig 2. Adding Customization page for List.

3. Go to page properties and set deployment type to 'ElementFile'.

Fig 3: Change customization page deployment type to 'ElementFile'.

4. Open newly added page (in this demo CustomForm.aspx) . Remove <WebPartPages:WebPartZonerunat="server"FrameType="TitleBarOnly"ID="full"Title="loc:full"/> from PlaceHolderMain section and add field label, description and  field as per your UI need. Also add save cancel button so that you need not to write any client side script for this functionality. Refer below code for adding labels, descriptions and fields.

 <asp:ContentContentPlaceHolderId="PlaceHolderMain"runat="server">

<WebPartPages:AllowFramingID="AllowFraming"runat="server"/>

<div>

<SharePoint:FieldLabelrunat="server"FieldName="Title"ControlMode="New"/>

<SharePoint:FieldDescriptionrunat="server"FieldName="Title"ControlMode="New"/>

<SharePoint:FormFieldrunat="server"FieldName="Title"ControlMode="New"/>

</div>

<div>

<SharePoint:FieldLabelrunat="server"FieldName="ExpenditureDateAndTime"ControlMode="New"/>

<SharePoint:FieldDescriptionrunat="server"FieldName="ExpenditureDateAndTime"ControlMode="New"/>

<SharePoint:FormFieldrunat="server"FieldName="ExpenditureDateAndTime"ControlMode="New"/>

</div>

<div>

<SharePoint:FieldLabelrunat="server"FieldName="SpentFor"ControlMode="New"/>

<SharePoint:FieldDescriptionrunat="server"FieldName="SpentFor"ControlMode="New"/>

<SharePoint:FormFieldrunat="server"FieldName="SpentFor"ControlMode="New"/>

</div>

<div>

<SharePoint:SaveButtonrunat="server"ControlMode="New"/>

<SharePoint:GoBackButtonrunat="server"ControlMode="New"/>

</div>

</asp:Content>

Note: FieldName is the corresponding column name in the list. Do not used display name. Using Display name also works but when you change display name the control won't render. So I always recommend using columns name for FieldName.

 

I added  <WebPartPages:AllowFramingID="AllowFraming"runat="server"/> element in above code to make this page work in client web part page. you can remove this if you don't want to include custom page in client web part.

5. Now Go to List schema.xml.

6. Now map your custom page to List NewForm in schema.xml. To map custom form to List new form you have to set Url, Path(not SetupPath) and Template to newly created page as shown in below code snippet. Most probable you may do mistake in this step. Observe that for NewForm I used "Path" instead of SetupPath. ensure to make this change and update Url, Path and template with your custom page path. 

    <Forms>

      <Form Type="DisplayForm" Url="DispForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" />

      <Form Type="EditForm" Url="EditForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" />

      <Form Type="NewForm" Url="CustomForm.aspx" Path="CustomForm.aspx" WebPartZoneID="Main" Template="CustomForm.aspx" />

    </Forms>

8. Go to AppManifest.xml and change start page to list custom page to make this page as app default page.

9. Now run the application and you should able to see your custom page with UI controls, Save and cancel button. Fill the form and click on save button to save data. In this sample I didn't make any changes to improve look and feel but you can apply appropriate CSS and achieve UI to meet your requirements. Add reference to your CSS file (<link rel="Stylesheet"type="text/css"href="../../Content/App.css"/>) in "PlaceHolderAdditionalPageHead" section of custom page or app master page and define appropriate styles.

Below I provided out put screen shot of this sample and also the other application out put screen achieved using this pattern.

This sample out put:

The Other application out put implemented using this pattern:

I hope this article will give a good starting point to customize SharePoint hosted app UI and using SharePoint UI controls within app.

Comments

• Anonymous
  December 17, 2014
  Hi Wilson, Very informative, can you please show the final output?

• Anonymous
  December 17, 2014
  Hi Rao, I updated step 9 with final output and additional details. Hope this helps.

• Anonymous
  April 12, 2015
  Hi Wilson, This was helpful. I tried the steps and is getting 404 NOT FOUND for the custom page. Any idea why this is happening?

• Anonymous
  June 13, 2015
  The comment has been removed

• Anonymous
  July 20, 2015
  Thanks.It's so helpful.I was able to create the forms by following the above mentioned steps. It will be very helpful if you can tell me how to upgrade the forms residing in SharePoint Hosted apps.

• Anonymous
  July 23, 2015
  Hi Prasad, Go through above steps once again and check for any typos in your code. email me if you still facing issues.

• Anonymous
  August 22, 2015
  Hi Wilson, If you follow all of the steps exactly you will receive a 404 HTTP Not Found when trying to view the custom new form. If you have any insights it would be appreciated

• Anonymous
  September 13, 2015
  Hi Wilson, I have followed all the steps mentioned above and I faced the 404 HTTP not found error. It would be very helpful if you provide solution for this.

• Anonymous
  October 26, 2015
  Wilson, I follow you steps, but when in sharepoint 2013 not app, 404 HTTP not found error appear? can you help me?

• Anonymous
  November 10, 2015
  Hello Wilson, thank you a lot for this informative article.

• Anonymous
  November 22, 2015
  Folks, I had the same issue and what I did was to include a Module node into the Elements.xml file for the List Template. This actually replaced the original NewForm.aspx by my custom NewSystem.aspx <?xml version="1.0" encoding="utf-8"?> <Elements xmlns="schemas.microsoft.com/.../">  <Module Name="Custom List">    <File Path="NewSystem.aspx" Url="NewSystem.aspx" ReplaceContent="TRUE" />  </Module>  <!-- Do not change the value of the Name attribute below. If it does not match the folder name of the List project item, an error will occur when the project is run. -->    <ListTemplate ....

• Anonymous
  August 02, 2016
  This approach is dependent on client side rendering (CSR) pipeline. In the latest Sharepoint version rendering is not happening through CSR and it will break UI implemented using above approach. There is a workaround if you already implemented UI using above approach. Close list form web part from web part management page, then it should work. Go to ....request.aspx?Contents=1 and close LFWP.for new applications follow instructions provided at https://msdn.microsoft.com/en-us/library/office/mt210455.aspx to build client side UI.

  • Anonymous
    September 27, 2016
    Wilson,In regards to the articles in the tutorial you linked, how would you apply the XsltListViewWebPart contained in the webPart to customize the layout of your list forms for New, Edit and the AllItems page (if that is possible)?Thanks!
  • Anonymous
    November 29, 2016
    Thanks for this latest comment Wilson. Is this now deprecated? I really liked this simple approach. Where can I read more about why it is no longer viable?

• Anonymous
  November 09, 2016
  text fields are not display after the deployment of the project

  • Anonymous
    November 09, 2016
    I did as per the above example. Please help me out in achieving this module

• Anonymous
  November 10, 2016
  The comment has been removed

• Anonymous
  December 28, 2016
  Hi Wilson Reddy,Thanks for your sharing, I made the same your code which you guide but I cannot deploy in my site then I see the message below :@"Error 1 CorrelationId: c13975a1-4016-4c74-b23b-3a0c6bf8be6d ErrorDetail: There was a problem with activating the app web definition. ErrorType: App ErrorTypeName: App Related ExceptionMessage: The system cannot find the file specified. (Exception from HRESULT: 0x80070002) Source: AppWeb SourceName: App Web DeploymentError occurred in deployment step 'Install SharePoint Add-in': Failed to install SharePoint Add-in. Please see the output window for details.========== Build: 1 succeeded or up-to-date, 0 failed, 0 skipped ==================== Deploy: 0 succeeded, 1 failed, 0 skipped ==========Could you give me any advice for this?Thanks,John avata