Create A 2010 SharePoint Application That Uses Custom List Forms

1.
Create a new SharePoint site based on the Blank template and name it Simple ASCX Form with a URL
that ends with SimpleASCXForm
2. Open Visual Studio 2010 and create a new SharePoint Project based on the Empty SharePoint Project
template and name it SimpleASCXForm
3. Set the sites URL and make sure to deploy it as a farm solution
4. After the project has been created, right-click on the project name and choose Add New Folder
5. Specify the name SiteColumns for the folder name
6. Similarly add a folder named ContentTypes
7. Next add the SharePoint Layouts Mapped folder
8. Finally, add a SharePoint Mapped folder
9. Choose the CONTROLTEMPLATES folder in the selection list
10. Right-click on the SiteColumns folder and choose Add New Item
11. From the list of SharePoint items to create, choose Empty Element and rename the default name
EmptyElement1 to SiteColukmns
12. Within the <Elements> tag, create the site column definitions using for each column at the minimum the
following structure:
<Field ID="" Name="" Type="" />
13. From the Tools pull-down menu, choose Create GUID and use the Copy button to copy the
generated GUID into the clipboard.
14. Paste the clipboard contents into the ID attribute for each new field, making sure to generate a new
GUID for each by clicking the New GUID button before clicking the Copy button.
<Field ID="{AA5F1111-7AAE-4c3a-A4E6-33D208504281}" Name="" Type="" />
15. Add the Name and Type values for each field, referring to the following for guidance on field types and
any optional or additionally required attributes based on other choices made for the field definition.
http://msdn.microsoft.com/en-us/library/aa979575(v=office.14).aspx
16. For example, you can copy and paste the following code within the <Elements> tag:
<Field ID="{AA5F1111-7AAE-4c3a-A4E6-33D208504281}" Name="CVMRequester" DisplayName="Requester" Type="User"
Required="TRUE" ShowField="ImnName" UserSelectionMode="0">
 
</Field>
<Field ID="{8B652F71-BF88-447A-B0C2-2CFD8221D9A0}" Name="CVMOriginator" DisplayName="Originator"
Type="Text">
<DefaultFormula>=[Me]</DefaultFormula>

</Field>
<Field ID="{3699C3EE-9A3B-47e7-B1C3-841D271EBD7F}" Name="CVMRequestDate" DisplayName="Request date"
Type="DateTime" Required="TRUE" ReadOnly="TRUE" Format="DateOnly">
<Default>[today]</Default>
</Field>
<Field ID="{6C380D66-E648-4ca2-A2FC-0605B6729CFB}" Name="CVMExpenditureType" DisplayName="Expenditure
type" Type="Choice" Format="RadioButtons" >
<Default>Expense</Default>
<CHOICES>
<CHOICE>Capital</CHOICE>
<CHOICE>Expense</CHOICE>
</CHOICES>
</Field>
<Field ID="{E0F0CEE8-92CA-45f4-9750-7CB719EBA57E}" Name="CVMRequestAmount" DisplayName="Request amount"
Type="Currency" Min="100" Max="50000" />
<Field ID="{14E33EB2-2608-4761-ADB7-23D4863BADBD}" Name="CVMDepartment" DisplayName="Department"
Type="Lookup" List="Lists/Departments" ShowField="Title" />
<Field ID="{45FDA1BB-2735-409a-837A-0A712709B996}" Name="CVMAbstract" DisplayName="Abstract"
Type="Text" />
<Field ID="{7137582A-053C-45b6-9750-CF239ED57DF7}" Name="CVMDescription" DisplayName="Description"
Type="Note" RestrictedMode="FALSE" RichTextMode="FullHtml" />

