Sunday, November 25, 2012

Displaying custom User Name in the Welcome Menu

I have seen so much content about approaching this problem in several ways, which to me are kind of solutions that they either:

-Force you to spend un-necessary long man-hours,

-Write too much of custom codes (writing user controls, etc.),

-Makes you try to understand the Welcome.ascx user control (really?? why? Microsoft has already done that).

So eventually, I ended up writing this post for the benefit of all.

SharePoint is an awesome “PLATFORM”, yes, I call it a platform. Not a Tool, or Application or a CRM or a portal, or a …. and the list goes on. By calling it a platform, I am encapsulating all of them together.

So, with so many stuff already provided out-of-box, we only need to know how to leverage them in a best possible manner to our benefits.

By leveraging, I also mean utilizing the excellent work that is being done by one of the Microsoft’s biggest community, the SharePoint community. You’ll find tons & tons.

The one such work that I am referring to is the SharePoint Services Library on CodePlex. Please find it here.

By using this, I have gotten to get this working in the most minimal way that I could find. Below are the pieces of the code that you would need to get your Welcome menu read aloud “Welcome Tango Charlie”. Pre-requisites being that you have a properly configured User Profile (and of course, if your name is Tango Charlie).

Okay, so we are going to modify our SP 2010 Master Page and place some lines of code in the <head> section.

Step 1: You may download the .js file and insert a script reference to the SPServices library within your <head>…</head> tags:

<script type="text/javascript" src="/_layouts/scripts/jquery-1.4.2.js"></script>
<script type="text/javascript" src="/_layouts/scripts/jquery.SPServices-0.7.2.min.js"></script>

Pre-requisites:

a) You should make sure that you have a JQuery script references before referring to SPServices.

b) Refer the SPServices on CodePlex as the JQuery version requirements are strict for what version of SPServices you are using.

Step 2: Place the below script anywhere within your <head>…</head> tags as long as they follow the tags mentioned in Step 1.

<!-- Format the Welcome Menu -->
<script language="javascript" type="text/javascript">
        $(function() {
            var userFirstName = $().SPServices.SPGetCurrentUser({
                fieldName: "FirstName",
                debug: true
            });

            var userLastName = $().SPServices.SPGetCurrentUser({
                fieldName: "LastName",
                debug: true
            });
           
            var displaySection = $('span.ms-welcomeMenu').children('a.ms-menu-a').children('span');
            var textToShow = 'Welcome ' + userFirstName + ' ' + userLastName;
            // Set the text back to the Welcome Menu
            displaySection.text(textToShow);

          });

</script>

And that’s it. You have your name displayed with the “Welcome” prefix.

Try playing with the combinations/permutations of [fieldName: "FirstName"] and [fieldName: "LastName"] to get different text to display. Good Luck.