Creating a Custom Welcome Menu for SharePoint Server 2010 – Part 2

ASP.NET, SharePoint, Technology
by on

Part 2 – Edit Profile and My Site links

A project I am working on called for a custom implementation of the SharePoint Welcome menu control. The replacement control needed to provide the following:

  • Implement the look and behaviors that the designers created.
  • Exclude some default SharePoint menu items (such as My Regional Settings).
  • Reuse some existing SharePoint menu items (such as Sign Out/Sign in as a Different User).
  • Allow for the addition of other custom menu items in the future.
  • Display thumbnail of the user’s profile picture.

I had to create a control that looked and behaved like the following:

CropperCapture2_thumb1

The designers came up with some clean, semantic markup married with some jquery, for me to start from:


This is part 2 of a three part series.

    1. Part 1 – Overview, Profile Picture, and User Name
    2. Part 2 – Edit Profile and My Site links
    3. Part 3 – Sign Out/Sign in as a Different User

Leveraging the SocialNavigationControl for My Site and My Profile links

The My Site and My Profile links are rendered by the SocialNavigationControl, and contain rendering logic that branches depending on whether a My Site host has been installed. I didn’t want to recreate this so I went digging with Reflector.

I found this code for the control’s OnInit method:


Sweet! Everything I needed was right there, from the SocialControlHelper class.

Wait a minute, Doh! SocialControlHelper is marked as sealed, internal. Wonderful, don’t you love it when Microsoft does that?

Fortunately, upon looking at the code for SocialControlHelper, it runs once, and caches the two URLs it’s responsible for in the HttpContext.Items collection using the following string keys:


Perfect, anything can grab it from there. The SocialNavigationControl does its rendering of menu items in the OnPreRender event. This means that by including the control on a page, and setting it’s visibility to FALSE, it won’t render anything, and we can still leverage the items in SocialDataHelper by getting the urls from HttpContext.Items. We can add this to our ASCX markup at the top:


Some ASCX code-behind:


Notice that I am storing these URLs in ViewState as well. The SocialNavigationControl only fetches data on initial page load. If you have applications/web parts/user controls that will be present during postbacks, then you will want to persist these links somewhere like ViewState.

Reconstructing the SocialNavigationControl’s Javascript

Now for the hard part, filling in the conditionals above. The Welcome menu is comprised of three different controls, so they don’t all render the same way. The primary control, PersonalActions, renders the core menu and the bulk of the menu items in HTML. The SocialNavigationControl, however, uses javascript to find the existing menu on the page and then append its own items to it. It’s pretty ugly and hacky (from Reflector):


The OOB behavior for the Welcome menu will actually render two profile links if you have SharePoint Server installed:

  1. My Profile (linking to the My Site Host profile page)
  2. My Regional Settings (linking to userdisp.aspx, the SharePoint Foundation profile page)

The My Regional Settings link is added by the PersonalActions control (from Reflector):


My design called for only displaying one “Edit Profile” link, which should be smart enough to combine these two approaches, and link to userdisp.aspx if SharePoint Foundation used, and to the My Site Host profile page if available.

To achieve this, the first step is to adjust the ASCX markup to include some PlaceHolder controls that can be customized in code-behind:


Here is the code-behind I used that combines the output from the PersonalActions control and SocialNavigationControl:


Summary

In this post, we deconstructed the SocialNavigationControl, and figured out how to render intelligent links to My Site and My Profile pages.

Our ASCX markup so far is:


Our ASCX code-behind so far is:


Next, check out Part 3, where we learn how to display links to Sign Out and Sign in as a Different User.