Customizing the SharePoint 2010 Welcome Menu (PersonalActions)

Customizing the SharePoint 2010 Welcome Menu (PersonalActions)

I support a SharePoint 2010 environment at my company and was recently asked to add an extra item to the welcome dropdown box (also know as the Personal Actions Menu) usually located at the top right of your SharePoint pages. This item was a feedback feature where users at any given location on the site could provide feedback, report a bug or add a general enhancement request.

I decided to store the data in a simple SharePoint list and implement a CustomAction Element using Visual Studio. I could have used a list view to manage the capture of the data, however I didn’t need all of the bells and whistles that came with one of those views and ultimatley created a custom application page with a form.

Creating a CustomAction is pretty easy, you just need to identify the GroupId and Location of the menu you wish to modify and then you’re good to go. You even have a simple function called a URLAction where you can direct people to a page when they click on your custom action. What isn’t so obvious is if you actually wanted your application page to popup in a modal view. Here is the code I used to get this done.

The CustomAction

Create a new blank SharePoint project in Visual Studio and then add a new ‘Empty Element’ to your project (I called mine CustomActions). Open up the CustomActions file and you should see something like this:

<?xml version=”1.0” encoding=“utf-8“?>
<Elements xmlns=“http://schemas.microsoft.com/sharepoint/“>
</Elements>

Add the following so that your file now looks like this:

<?xml version=“1.0” encoding=“utf-8“?>
<Elements xmlns=“http://schemas.microsoft.com/sharepoint/“>
<CustomAction Id=“CustomGlobalLinks”
ImageUrl=“/Assets/FeatureLogo.png”
Description=“Provide feedback or Submit an Enhancement Request”
Location=“Microsoft.SharePoint.StandardMenu”
GroupId=“PersonalActions”
Sequence=“1001”
Title=“Feedback“>
<UrlAction Url=“javascript:(function () { var o = { url:’/_layouts/CustomGlobalLinks/Feedback.aspx’, title: ‘Feedback’, allowMaximize: false, showClose: true, width: 480, height: 280 }; SP.UI.ModalDialog.showModalDialog(o); }) ();“/>
</CustomAction>
</Elements>

Let’s break this down. The ImageUrl will give you a logo to the left of your Action on the menu; this is optional. The location refers to where you want to put your action and the GroupId refers to which group on the menu you want to add it too. I’ve used the PersonActions group.

I added some custom JavaScript to the URLAction which executes SP.UI.ModalDialog.showModalDialog and displays your application page in a modal. I actually found this script on another blog, however I can’t find it any more to give credit. I’ll certainly add the credit when I find it again.

The Application Page

Add a new Application Page to your project (I called mine Feedback). Add your controls (e.g. drop downs, text boxes etc.) and then hook them up to your feedback list (already created in your SharePoint environment).

On the submission of your form, you can close your modal by calling ‘window.frameElement.commitPopup();’ Here is some quick code on pulling content from your SPList to popluate a dropdown and how to write back:

Categories Dropdown

SPList FeedbackList;
SPSite site = SPContext.Current.Site;
…………………………………………………………………

FeedbackType.Items.Add(“– SELECT –”);
SPFieldChoice cf = (SPFieldChoice)FeedbackList.Fields[“Category”];
foreach (string type in cf.Choices)
{
FeedbackType.Items.Add(type);
}
FeedbackType.DataBind();

Write back to the SPList

SPWeb web = site.RootWeb;
SPListItemCollection ItemCollection = FeedbackList.Items;
SPListItem ListItem = ItemCollection.Add();
ListItem[“Category”] = FeedbackType.SelectedItem.Text;
ListItem[“Feedback”] = FeedbackText.Text;
ListItem.Update();
successfulSubmit();

Comments are closed.