Creating custom pages in SharePoint

One of the really cool things about SharePoint is that you can create your own custom aspx pages like you would any ASP.NET application, but with a few tips you can leverage all the features of SharePoint like using web part zones and allowing customization and personalization.

When creating a custom page be sure to inherit from WebPartPage. Here is how you get the navigation on your own page.

1. Inherit from the WebPartPage class in your new webpage:

<%@ Page language="C#" Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage,
Microsoft.SharePoint,Version=11.0.0.0,
Culture=neutral,PublicKeyToken=71e9bce111e9429c" %>

2. Create references to required tag libraries

<%@ Register Tagprefix="SPSWC" Namespace="Microsoft.SharePoint.Portal.WebControls" Assembly="Microsoft.SharePoint.Portal, Version=11.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=11.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=11.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

3. Apply Theme server control

<SHAREPOINT:THEME id="Theme1" runat="server"></SHAREPOINT:THEME>

4. Add CSS Link server control

<SharePoint:CssLink DefaultUrl="/_layouts/1033/styles/ows.css" runat="server" ID="Csslink2" />

5. Add client-side script links

<script src="_layouts/1033/owsbrows.js"></script>
<script src="_layouts/1033/ows.js"></script>

6. Create table and add navigation server controls

<TABLE class="ms-main" CELLPADDING="0" CELLSPACING="0" BORDER="0" WIDTH="100%" HEIGHT="100%">
<!-- Banner -->
<TR valign="top">
<TD COLSPAN="3" WIDTH="100%">
<!--Top bar-->
<table class="ms-bannerframe" border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td nowrap valign="middle"><img ID="onetidHeadbnnr0" alt="Logo" src="/_layouts/images/logo.gif"></td>
<td class="ms-banner" width="99%" nowrap ID="HBN100" valign="middle">
<!--webbot Bot="Navigation" startspan-->
<SharePoint:Navigation LinkBarId="1002" runat="server" ID="Navigation1" />
</td>
<td class="ms-banner">&nbsp;&nbsp;</td>
<td nowrap class="ms-banner" style="PADDING-RIGHT: 7px">
<SharePoint:PortalConnection runat="server" ID="Portalconnection1" />
</td>
</tr>
</table>
</TD>
</TR>
</TABLE>

That's it! Once you've done this your page is "SharePoint" ready. You can define web part zones (using FrontPage 2003) for your web designers and developers to add new webparts to for customization and personalization. Enjoy!

9 Comments

  • Hey, what's step 5? :)

  • Oops. It's there now. There was a duplicate step that was removed. Pay no attention to the man behind the curtain.

  • I might be the stupidest in the world right now, but.. Where's the difference from just actually copying and altering an existing page in FP? Are you doing any custom code behind this page?

  • Mads,



    The difference is that sometimes you may want to build a page outside of SharePoint (putting it into a managed path) but still be able to access SharePoint lists. Maybe you're building an entire application and not using any of the stock SharePoint pages.

  • Hi i wanna use a custom bar outside fp... i wanna use it with vs2003.

    i got a site in sharepoint &quot;project1&quot; an has got a custom bar with links i added... the id of this bar is &quot;2011&quot;.

    When at vs2003 i put the id=&quot;1002&quot; everything works fantastic, but when i wanna use my custom bar id=&quot;2011&quot; there is nothing on the screen.

    any idea?

  • Bil, I had the same comment as Mads.



    Given your answer, what do you mean by &quot;be sure to inherit from WebPartPage&quot; ?



    Do you just mean start out with a copy of the code that is generated when you create a WebPart Page within WSS?



    [I still won't be doing it your way as I prefer to keep things within WSS, but just so I understand this completely.]

  • Hi Mike,



    Stupid me. I forgot the langage tag so included it as step #1 now. The custom page you create just needs to inherit from Microsoft.SharePoint.WebPartPages.WebPartPage so it has all the properities of one.



    It's no different than copying a web part page like Mads said, however the intent of this post was that people could create a blank one outside of FP2003 and use it outside of SharePoint (still running on the same server though).



    Hope that makes sense.

  • Where i need to save the above created file?.

    Thanks

  • Hi,
    I want to create a custom page layout(with option to add webparts) and dont want the layouts already present in sharepoint. Please guide how to proceed.

Comments have been disabled for this content.