<Field ID="{3DAC3DF3-C129-4A02-8DE3-7A9CFB299708}" Name="CVMIndustialApp" DisplayName="Industial
Application" Type="MultiChoice">
<CHOICES>
<CHOICE>Alternative Energy</CHOICE>
<CHOICE>Computer</CHOICE>
<CHOICE>Consumer/Gaming</CHOICE>
<CHOICE>Defense/Aerospace</CHOICE>
<CHOICE>Industrial/Lighting</CHOICE>
<CHOICE>Medical</CHOICE>
<CHOICE>Telecom</CHOICE>
<CHOICE>Transportation</CHOICE>
</CHOICES>
</Field>
17. Right-click on the ContentTypes folder and choose Add New Item
18. In the list of items, choose Content Type and rename the default Name to ContentType Request
19. VisualStudio 2010 will connect to your newly created site to retrieve the existing content types.
20. Choose Item as the inherited from content type, then click the Finish button.
21. Modify the ContentType elements Name attribute , optionally giving a different Group name and
Description but making sure to change the Inherits attribute from TRUE to FALSE, for example
<ContentType ID="0x01001216a63599a9476aa2a9ee94793d6579"
Name="ContentType - Request"
Group="CVM Content Types"
Description="A Content Type for Requests"
Inherits="FALSE"
Version="0">
22. Each filed that you want to make part of the content type should be added as a <FieldRef> element
within the <FieldRefs> container element and must include the ID and Name attributes you created in
the SiteColumns item created earlier. The easiest way is to copy and paste the <Field > tags from the
SiteColumns Elements.xml file and remove any illegal attributes, then modify (using Alt-Mouse Drag to
select column mode) to insert the Ref after each occurrence of <Field. For example:
<FieldRef
<FieldRef
<FieldRef
<FieldRef
<FieldRef
<FieldRef
<FieldRef
<FieldRef
<FieldRef
ID="{fa564e0f-0c70-4ab9-b863-0177e6ddd247}"
ID="{AA5F1111-7AAE-4c3a-A4E6-33D208504281}"
ID="{8B652F71-BF88-447A-B0C2-2CFD8221D9A0}"
ID="{3699C3EE-9A3B-47e7-B1C3-841D271EBD7F}"
ID="{6C380D66-E648-4ca2-A2FC-0605B6729CFB}"
ID="{E0F0CEE8-92CA-45f4-9750-7CB719EBA57E}"
ID="{14E33EB2-2608-4761-ADB7-23D4863BADBD}"
ID="{45FDA1BB-2735-409a-837A-0A712709B996}"
ID="{7137582A-053C-45b6-9750-CF239ED57DF7}"
Name="Title" />
Name="CVMRequester" />
Name="CVMOriginator" />
Name="CVMRequestDate" />
Name="CVMExpenditureType" />
Name="CVMRequestAmount" />
Name="CVMDepartment" />
Name="CVMAbstract" />
Name="CVMDescription" />


