Custom SharePoint List Forms

Business Cases:

In SharePoint you can customize list forms by different ways.

1-    SharePoint Designer.
Allow you to apply CSS and use JavaScript because the forms are Site Pages, you are restricted from  using code-behind or embedded code. Additionally, SharePoint Designer may not be available to  everyone, nor does it produce a reusable solution. (But you can use this output in visual studio by  using wsp package for the site).

§  Using XSLT.

                                          i.    This way is perfect in small scale of customization like replace SharePoint field by another presenting.

§  Using JavaScript.

                                          i.    You can use this solution for many cases one of them is create cascading dropdown menu.

2-    InfoPath.

§  Is quick and easy and is used throughout SharePoint, particularly for Workflow forms, however, you can't use JavaScript or code-behind for processing, nor can you use CSS to style the form.

3-    Visual Studio.

§  Replace form by application page.

                                          i.    This case is useful when you want to replace all page by another page which you can control everything in it.

                                         ii.    Don't use this solution as you can, because you can create your own custom field and do everything you want.

Details:

§  SharePoint Designer Demo.
Using XSLT:

In this demo I want to change the date format in display form and replace date picker in Edit Form by input type date.

1-    Create SharePoint List "Students" which have 2 fields "Title, DateOfBirth".

2-    Open SharePoint designer.

3-    By default there are 3 forms (DispForm.aspx, EditForm.aspx, NewForm.aspx) all this forms are web part form so you can't change the date format in this web part directly.

4-    To change the date format you must select the "DateOfBirth" field then change the format so create new display form from new button in forms section.

5-    Open DP.aspx form and search for "DateOfBirth" to get its section in xslt form.

<td width="190px" valign="top" class="ms-formlabel">   <H3 class="ms-standardheader">     <nobr>DateOfBirth</nobr>   </H3> </td> <td width="400px" valign="top" class="ms-formbody">   <xsl:value-of select="@DateOfBirth"/> </td>

6-    Replace this markup with the next

<td width="190px" valign="top" class="ms-formlabel">   <H3 class="ms-standardheader">     <nobr>Birthday</nobr>   </H3> </td> <td width="400px" valign="top" class="ms-formbody">   <xsl:value-of select="ddwrt:FormatDate(string(@DateOfBirth), 1033, 3)"/>  </td>

 FormatDate Function Parameters

Output	Locale	Format
3/23/2009	1033	1
3/23/2009 12:00 AM	1033	2
Monday, March 23 2009	1033	3
12:00 AM	1033	4
Monday, March 23, 2009 12:00 AM	1033	7
3/23/2009 12:00:00 AM	1033	13
Monday, March 23, 2009 12:00:00 AM	1033	15
23/03/2009	2057	1
3/23/2009 12:00 AM	2057	2
23 March 2009	2057	3
00:00	2057	4
23/03/2009 00:00	2057	5
23 March 2009 00:00	2057	7
00:00:00	2057	12
23/03/2009 00:00:00	2057	13
23 March 2009 00:00:00	2057	15

7-    The first part of demo end and I want to customize the edit form now. Like previous steps create edit form "EF.aspx" and open it in SharePoint Designer.

8-    Search for "DateOfBirth" to get its section in xslt form.

<tr>   <td width="190px" valign="top" class="ms-formlabel">     <H3 class="ms-standardheader">       <nobr>DateOfBirth</nobr>     </H3>   </td>   <td width="400px" valign="top" class="ms-formbody">     <SharePoint:FormField runat="server" id="ff2{$Pos}" ControlMode="Edit"  FieldName="DateOfBirth"  __designer:bind="{ddwrt:DataBind('u',concat('ff2',$Pos),'Value','ValueChanged','ID' ,ddwrt:EscapeDelims(string(@ID)),'@DateOfBirth')}"/>     <SharePoint:FieldDescription runat="server" id="ff2description{$Pos}"  FieldName="DateOfBirth" ControlMode="Edit"/>   </td> </tr>

9-    Replace this markup with the next (read the article about __designer:bind function)

<tr>   <td width="190px" valign="top" class="ms-formlabel">     <H3 class="ms-standardheader">       <nobr>DateOfBirth</nobr>     </H3>   </td>   <td width="400px" valign="top" class="ms-formbody">     <asp:TextBox  __designer:bind="{ddwrt:DataBind('u',concat('ff2',$Pos),'Text','TextChanged','ID' ,ddwrt:EscapeDelims(string(@ID)),'@DateOfBirth')}"  ID="ff2{$Pos}" runat="server" TextMode="Date"></asp:TextBox>     <SharePoint:FieldDescription runat="server" id="ff2description{$Pos}"  FieldName="DateOfBirth" ControlMode="Edit"/>   </td> </tr>

10- Referring to this demo with basic knowledge in xslt you can change the form UI as you need.

Using JavaScript :

This demo for implementing cascaded dropdown list in SharePoint list.

1-    Create 3 custom lists (Employees, Country, and City).

2-    The problem appears when adding new item in Employees list. You can create new employee with country "Egypt" and city "Makaa" which is invalid.

3-    To implement cascaded dropdown list, we need to download below Jquery files from Jquery site.

a.      jquery.SPServices-2014.01.js

b.     Jquery-1.9.0.js

4-    Upload these two files to any document library where everyone has access to it. I would suggest uploading these files to Site Assets library of top level site.

5-    Open NewForm.aspx for Employees list in SharePoint designer.

6-    Add the below script in both NewForm.aspx and EditForm.aspx page.

7-    Insert this script:

<script src="/SiteAssets/jquery-1.9.0.js"></script>

<script src="/SiteAssets/jquery.SPServices-2014.01.js"></script>

<script>

    $(document).ready(function () {

        $().SPServices.SPCascadeDropdowns({

            //child list name

            relationshipList: "City",

            //Lookup field name in city list

            relationshipListParentColumn: "CountryFk",

            //Title field in city list

            relationshipListChildColumn: "Title",

            //Lookup field of parent list in employees list

            parentColumn: "Employee Country",

            //Lookup field of child list in employees list

            childColumn: "Employee City",

            debug: true

        });

    });

</script>

After <asp:ContentContentPlaceHolderId="PlaceHolderMain" runat="server"> tag.

§  InfoPath Demo.

 working on it......

§  Visual Studio Demo.

       In this demo I want to replace the display form by application page.

This case may be used if you want to change all the form not only small section. Application page is not preferred solution you can do everything you need by using field rendering solution.

Demo:

1-    Create SharePoint project "CustomDisplayForm" using visual studio.

2-    Add an item of type List "myList".

3-    Open Schema.xml file in the myList folder.

4-    In Forms tag there are 3 nested form tags one for every form (Display, Edit, and New).

5-    Now create new application page "CDisplayForm.aspx" and add the mapped folder pages.

6-    Put CDisplayForm.aspx in pages folder.

7-    Remove Dynamic from DynamicMasterPageFile in Page directive in CDisplayForm.aspx.

8-    Then Make the CDisplayForm class inherit from WebPartPage regardless LayoutsPageBase.

Note : WebPartPage in Microsoft.SharePoint.WebPartPages namespace. 

9-    Back to Schema.xml and make display form tag like this :

     Just replace form.aspx in SetupPath attribute by CDisplayForm.aspx.

Attribute	Meaning
Type	Type of this form "DisplayForm | EditForm | NewForm"
Url	Display name for this form in the address section of the browser.
SetupPath	Physical location for custom form.
UseLegacyForm	Use default form plus custom form or custom form only.

10- Type any word in your page to test the result the deploy solution.

11- The display form for any item in my list will be look like this :