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).
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
Details:
§ SharePoint Designer Demo.
Using XSLT:
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 :
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:
After <asp:ContentContentPlaceHolderId="PlaceHolderMain" runat="server"> tag.
<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 :
2 comments
ReplyReally very happy to say, your post is very interesting to read. I never stop myself to say something about it. You’re doing a great job. Keep it up.
Fortnite gift card code generator
betturkey
Replysex hattı
https://izmirkizlari.com
sms onay
3ZFF
Post a Comment