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 (18)

  1. Rao says:

    Hi Wilson, Very informative, can you please show the final output?

  2. Wilson Reddy says:

    Hi Rao, I updated step 9 with final output and additional details. Hope this helps.

  3. Prasad says:

    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?

  4. Anb says:

    Hi Wilson, Thanks a lot! It worked for me and was very useful. I am a newbie for sharepoint. I feel that the documentation is really lame. Blogs like this really helps.

  5. Priyanka says:

    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.

  6. Wilson Reddy says:

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

  7. Robert says:

    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

  8. Maha says:

    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.

  9. Leo says:

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

  10. RahmaSayari says:

    Hello Wilson, thank you a lot for this informative article.

  11. Felipe Lodi says:

    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

    ….

  12. Wilson Reddy says:

    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.

    1. Michael says:

      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!

    2. Maher Muhtadi says:

      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?

  13. Sridhar says:

    text fields are not display after the deployment of the project

    1. Sridhar says:

      I did as per the above example. Please help me out in achieving this module

  14. Venki says:

    Hi,

    I am tried same as it is in the steps above but it does’t work. In the output result input box field not displaying. And Instead and
    I tried label and tag it shows the actual design. When i enter data and click save in the list new row was created but it display noting.

    How to solve this? can anyone help me to solve this.

  15. John avata says:

    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 Deployment
    Error 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

Skip to main content