SharePoint Designer Custom Moss/wss form pages

SharePoint Designer Custom MOSS/WSS form pagesCategory: SharePoint Learning notes 2011-12-20 15:07 825 People read comments (0) favorite reports Sharepointserverbordertableclassassembly method One, use SharePoint Designer with enderingtemplate files to customize MOSS/WSS form pages

Take the notification list (dispform.aspx) as an example,
The system default notification list style is as follows:

The default style for the press release is really not in line with the Chinese habit, below we want to change it to look like this:

The first step-Modify the form page default Template: Open the page to be modified with SPD (dispform.aspx), find Listformwebpart, modify its TemplateName property to Codeart_noticetemplate, as follows:
------------------------------------------------------------------------------------------
<templatename xmlns= "Http://schemas.microsoft.com/WebPart/v2/ListForm" >codeart_noticetemplate</ Templatename>
------------------------------------------------------------------------------------------
Step Two--write a new template: Save the contents to the 12templatecontroltemplatescodeart_noticetemplate.ascx file: Codeart_noticetemplate.ascx
------------------------------------------------------------------------------------------
<%@ Control language= "C #" autoeventwireup= "false"%>
<%@ Assembly name= "Microsoft.SharePoint, version=12.0.0.0, culture=neutral, publickeytoken=71e9bce111e9429c"% >
<%@ Register tagprefix= "SharePoint" assembly= "Microsoft.SharePoint, version=12.0.0.0, Culture=neutral, publickeytoken=71e9bce111e9429c "
Namespace= "Microsoft.SharePoint.WebControls"%>
<sharepoint:renderingtemplate id= "codeart_noticetemplate" runat= "Server" >
<Template>
<table width= "100%" border= "0" cellspacing= "0" cellpadding= "0" >
<tr>
&LT;TD class= "Formtoolbar" >
<sharepoint:informationbar id= "InformationBar1" runat= "Server"/>
<sharepoint:formtoolbar id= "FormToolBar1" runat= "Server" visible= "false"/>
</td>
</tr>
</table>
<table width= "95%" border= "0" cellspacing= "8" cellpadding= "0" >
<tr>
&LT;TD align= "center" height= "30px" class= "title" >
<b>
<sharepoint:formfield id= "FormField1" runat= "Server" fieldname= "Title"/>
</b>
</td>
</tr>
<tr>
&LT;TD align= "Right" >
<sharepoint:createdmodifiedinfo id= "CreatedModifiedInfo1" runat= "Server"/>
</td>
</tr>
<tr>
&LT;TD height= "1" align= "center" class= "Seprow" >
</td>
</tr>
<tr>
&LT;TD valign= "Top" class= "Content" >
<sharepoint:formfield id= "FormField2" runat= "Server" fieldname= "Body"/>
</td>
</tr>
<tr>
<td>
<table border= "0" cellspacing= "0" cellpadding= "0" >
<tr>
<td>
&nbsp;&nbsp;</td>
<td>
<table border= "0" cellspacing= "0" cellpadding= "0" >
<sharepoint:formcomponent id= "FormComponent1" templatename= "Attachmentrows"
runat= "Server"/>
</table>
<sharepoint:attachmentupload visible= "false" id= "AttachmentUpload1" runat= "Server"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
&LT;TD align= "center" >
<table>
<tr>
<td>
<sharepoint:gobackbutton id= "GoBackButton2" visible= "false"
runat= "Server"/>
<input type= "button" value= ' return ' onclick= ' Javascript:closewindow (); return false; "/>
<!--img src= "/_wpresources/disform/b_close.gif" onclick= "Javascript:isclosewindow (); return false;" Width= "122" height= "+"-
</td>
</tr>
</table>
</td>
</tr>
<tr>
&LT;TD align= "center" >
&nbsp;</td>
</tr>
</table>
<script language= "JavaScript" >
function CloseWindow ()
{
if (Window.opener! = null)
{
Self.close ();
}
Else
{
History.back (-1);
}
}
</script>
</Template>
</SharePoint:RenderingTemplate>
------------------------------------------------------------------------------------------
Step three: Restart IIS or application pool.
Haha, you can refresh the page to see the effect.

The contents of Codeart_noticetemplate.ascx focus on the following tags:
------------------------------------------------------------------------------------------
<sharepoint:formfield id= "FormField1" runat= "Server" fieldname= "Title"/>
------------------------------------------------------------------------------------------
FormField is a server control, with which it can render a field of reality, edit. FieldName to specify the field name, the field name is usually the internal name (InternalName), InternalName

can be obtained using software such as SharePoint Manager 2007 or Caml Builder, or by writing your own code.

------------------------------------------------------------------------------------------
<sharepoint:createdmodifiedinfo id= "CreatedModifiedInfo1" runat= "Server"/>
------------------------------------------------------------------------------------------

This is well understood, and it displays the creation modification information for the list item.

------------------------------------------------------------------------------------------
<sharepoint:attachmentupload visible= "false" id= "AttachmentUpload1" runat= "Server"/>
------------------------------------------------------------------------------------------

This is used to transmit attachments. Since we changed the view page, do not need to upload the function, it is hidden away (visible=false).

------------------------------------------------------------------------------------------
<table border= "0" cellspacing= "0" cellpadding= "0" >
<sharepoint:formcomponent id= "FormComponent1" templatename= "Attachmentrows"
runat= "Server"/>
</table>
------------------------------------------------------------------------------------------

