SharePoint designer custom MOSS/WSS form page

Source: Internet
Author: User

Method 1: Use SharePoint designer with the enderingtemplate file to customize the MOSS/WSS form page

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

The default style does not meet the Chinese habits when publishing news. We need to change it to the following:

Step 1 -- modify the default template of the form page: Use SPD to open the page (dispform. aspx) to be modified, find listformwebpart, and modify its templatename attribute to codeart_noticetemplate, as shown below:
Bytes ------------------------------------------------------------------------------------------
<Templatename xmlns = "http://schemas.microsoft.com/WebPart/v2/ListForm"> codeart_noticetemplate </templatename>
Bytes ------------------------------------------------------------------------------------------
Step 2 -- write a new template: Save the following content to the 12templatecontroltemplatescodeart_noticetemplate.ascx file: codeart_noticetemplate.ascx
Bytes ------------------------------------------------------------------------------------------
<% @ 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>
<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>
<TD align = "center" Height = "30px" class = "title">
<B>
<SharePoint: formfield id = "formfield1" runat = "server" fieldname = "title"/>
</B>
</TD>
</Tr>
<Tr>
<TD align = "right">
<SharePoint: createdmodifiedinfo id = "createdmodifiedinfo1" runat = "server"/>
</TD>
</Tr>
<Tr>
<TD Height = "1" align = "center" class = "seprow">
</TD>
</Tr>
<Tr>
<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; </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>
<TD align = "center">
<Table>
<Tr>
<TD>
<SharePoint: gobackbutton id = "gobackbutton2" visible = "false"
Runat = "server"/>
<Input type = "button" value = 'back to 'onclick = "javascript: closewindow (); Return false;"/>
<! -- IMG src = "/_ wpresources/disform/B _close.gif" onclick = "javascript: isclosewindow (); Return false;" width = "122" Height = "25" -->
</TD>
</Tr>
</Table>
</TD>
</Tr>
<Tr>
<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>
Bytes ------------------------------------------------------------------------------------------
Step 3: restart IIS or application pool.
Haha, You can refresh the page to see the effect.

The content in codeart_noticetemplate.ascx focuses on the following labels:
Bytes ------------------------------------------------------------------------------------------
<SharePoint: formfield id = "formfield1" runat = "server" fieldname = "title"/>
Bytes ------------------------------------------------------------------------------------------
Formfield is a server control that can be used to present the reality and edit a field. Fieldname to specify the field name. This field name is generally an internal name (internalname), internalname

 

 

You can use software such as SharePoint Manager 2007 or caml builder or write your own code.

Bytes ------------------------------------------------------------------------------------------
<SharePoint: createdmodifiedinfo id = "createdmodifiedinfo1" runat = "server"/>
Bytes ------------------------------------------------------------------------------------------

It shows the creation and modification information of the list project.

Bytes ------------------------------------------------------------------------------------------
<SharePoint: attachmentupload visible = "false" id = "attachmentupload1" runat = "server"/>
Bytes ------------------------------------------------------------------------------------------

This is used to upload the attachment. Since we changed the page to view the attachment, we can hide it without the upload function (visible = false ).

Bytes ------------------------------------------------------------------------------------------
<Table border = "0" cellspacing = "0" cellpadding = "0">
<SharePoint: formcomponent id = "formcomponent1" templatename = "attachmentrows"
Runat = "server"/>
</Table>
Bytes ------------------------------------------------------------------------------------------

Although you do not need to upload attachments, it is still necessary to display uploaded attachments.

It actually does not have much content. Its content is implemented by another template attachmentrows. Find defatemtemplates. ascx to find this template:

Bytes ------------------------------------------------------------------------------------------
<SharePoint: renderingtemplate id = "attachmentrows" runat = "server">
<Template>
<Tr id = idattachmentsrow>
<TD nowrap = "true" valign = "TOP" class = "MS-formlabel" width = "20%">
<SharePoint: fieldlabel fieldname = "attachments" runat = "server"/>
</TD>
<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"/>
Bytes ------------------------------------------------------------------------------------------

This is used to return to the List page. We replaced it with our own button, and all of them also dropped it visible.

The preceding template can be used not only to view pages, but also to view other pages. To save pages, you must add a save control to the template:

<SharePoint: savebuttonrunat = "server"/>

Modify the Save page. (newform. aspx or editform. aspx), The templatename of listformwebpart is codeart_noticetemplate.

Let's take a look at the effect:

Using SharePoint designer to customize form pages # e #
 

Templates customized with renderingtemplate can be reused on multiple form pages. If reusability is discarded, all templates can be implemented using SPD.

Step 1 -- hide the original display area: Set the visible attribute of the main webpart area to false.

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

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

Bytes ------------------------------------------------------------------------------------------
<Asp: Content contentplaceholderid = "placeholdermain" runat = "server">
<SharePoint: formfield id = "formfield1" runat = "server" fieldname = "title"/>
<HR/>
<SharePoint: formfield id = "formfield2" runat = "server" fieldname = "body"/>
<Br/>
<SharePoint: savebutton runat = "server" id = "save"/>
<SharePoint: gobackbutton id = "gobackbutton2" runat = "server"/>
</ASP: content>
Bytes ------------------------------------------------------------------------------------------
OK, finished.

Some may ask: This customization is good, but it will lose many WSS functions. For example, the List can dynamically add fields. How can these dynamic fields be displayed?

This requires the listfielditerator control. You only need to embed the following code into your template:

<SharePoint:ListFieldIterator runat="server"/>

To implement a perfect custom form page, you 'd better study the content of defaulttemplates. ascx and focus on the listform template. By default, all list forms are based on this template.

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>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.