The User Profile Pages within the MySites area of SharePoint 2010 is significantly more robust than in previous versions.  I really like the concept of making it a central/social hub and using it as a central place to hold and maintain content.  While I generally shy away from major customizations to the Personal sites (aka My Content), the My Site Host that stores the User Profile Pages and Activity Stream provides a great place to load centralized content and features.  It could be for integrating into other social applications your organization might use, or perhaps a place to hold executive Dashboards.  Since the My Site Host is shared between all users within that profile store it is easier to maintain than the individual Personal sites.

I have found myself in a number of conversations recently with people asking about how to customize and extend the User Profile Pages but I have not seen any good sources of information on how to approach it.  Today we will look at how you can define a custom ApplicationPage that uses the User Profile format and how to link to it from within the tabs present in the User Profiles section.

Managing User Profile Tabs

For those that are not aware, the horizontal tabbed navigation displayed in the User Profiles section is actually powered by the QuickLaunch menu for the MySite Host site.  You can add a new tab simply by adding a new Heading entry for the QuickLaunch. 

Here is a screenshot of the tabbed QuickLaunch on the User Profile page.

Here is what the QuickLaunch configuration looks like:

Custom User Profile ApplicationPage

The sample code included in this project includes the standard formatting for the page so that it blends in perfectly with the other pages within the section.  Your custom page has access to the full Server OM and can include complex user controls or visualizations.

[sourcecode type="plain"]
<%@ Page language="C#" DynamicMasterPageFile="~masterurl/custom.master" Inherits="Microsoft.SharePoint.Portal.WebControls.PersonalAdminPage,Microsoft.SharePoint.Portal,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" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="OSRVWC" Namespace="Microsoft.Office.Server.WebControls" Assembly="Microsoft.Office.Server, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="OSRVUPWC" Namespace="Microsoft.Office.Server.WebControls" Assembly="Microsoft.Office.Server.UserProfiles, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="SPSWC" Namespace="Microsoft.SharePoint.Portal.WebControls" Assembly="Microsoft.SharePoint.Portal, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="SEARCHWC" Namespace="Microsoft.Office.Server.Search.WebControls" Assembly="Microsoft.Office.Server.Search, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="PublishingWebControls" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<asp:Content ID="Content1" ContentPlaceHolderID="PlaceHolderLeftNavBarDataSource" runat="server">
<SPSWC:DataSourceReplacer runat="server" ControlID="PlaceHolderLeftNavBar/QuickLaunchNavigationManager/QuickLaunchMenu">
<SPSWC:MySiteDataSource runat="server" ShowStartingNode="False" SiteMapProvider="MySiteLeftNavProvider" />
</SPSWC:DataSourceReplacer>
</asp:Content>

<asp:Content ID="Content2" contentplaceholderid="PlaceHolderPageTitle" runat="server">
Custom Page Title
</asp:Content>

<asp:Content ID="Content3" contentplaceholderid="PlaceHolderPageTitleInTitleArea" runat="server">
Custom Page Title
</asp:Content>

<asp:Content ID="Content4" contentplaceholderid="PlaceHolderSiteName" runat="server">
<SPSWC:PersonalSpaceMainHeading TitleMode="true" runat="server" />
</asp:Content>

<asp:Content ID="Content5" contentplaceholderid="PlaceHolderMain" runat="server">
<Sharepoint:FormDigest runat="server" id="FormDigest" />