<FieldRef ID="{3DAC3DF3-C129-4A02-8DE3-7A9CFB299708}" Name="CVMIndustialApp" />
<FieldRef ID="{67df98f4-9dec-48ff-a553-29bece9c5bf4}" Name="Attachments" />
23. Also add the mandatory Title column that has the well-known ID of {fa564e0f-0c70-4ab9-b8630177e6ddd247} as well as the built-in Attachments column with an ID of {67df98f4-9dec-48ff-a55329bece9c5bf4}
24. Lastly, in this file, even though we have not created the custom form yet, we can specify that the content
type will use a different form from the default ListForm. If we intend to give our custom form the ID
RequestForm and if we intend to use the same form for New, Display, and Edit purposes, the code that
should be entered after the closing </FieldRefs> tag and before the closing </ContentType> tag should
be:
<XmlDocuments>
<XmlDocument NamespaceURI="http://schemas.microsoft.com/sharepoint/v3/contenttype/forms">
<FormTemplates xmlns="http://schemas.microsoft.com/sharepoint/v3/contenttype/forms">
<Display>RequestForm</Display>
<Edit>RequestForm</Edit>
<New>RequestForm</New>
</FormTemplates>
</XmlDocument>
</XmlDocuments>
25. Since one of our site columns is a lookup column that pulls its values from a list called Departments, we
should create the Departments list next. Right-click on the project name and choose Add New Folder
and name the folder Lists
26. Right-click on the newly created Lists folder and choose Add New Item
27. Select List Definition as the item type, then change the default Name to List Departments
28. In the List Definition Settings dialog, change the display name of the list definition to List
Departments, set the type to Custom List, and keep the list instance checkbox checked.
29. A series of files and folders will get generated but the Elements.xml file for the list definition will be
opened in the editor. Make the changes as suggested but make sure that for each new list definition, you
change the ListTemplate elements Type attribute to a unique value for the project. If the list is not
intended to be used frequently and is meant only for lookups, we can choose to not display the list name
on the QuickLaunch. For example, the changes you make might look like:
<ListTemplate
Name="List - Departments"
Type="10001"
BaseType="0"
OnQuickLaunch="FALSE"
SecurityBits="11"
Sequence="410"
DisplayName="Departments"
Description="List of Departments"
Image="/_layouts/images/itgen.png"/>
30. For easier identification, rename the folders and files created for the list
i.e. rename the folder ListInstance1 to List instance Departments, and the files Elements.xml to
ElementsDefinitionListDepartments.xml and ElementsInstanceListDepartments.xml respectively.
31. Edit the file ElementsInstanceListDepartments.xml, changing TemplateType to match the Type defined
in the list definition and Url to match the List attribute in the definition of the Department Site Column
<ListInstance Title="Departments"
OnQuickLaunch="FALSE"
TemplateType="10001"
Url="Lists/Departments"
Description="List of Departments">
</ListInstance>
32. Within the <ListInstance> above the closing </ListInstance> tag add the data that will be populated to
the list instance when it is deployed, for example (this is a simple list that contains only the title field):
<Data>
<Rows>
<Row>
<Field
</Row>
<Row>
<Field
</Row>
<Row>
<Field
</Row>
<Row>
<Field
</Row>
Name="Title">Finance</Field>
Name="Title">Information Technology</Field>
Name="Title">Human Resources</Field>
Name="Title">Operations</Field>
<Row>
<Field Name="Title">Sales</Field>
</Row>
</Rows>
</Data>
33. Open the Schema.xml file for the list definition

34. Change the <List> elements Url attribute to match the one defined in the
ElementsInstanceListDepartments.xml and the Title to simply Departments
<List
xmlns:ows="Microsoft SharePoint"
Title="Departments"
FolderCreation="FALSE"
Direction="$Resources:Direction;"
Url="Lists/Departments"
BaseType="0"
xmlns="http://schemas.microsoft.com/sharepoint/"
>
35. We are ready for the first trial build./deploy Right-click on the project and choose Deploy
36. If the code compiles cleanly and there are no errors during deployment, you should get a Deploy: 1
succeeded message in the Output window
37. You can confirm this by navigating to the Lists view and then opening the new Departments list
38. To add the customized form additional steps must be taken.

39. Start by creating the list that will use the previously defined content type and yet-to-be-designed custom
form. Add to the Lists folder a new List Definition (not List Definition From Content Type) and name it
List Requests
40. Modify the List Definition Settings dialog appropriately, then click Finish
41. Rename the files and folders similarly to the names used when defining the Departments list
42. In the newly renamed ElementsDefinitionListRequests.xml, modify the ListTemplate tags attributes so
that the Type is unique and adding the DisallowContentTypes with a value of False, i.e.
<ListTemplate
Name="List - Requests"
Type="10010"
BaseType="0"
OnQuickLaunch="TRUE"
SecurityBits="11"
Sequence="410"
DisplayName="Requests"
Description="List of Requests"
Image="/_layouts/images/itgen.png"
DisallowContentTypes="FALSE"
/>
43. In the newly renamed ElementsInstanceListRequests.xml, modify the TemplateType to match the
change in the definition, as well as the Url and Title to simplify their names
<ListInstance Title="Requests"
OnQuickLaunch="TRUE"
TemplateType="10010"
Url="Lists/Requests"
Description="List of Requests">
</ListInstance>
44. In the List Definitions Schema.xml file, change the <List> tags Url attribute to match the one defined in
the List Instance, but also make sure to add the attribute EnableContentTypes with a TRUE value.
<List
xmlns:ows="Microsoft SharePoint"
Title="Requests"
FolderCreation="FALSE"
Direction="$Resources:Direction;"
Url="Lists/Requests"
BaseType="0"
xmlns="http://schemas.microsoft.com/sharepoint/"
EnableContentTypes="TRUE"
>
45. Remove (or comment out) the ContentTypeRef elements currently present within the <ContentTypes>
tag, and add the reference to the new ContentType you created earlier by copying and pasting its ID
<ContentTypes>
<!-<ContentTypeRef ID="0x01">
<Folder TargetName="Item" />
</ContentTypeRef>
<ContentTypeRef ID="0x0120" />
-->
<ContentTypeRef ID="0x01001216a63599a9476aa2a9ee94793d6579" />
</ContentTypes>
46. Even though we specified that the list can only use our custom content type, we still need to repeat the
field definitions. Copy those from the Elements.xml for the custom content type into the
<Fields></Fields> element in the lists Schema.xml, i.e.
<Fields>
<Field ID="{AA5F1111-7AAE-4c3a-A4E6-33D208504281}" Name="CVMRequester" DisplayName="Requester"
Type="User" Required="TRUE" ShowField="ImnName" UserSelectionMode="0">
 
