Suppose we want to develop web application on the sharepoint 2010. But the requirement to design form
need customization.
To accomplish this there are 2 options (that i know of) that we can do:
-
Use
formtemplate
-
Create aspx
page with page content master from sharepoint
Here, I'm going to explain how to customize form using formtemplate:
-
Open
Visual Studio
2010
-
Create new
Sharepoint project (Sharepoint 2010 -> Empty SharePoint Project)
-
On the next
page, enter Uri from site we want to add.
In my example i used:
http://mlpt-sp/my/personal/testingground
-
Select
Deploy as a
farm solution because
we're going to use ascx and place it in
ControlTemplate folder
-
After
project has been loaded, next we're going to create content type. Left click on your project name (SharePointProject1) ->
Add ->
New Item -> click on
Content Type -> give it a name and then click
Add
-
Choose
base content
type you want to
create. Since I'm going to create this
content type for custom list, i picked
Item.
Click
Finish
-
Open file
Elements.xml, delete
Inherits="TRUE"
and add the following xml after tag
</FieldRefs>
<XmlDocuments>
<XmlDocument
NamespaceURI="http://schemas.microsoft.com/sharepoint/v3/contenttype/forms">
<FormTemplates
xmlns="http://schemas.microsoft.com/sharepoint/v3/contenttype/forms">
<Display>CustomFormTemplates</Display>
<Edit>CustomFormTemplates</Edit>
<New>CustomFormTemplates</New>
</FormTemplates>
</XmlDocument>
</XmlDocuments>
- The name
CustomFormTemplates
will
became id for RenderingTemplate in ascx, This was the result from that
Elements.xml
- When you have finished editing the
file Elements.xml we need to add a new ascx that will become the template
for Add / Edit / View later. Right click on project name -> Add -> New Item ->
select the User Control -> you can name it anything (in the example I used
UserControl1.ascx) and click Add
- on file
UserControl1.ascx
paste the
following html at the bottom
<%@ Register
TagPrefix="wssuc"
TagName="ToolBar"
src="~/_controltemplates/ToolBar.ascx"
%>
<SharePoint:RenderingTemplate
ID="CustomFormTemplates"
runat="server">
<Template>
<span
id='part1'>
<SharePoint:InformationBar
ID="InformationBar1"
runat="server"
/>
<div
id="listFormToolBarTop">
<wssuc:ToolBar
CssClass="ms-formtoolbar"
ID="toolBarTbltop"
RightButtonSeparator="&#160;"
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:FolderFormFields
ID="FolderFormFields1"
runat="server"/>
<h2>Custom Form Template</h2>
<SharePoint:FormComponent
ID="FormComponent1"
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:ParentInformationFieldID="ParentInformationField1"runat="server"/>
<wssuc:ToolBar
CssClass="ms-formtoolbar"ID="toolBarTbl"RightButtonSeparator="&#160;"
runat="server">
<Template_Buttons>
<SharePoint:CreatedModifiedInfoID="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>
- Move file
UserControl1.ascx from folder SharePointProject1 to ControlTemplates
- Now we need to create WebControl for SaveButton.
right click on project name -> Add -> New Item -> under installed templates
click Code -> give this class a name CustomSaveButton->
click Add
- On file
CustomSaveButton.cs
change this class access to Public with by adding the word in front of the word
class, we alse
need to inherits this class from
Microsoft.SharePoint.WebControls.SaveButton
- Override method
SaveItem which is available under inherits class. Here we can add any
custom code that we would like.
- Back to file
UserControl1.ascx here we're going to change default SaveButton with
SaveButton that we've created before. Add this tagprefix in above.
<%@ Register
Assembly="$SharePoint.Project.AssemblyFullName$"
Namespace="SharePointProject1" TagPrefix="cusa"
%>
- Change
<SharePoint:SaveButton to <cusa:CustomSaveButton
so it becomes like this
<cusa:CustomSaveButton
ID="SaveButton1"
runat="server"
/>
- Set
trust level
in sharepoint site
target to Full
- Deploy ours solution by right clicking
on Project Name
(SharePointProject1) -> clik Deploy
- Run
iisreset
- Let's try this by creating a new
Custom List and set this list to use other content type, from menu
List Settings ->
Advance Settings -> Allow management of content types,
select yes
-> then click on OK
- Back to menu
List Settings klik
Add from existing site content type
pick content type that we've already made, mine was
SharePointProject1 – CustomFormWithSaveButton
- Let's try this custom form with clicking on
the New Item then click on the content type that we've created
before
After the save button got clicked:
If the form still showing the orginal one, try again the steps above.
If the toolbar got disabled, look for the error message in event viewer