<div class="s4-notdlg noindex">
<a id="A1" href="javascript:;" onclick="javascript:this.href=’#SkipContactCard’;" class="ms-SkiptoMainContent" runat="server">
<SPSWC:StringValueEx ResourceFile="spscore" LocId="SkipContactCard_Text" runat="server" />
</a>
</div>
<SPSWC:ProfilePropertyLoader id="m_objLoader" LoadFullProfileOfCurrentUser="true" runat="server" />
<div class="ms-profilepageheader">
<table border="0" cellpadding="3" cellspacing="0" ID="ZoneTable" width="100%" class="ms-tztable">
<!– business card zone –>
<tr><td colspan=3 width="100%" style="padding:24px">
<table class="ms-contactcardtext3" cellspacing=0 cellpadding=0 width="100%">
<tr>
<td width="150" valign="top">
<div class="ms-contactcardtext3" style=""width:100%;">
<SPSWC:LocalTimeControl runat="server" />
</div>
<div class="ms-profilepicture ms-contactcardpicture ms-largethumbnailimage">
<SPSWC:ProfilePropertyImage PropertyName="PictureUrl" RenderWrapTable="False" ShowPlaceholder="true" id="PictureUrlImage" ImageSize="Large" CenterVertically="true" runat="server"/>
</div>
<div class="ms-contactcardtext3" style="width:100%;">
<div><SPSWC:EditProfileButton runat="server" id="ddlEditProfile" /></div>
<div><SPSWC:AddToColleaguesButton runat="server" id="TBBAddtoColleagues" class="ms-my-addcolleague"/></div>
</div>
</td>
<td valign="top" width="320">
<div style="min-height:175px">
<div class="ms-contactcardtext2 ms-identitypiecenotediv">
<SPSWC:StatusNotesControl runat="server"/>
</div>
<div style="padding-top: 50px;vertical-align:top;" class="ms-name ms-contactcardtext1" id="ProfileViewer_Name">
<SPSWC:PersonalSpaceMainHeading TitleMode="false" runat="server"/>
</div>
<div style="padding-left: 20px;" class="ms-contactcardtext3" id="ProfileViewer_ValueTitle">
<SPSWC:ProfilePropertyValue PropertyName="Title" runat="server"/>
</div>
<div style="padding-left: 20px;" class="ms-contactcardtext3" id="ProfileViewer_ValueDept">
<SPSWC:ProfilePropertyValue PropertyName="Department" runat="server"/>
</div>
<br/>
<div style="padding-left: 20px;" class="ms-contactcardtext3" id="ProfileViewer_ValueOfficePhone">
<SPSWC:ProfilePropertyValue PropertyName="WorkPhone" dir="ltr" runat="server"/>
</div>
<div style="padding-left: 20px;" class="ms-contactcardtext3" id="ProfileViewer_ValueOfficeLocation">
<SPSWC:ProfilePropertyValue PropertyName="Office" runat="server"/>
<SPSWC:ProfilePropertyCheckValue PropertyNames="Office,Location" runat="server" Text=", "/>
<SPSWC:ProfilePropertyValue PropertyName="SPS-Location" runat="server"/>
</div>
<div style="padding-left: 20px;" class="ms-contactcardtext3" id="ProfileViewer_ValueEmail">
<SPSWC:ProfilePropertyValue PropertyName="WorkEmail" runat="server" PrefixBrIfNotEmpty="true"/>
</div>
<br/>
<div style="padding-left: 20px;display:none;" class="ms-contactcardtext3" id="ProfileViewer_ProfileDetails" >
<SPSWC:ProfileDetailsViewer id="ProfileViewer" Collapsible="false" runat="server" />
</div>
</div>
<div style="padding-left: 20px;" class="ms-contactcardtext3">
<SPSWC:ContactCardDetailsLink AboutMeId="ProfileViewer_ValueAboutMe" ProfileDetailsId="ProfileViewer_ProfileDetails" EllipsisId="ProfileViewer_Ellipsis" runat="server" />
</div>
</td>
<td valign="top" width="418">
<div style="padding: 50px 5px 0px 15px; overflow:hidden; min-height: 142px; height: 142px;" class="ms-contactcardtext3" id="ProfileViewer_ValueAboutMe">
<SPSWC:ProfilePropertyValue PropertyName="AboutMe" runat="server" PrefixBrIfNotEmpty="false"/>
</div>
<div style="padding-left: 15px;display:none" id="ProfileViewer_Ellipsis" class="ms-contactcardtext3"></div>
</td>
</tr>
</table>
</td></tr>
</table>

<SharePoint:AspMenu
ID="MySiteSubNavigationMenu"
Runat="server"
EnableViewState="false"
DataSourceID="MySiteSubNavDS"
AccessKey="<%$Resources:wss,navigation_accesskey%>"
UseSimpleRendering="true"
UseSeparateCss="false"
Orientation="Horizontal"
StaticDisplayLevels="1"
MaximumDynamicDisplayLevels="0"
PopOutImageUrl=""
SkipLinkText=""
CssClass="s4-sn">
</SharePoint:AspMenu>
<SPSWC:MySiteDataSource
ShowStartingNode="False"
SiteMapProvider="MySiteSubNavProvider"
id="MySiteSubNavDS"
runat="server"/>

</div>

<a name="SkipContactCard" tabindex=0></a>

<div class="ms-profilepagecontent">
Your Page Content Here!
</div>
</asp:Content>
[/sourcecode]

Managing the QuickLaunch Entries

For this to be a robust feature the QuickLaunch entries should be managed as part of the feature activation/deactivation process so a FeatureReceiver has been added to the project to add and remove the entries respectively.

[sourcecode type="plain"]
using System;
using System.Runtime.InteropServices;
using System.Security.Permissions;
using Microsoft.SharePoint;
using Microsoft.SharePoint.Navigation;
using Microsoft.SharePoint.Security;

namespace CustomMySitePage.Features.Customer_User_Profile_Page
{
[Guid("d2754488-4038-42fd-9c9e-f93f19d4e093")]
public class Customer_User_Profile_PageEventReceiver : SPFeatureReceiver
{
public override void FeatureActivated(SPFeatureReceiverProperties properties)
{
using (SPWeb web = properties.Feature.Parent as SPWeb)
{
SPNavigationNode node = new SPNavigationNode("Custom Page", web.Url + "/_layouts/CustomMySitePage/PageTemplate.aspx");
web.Navigation.QuickLaunch.AddAsLast(node);
}
}

public override void FeatureDeactivating(SPFeatureReceiverProperties properties)
{
using (SPWeb web = properties.Feature.Parent as SPWeb)
{
SPNavigationNodeCollection nodeCol = web.Navigation.QuickLaunch;
foreach (SPNavigationNode node in nodeCol)
{
if (node.Title == "Custom Page")
{
node.Delete();
}
}
}
}
}
}
[/sourcecode]

Deployed Custom Tab and Page

Here is a final look at what it looks like with the feature activated and the Tab and Page available.

Template Project Source Code

The source code for this project is available for download here:  CustomMySitePage Project 

I will not be providing support for the code as it is merely an example of how the pages within the User Profile section of MySites works.