</Field>
<Field ID="{8B652F71-BF88-447A-B0C2-2CFD8221D9A0}" Name="CVMOriginator" DisplayName="Originator"
Type="Text">
<DefaultFormula>=[Me]</DefaultFormula>
</Field>
<Field ID="{3699C3EE-9A3B-47e7-B1C3-841D271EBD7F}" Name="CVMRequestDate" DisplayName="Request date"
Type="DateTime" Required="TRUE" ReadOnly="TRUE" Format="DateOnly">
<Default>[today]</Default>
</Field>
<Field ID="{6C380D66-E648-4ca2-A2FC-0605B6729CFB}" Name="CVMExpenditureType"
DisplayName="Expenditure type" Type="Choice" Format="RadioButtons">
<Default>Expense</Default>
<CHOICES>
<CHOICE>Capital</CHOICE>
<CHOICE>Expense</CHOICE>
</CHOICES>
</Field>
<Field ID="{E0F0CEE8-92CA-45f4-9750-7CB719EBA57E}" Name="CVMRequestAmount" DisplayName="Request
amount" Type="Currency" Min="100" Max="50000" />
<Field ID="{14E33EB2-2608-4761-ADB7-23D4863BADBD}" Name="CVMDepartment" DisplayName="Department"
Type="Lookup" List="Lists/Departments" ShowField="Title" />
<Field ID="{45FDA1BB-2735-409a-837A-0A712709B996}" Name="CVMAbstract" DisplayName="Abstract"
Type="Text" />
<Field ID="{7137582A-053C-45b6-9750-CF239ED57DF7}" Name="CVMDescription" DisplayName="Description"
Type="Note" RestrictedMode="FALSE" RichTextMode="FullHtml" />

<Field ID="{3DAC3DF3-C129-4A02-8DE3-7A9CFB299708}" Name="CVMIndustialApp" DisplayName="Industial
Application" Type="MultiChoice">
<CHOICES>
<CHOICE>Alternative Energy</CHOICE>
<CHOICE>Computer</CHOICE>
<CHOICE>Consumer/Gaming</CHOICE>
<CHOICE>Defense/Aerospace</CHOICE>
<CHOICE>Industrial/Lighting</CHOICE>
<CHOICE>Medical</CHOICE>
<CHOICE>Telecom</CHOICE>
<CHOICE>Transportation</CHOICE>
</CHOICES>
</Field>
<Field ID="{67df98f4-9dec-48ff-a553-29bece9c5bf4}" Name="Attachments" DisplayName="Attachments"

