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.