Although uploading attachments is not required, it is necessary to display attachments that have already been uploaded, and this is to implement display attachments.

It doesn't really have any content. Its content is implemented with additional template attachmentrows, find Defaulttemplates.ascx can find this template:

------------------------------------------------------------------------------------------
<sharepoint:renderingtemplate id= "attachmentrows" runat= "Server" >
<Template>
<tr id=idattachmentsrow>
&LT;TD nowrap= "true" valign= "Top" class= "Ms-formlabel" width= "20%" >
<sharepoint:fieldlabel fieldname= "Attachments" runat= "Server"/>
</TD>
&LT;TD valign= "Top" class= "Ms-formbody" width= "80%" >
<sharepoint:attachmentsfield fieldname= "Attachments" runat= "Server"/>
<SCRIPT>
var elm = document.getElementById ("idattachmentstable");
if (Elm = = NULL | | elm.rows.length = = 0)
document.getElementById ("Idattachmentsrow"). style.display= ' None ';
</SCRIPT>
</TD></TR>
</Template>
</SharePoint:RenderingTemplate>
<sharepoint:gobackbutton id= "GoBackButton2" visible= "false" runat= "Server"/>
------------------------------------------------------------------------------------------

This is used to return the list page. Our own button replaced it, and all of it was visible.

The above template can not only be used to view the page, other pages can also be common. If you want to save the page, you need to add a save control to the template:

<sharepoint:savebuttonrunat= "Server"/>

Modify the Save page, (newform.aspx or editform.aspx) of the Listformwebpart templatename for Codeart_noticetemplate.

You can look at the effect:

customizing form pages with SharePoint Designer entirely #e#

Templates that use Renderingtemplate customization can be reused on multiple forms pages, and can be fully implemented with SPD if the reuse is discarded.

The first step is to hide the original display area: Set the main WebPart region the Visible property is false.

------------------------------------------------------------------------------------------
<WebPartPages:WebPartZone Visible="false" runat="server" FrameType="None" ID="Main"
------------------------------------------------------------------------------------------

Step two-write the template directly in the content control:

------------------------------------------------------------------------------------------
<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
<SharePoint:FormField　ID="FormField1" runat="server" FieldName="Title" />
<SharePoint:FormField ID="FormField2" runat="server" FieldName="Body" />
<br/>
<SharePoint:SaveButton runat="server" ID="save" />
<SharePoint:GoBackButton ID="GoBackButton2"　　　　　　　　　　　　　　　　　　runat="server" />
</asp:Content>
------------------------------------------------------------------------------------------
　　OK,完工。



Some people may want to ask: This customization is good, but will lose a lot of WSS features, such as the list can dynamically add fields, these dynamic fields how to display it?

This will use the Listfielditerator control, just embed the following code in your template:

<SharePoint:ListFieldIterator runat="server"/>

To achieve the perfect custom form page, it is best to study the contents of Defaulttemplates.ascx. And to focus on the ListForm template, all list forms are based on this template by default.

ListForm

<sharepoint:renderingtemplate id= "ListForm" runat= "Server" >
<Template>
<span id= ' part1 ' >
<sharepoint:informationbar runat= "Server"/>
<wssuc:toolbar cssclass= "Ms-formtoolbar" id= "Toolbartbltop" rightbuttonseparator= "&nbsp;" runat= "Server" >
<Template_RightButtons>
<sharepoint:nextpagebutton runat= "Server"/>
<sharepoint:savebutton runat= "Server"/>
<sharepoint:gobackbutton runat= "Server"/>
</Template_RightButtons>
</wssuc:ToolBar>
<sharepoint:formtoolbar runat= "Server"/>
<table class= "ms-formtable" style= "margin-top:8px;" border=0 cellpadding=0 cellspacing=0 width=100%>
<sharepoint:changecontenttype runat= "Server"/>
<sharepoint:folderformfields runat= "Server"/>
<sharepoint:listfielditerator runat= "Server"/>
<sharepoint:approvalstatus runat= "Server"/>
<sharepoint:formcomponent templatename= "attachmentrows" runat= "Server"/>
</TABLE>
<table cellpadding=0 cellspacing=0 width=100%><tr><td class= "ms-formline" ></td></tr></table>
<table cellpadding=0 cellspacing=0 width=100% style= "padding-top:7px" ><tr><td width=100%>
<sharepoint:itemhiddenversion runat= "Server"/>
<sharepoint:parentinformationfield runat= "Server"/>
<sharepoint:initcontenttype runat= "Server"/>
<wssuc:toolbar cssclass= "Ms-formtoolbar" id= "Toolbartbl" rightbuttonseparator= "&nbsp;" runat= "Server" >
<Template_Buttons>
<sharepoint:createdmodifiedinfo runat= "Server"/>
</Template_Buttons>
<Template_RightButtons>
<sharepoint:savebutton runat= "Server"/>
<sharepoint:gobackbutton runat= "Server"/>
</Template_RightButtons>
</wssuc:ToolBar>
</td></tr></TABLE>
</SPAN>
<sharepoint:attachmentupload runat= "Server"/>
</Template>
</SharePoint:RenderingTemplate>

SharePoint Designer Custom Moss/wss form pages