Type="Attachments" />
</Fields>
47. Near the bottom of the Schema.xml file, locate the <Forms> element and modify each individual <Form>
element by adding the Template attribute with a value corresponding to the ID attribute of the yet
uncreated custom form.
<Forms>
<Form Type="DisplayForm" Url="DispForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main"
Template="RequestForm" />
<Form Type="EditForm" Url="EditForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main"
<Form Type="NewForm" Url="NewForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main"
</Forms>
48. Create the custom form by right-clicking on the CONTROLTEMPLATES folder in your project and choosing
Add New Item
49. The CONTROLTEMPLATES is a special folder and will only allow you to choose from a restricted set of
SharePoint items. Choose User Control and name the control RequestRenderingTemplate.ascx
50. Hierarchically below the item that you just created, the stub of a code-behind file will get generated.
Right-click on this file (it should be named RequestRenderingTemplate.ascx.cs) then choose Delete.
51. In the file RequestRenderingTemplate.ascx remove the reference to the now-deleted CodeBehind on the
last line.
52. Also, add two new Register elements, one to the existing ToolBar control file, and one to the future form
control file that you will create later.
53. To create the custom form container, start by copying the default ListForm code by opening the 14 hive
usually located at C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14 and
then in the subfolder TEMPLATE\CONTROLTEMPLATES open the file named DefaultTemplates.ascx in a

text editor, then copy the RenderingTemplate that has the id=ListForm into your clipboard.
54. Paste the contents of the clipboard into the bottom of the RequestRenderingTemplate.ascx file that you
created
55. Most importantly, you must replace the value of the rendering templates id attribute currently set to
ListForm with RequestForm or else all lists will render using your custom form.
56. Next, edit the contents of that file to remove the reference to the ListFieldIterator, which is how
SharePoint normally renders form fields (by stacking one field on top of the other). In its place, we will
add a tag referring to the form custom form. Also, delete/comment out the reference to the
AttachmentRows template we will be adding our own rendering of attachment references.
<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral,
PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls"
Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities"
<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0,
Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages"
<%@ Control Language="C#" AutoEventWireup="true" %> <%-- 20121221:Cesar - Remove codebehind reference --%>
<%-- 20121221:Cesar - Added the lines below --%>
<%@ Register TagPrefix="wssuc" TagName="ToolBar" src="~/_controltemplates/ToolBar.ascx" %>
<%@ Register TagPrefix="CustomFormContent" TagName="FormRequest"
Src="~/_controltemplates/SimpleASCXForm/FormRequest.ascx" %>
<SharePoint:RenderingTemplate id="RequestForm" runat="server">
<Template>
<span id='part1'>
<SharePoint:InformationBar ID="InformationBar1" runat="server"/>
<div id="listFormToolBarTop">
<wssuc:ToolBar CssClass="ms-formtoolbar" id="toolBarTbltop"
RightButtonSeparator=" " runat="server">
<Template_RightButtons>
<SharePoint:NextPageButton ID="NextPageButton1" runat="server"/>
<SharePoint:SaveButton ID="SaveButton1" runat="server"/>
<SharePoint:GoBackButton ID="GoBackButton1" runat="server"/>
</Template_RightButtons>
</wssuc:ToolBar>
</div>
<SharePoint:FormToolBar ID="FormToolBar1" runat="server"/>
<SharePoint:ItemValidationFailedMessage ID="ItemValidationFailedMessage1" runat="server"/>
<table class="ms-formtable" style="margin-top: 8px;" border="0" cellpadding="0"
cellspacing="0" width="100%">
<SharePoint:ChangeContentType ID="ChangeContentType1" runat="server"/>
<SharePoint:FolderFormFields ID="FolderFormFields1" runat="server"/>


<CustomFormContent:FormRequest runat="server" />

<SharePoint:ApprovalStatus ID="ApprovalStatus1" runat="server"/>
<%-- <SharePoint:FormComponent TemplateName="AttachmentRows" runat="server"/> --%>
</table>
<table cellpadding="0" cellspacing="0" width="100%"><tr><td class="ms-formline">
<img src="/_layouts/images/blank.gif" width='1' height='1' alt="" />
</td></tr></table>
<table cellpadding="0" cellspacing="0" width="100%" style="padding-top: 7px">
<tr>
<td width="100%">
<SharePoint:ItemHiddenVersion ID="ItemHiddenVersion1" runat="server"/>
<SharePoint:ParentInformationField ID="ParentInformationField1" runat="server"/>
<SharePoint:InitContentType ID="InitContentType1" runat="server"/>
<wssuc:ToolBar CssClass="ms-formtoolbar" id="toolBarTbl"
RightButtonSeparator=" " runat="server">
<Template_Buttons>
<SharePoint:CreatedModifiedInfo ID="CreatedModifiedInfo1" runat="server"/>

</Template_Buttons>
<Template_RightButtons>
<SharePoint:SaveButton ID="SaveButton2" runat="server"/>
<SharePoint:GoBackButton ID="GoBackButton2" runat="server"/>
</Template_RightButtons>
</wssuc:ToolBar>
</td>
</tr>
</table>
</span>
<SharePoint:AttachmentUpload ID="AttachmentUpload1" runat="server"/>
</Template>
</SharePoint:RenderingTemplate>
57. Add jQuery libraries and CSS stylesheets (with images). Right-click on the Layouts\SimpleASCXForm
project folder and choose Add New Folder and name it Scripts. Repeat for a folder named Styles.
58. Into the Script folder, copy the files jquery-1.8.3.min.js and jquery-ui-1.9.2.redmond.min.js (or some
other jQuery minimized version and/or theme instead of the Redmond theme). See attached resources.
59. Assuming you are using the Redmond jQuery UI theme, into the Styles folder copy the files jquery-ui1.9.2.redmond.min.css and NPDStyles.css as well as the Images folder. See attached resources.
60. In the Solution Explorer pane, click on the second icon (to Show All Files).
61. Select each of the files/folder that you copied by Ctrl-Click to keep them selected, then right-click on any
one and choose Include In Project which will change their icons from plain white to their default.
62. Right-click on the project name and choose Add New Item and select the User Control, but rename
it to FormRequest.ascx from its default UserControl1.ascx
63. This will automatically create a new hierarchy in the CONTROLTEMPLATES folder starting with the name
of the project.
64. Double-click on the FormRequest.ascx item to open it in the editor.
65. Below the stub code that was created add the references to the Script and Style files that we copied
earlier, i.e.
<SharePoint:ScriptLink runat="server" ID="JQuery" Name="/_layouts/SimpleASCXForm/Scripts/jquery1.8.3.min.js" />
<SharePoint:ScriptLink runat="server" ID="JQueryUITabs" Name="/_layouts/SimpleASCXForm/Scripts/jquery-ui1.9.2.redmond.min.js" />
<link type="text/css" rel="stylesheet" href="/_layouts/SimpleASCXForm/Styles/jquery-ui1.9.2.redmond.min.css" />
<link type="text/css" rel="stylesheet" href="/_layouts/SimpleASCXForm/Styles/NPDStyles.css" />
66. Below this, add the JavaScipt code including the jQuery tab code, and any hiding that ought to occur
based on possible status of the item (New, Display, Edit) or if visibility of some fields depends on the
values of others.
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").tabs();
// Hide all the tabs if we are in the new form
if (window.location.pathname.indexOf('NewForm.aspx') != -1) {
//$('#tabs').tabs("remove", "#headerTabReadOnly");
$('#tabs').tabs("remove", "#requestDetailsTab");
$('#tabs').tabs("remove", "#attachmentsTab");
} else {
//For Display and Edit forms, some changes are common
//$('#tabs').tabs("remove", "#headerTab");
//Some changes are specific to Edit form only
if (window.location.pathname.indexOf('EditForm.aspx') != -1) {
//Put the two radio buttons on one row
var spanRdoExpense = $("span.ms-RadioText[title='Expense']");
var tdExpense = spanRdoExpense.parent();
var trExpense = tdExpense.parent();
var htmlExpense = tdExpense.html();
var spanRdoCapital = $("span.ms-RadioText[title='Capital']");
trExpense.remove();
spanRdoCapital.after(htmlExpense);
//Arrange checkboxes into 3 columns instead of SharePoint default of 1
var MAXCOLUMNS = 3;
var arrHTML = [];
var arrDelTR = [];
var trLastKeptRow = null;
var spanChkFirst = $("span.ms-RadioText[title='Alternative Energy']"); //Find the first
(or any) checkbox span
var trChks = $(spanChkFirst).parent().parent().parent().children(); //Find that checkbox's
TBODY to get at the TR siblings
$(trChks).each(function (index) { //Iterate through the rows, keeping every 3rd (in this
example), and moving other row contents into cells
if (index % MAXCOLUMNS > 0) {
if (index % MAXCOLUMNS == 1) {
trLastKeptRow = $(trChks[index - 1]);
}
arrHTML.push($(this).html());
arrDelTR.push($(this));
} else {
for (var i = 0; i < arrHTML.length; i++) {
$(trChks[index - MAXCOLUMNS]).append(arrHTML[i]);
}
arrHTML.length = 0;
}
})
//Append any remaining checkboxes that did not complete a row
if (arrHTML.length > 0) {
for (var i = 0; i < arrHTML.length; i++) {
$(trLastKeptRow).append(arrHTML[i]);
}
}
//Delete rows no longer required
for (var i = 0; i < arrDelTR.length; i++) {
arrDelTR[i].remove();
}
}
}
//Regardless of what mode we are in, always set the Originator field to disabled mode and we have
to do
//additional trickery to get around the fact that a disabled text field will not send its changes
to the server
$("input[title='Originator']").attr("readonly", "readonly").focusin(hdlFocusOriginator);
$("input[title='Originator']").css("background-color", "#E6F1FF").css("border-width", 0);
})
function hdlFocusOriginator() {
var x = $("div.ms-inputuserfield[id*='CVMRequester']");
var idRequester = $(x).attr("id");
document.getElementById(idRequester).focus();
}
</script>
67. Below this, add the HTML code that will display the fields on the form.
<table style="width: 900px;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div id="tabs">
<ul>
<li><a href="#headerTab">Basic Info</a></li>

<%-- <li><a href="#headerTabReadOnly">Basic Info</a></li> --%>
<li><a href="#requestDetailsTab">Request Details</a></li>
<li><a href="#attachmentsTab">Attachments</a></li>
</ul>
<div id="headerTab" style="background-color: #E6F1FF;">
<h2 style="text-align: center;">Request</h2>
<fieldset>
<legend>Basic Information</legend>
<div class="div-table">
<div class="div-table-row">
<div class="div-table-col label-col"><SharePoint:FieldLabel runat="server"
ID="lblTitle" FieldName="Title" /></div>
<div class="div-table-col data-col"><SharePoint:FormField runat="server"
ID="Title" FieldName="Title" /></div>
</div>
ID="lblOriginator" FieldName="CVMOriginator" /></div>
ID="Originator" FieldName="CVMOriginator" /></div>
</div>
ID="lblRequester" FieldName="CVMRequester" /></div>
ID="CVMRequester" FieldName="CVMRequester" /></div>
</div>
ID="lblRequestDate" FieldName="CVMRequestDate" /></div>
ID="RequestDate" FieldName="CVMRequestDate" ControlMode="Display" /></div>
</div>
</div>
</fieldset>
</div>
<div id="requestDetailsTab">
<h2 style="text-align: center;">Details</h2>
<fieldset>
<legend>Financials</legend>
ID="lblExpenditureType" FieldName="CVMExpenditureType" /></div>
ID="ExpenditureType" FieldName="CVMExpenditureType" /></div>
</div>
ID="lblRequestAmount" FieldName="CVMRequestAmount" /></div>
ID="RequestAmount" FieldName="CVMRequestAmount" /></div>
</div>
ID="lblDepartment" FieldName="CVMDepartment" /></div>
ID="Department" FieldName="CVMDepartment" /></div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Description</legend>
ID="lblIndustialApp" FieldName="CVMIndustialApp" /></div>
ID="IndustialApp" FieldName="CVMIndustialApp" /></div>
</div>
<div class="div-table-col
ID="lblAbstract" FieldName="CVMAbstract" /></div>
ID="Abstract" FieldName="CVMAbstract" /></div>
</div>
ID="lblDescription" FieldName="CVMDescription" /></div>
ID="Description" FieldName="CVMDescription" /></div>
</div>
</div>
</fieldset>
</div>
runat="server"/>
label-col"><SharePoint:FieldLabel runat="server"
data-col"><SharePoint:FormField runat="server"
label-col"><SharePoint:FieldLabel runat="server"
data-col"><SharePoint:FormField runat="server"
<div id="attachmentsTab">
<h2 style="text-align: center;">Supporting documentation</h2>
<fieldset>
<legend>Attachments</legend>
<div id="idAttachmentsRow" class="div-table-row">
<div class="div-table-col label-col">
<SharePoint:FieldLabel ID="ffAttachmentslbl" FieldName="Attachments"
</div>
<div class="div-table-col data-col">
<SharePoint:AttachmentsField ID="ffAttachmentsField"
FieldName="Attachments" runat="server"/>
<script type="text/javascript">
var elm =
document.getElementById("idAttachmentsTable");
var elmAttachmentRow =
document.getElementById("idAttachmentsRow")
if ((elm == null || elm.rows.length == 0) &&
(elmAttachmentRow != null))
elmAttachmentRow.style.display = 'none';
</script>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</td>
</tr>
</table>
68. The code above renders the Attachments field on the Attachments tab rather than after all other fields
as is usual for default SharePoint forms.
69. You can now do another deployment of the project, which should create another (but empty) list for
requests. Creating a new list item for that list should bring up the new custom form.
70. Creating a new Request item only shows the Title and Requester fields as editable (in the Basic Info tab)
71. After saving, it can be opened in Edit mode to fill in the remaining fields
72. After saving those changes, including attaching files, we can see all 3 tabs with information
73. The list of SharePoint 2010 built-in field names are listed at: http://msdn.microsoft.com/enus/library/microsoft.sharepoint.spbuiltinfieldid_fields(v=office.14).aspx
74. The list of SharePoint 2007 built-in field names AND their IDs is listed here:
http://blogs.msdn.com/b/michael_yeager/archive/2008/11/03/reference-list-for-internal-fieldnames.aspx
75. Alternatively, you can generate your own listing of built-in fields using the following Powershell script
Add-PsSnapin Microsoft.SharePoint.PowerShell
## SharePoint DLL
[void][System.Reflection.Assembly]::LoadWithPartialName("Microsoft.SharePoint")
# Description
#
Output all available Column Field GUIDs to AllColumnFields.csv
# Settings Start
set-variable -option constant -name url -value "http://cvmhome64:8000/sites/experimental/" # Site collection
set-variable -option constant -name out -value "D:AllColumnFields.csv" # Output file
# Settings End
$site
=
new-object Microsoft.SharePoint.SPSite($url)
$web
= $site.rootweb.Fields
echo "Generating File..."
ForEach ($id in $web)
{
'"' + $id.Title + `
'","' + $id.Id + `
'","' + $id.InternalName + `
'","' + $id.StaticName + `
'","' + $id.MaxLength + `
'","' + $id.Description + `
'","' + $id.Group + `
'","' + $id.TypeShortDescription + `
'"' | Out-File $out -append
}
$site.Dispose()
echo "Finished"
echo "File created at : " $out
76. Useful links:

http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.spbuiltinfieldid_fields(v=office.14).aspx
http://msdn.microsoft.com/en-us/library/aa979575(v=office.14).aspx
http://msdn.microsoft.com/en-us/library/ms462947(v=office.14).aspx

Create A 2010 SharePoint Application That Uses Custom List Forms

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Create A 2010 SharePoint Application That Uses Custom List Forms

Загружено:

Авторское право:

Доступные форматы

1.

5. Specify the name SiteColumns for the folder name

6. Similarly add a folder named ContentTypes

7. Next add the SharePoint Layouts Mapped folder

8. Finally, add a SharePoint Mapped folder

9. Choose the CONTROLTEMPLATES folder in the selection list

33. Open the Schema.xml file for the list definition

38. To add the customized form additional steps must be taken.

<Field ID="{67df98f4-9dec-48ff-a553-29bece9c5bf4}" Name="Attachments" DisplayName="Attachments"

then in the subfolder TEMPLATE\CONTROLTEMPLATES open the file named DefaultTemplates.ascx in a

<SharePoint:CreatedModifiedInfo ID="CreatedModifiedInfo1" runat="server"/>

<li><a href="#headerTab">Basic Info</a></li>

76. Useful links:

Вам также может понравиться