Using jQuery to Customize the User Profile Display

The User Profile engine in MOSS Enterprise is pretty powerful.  Out of the box it has some great capabilities and is very easy to setup.  There is support for wide range of field level attributes along with global and personal privacy policies.  The main profile block rendered on the page is very dynamic.

The one big short coming of this approach is a lack of formatting control in the output.  You have the option of a custom display but then you have to try and reproduce all of the logic for each field.

jQuery offers up a nice alternative.  Instead of changing the underlying logic, you can simply adjust what is rendered to the page.

 

Some Background

The organization I’m currently working with uses Skype for collaboration and as their primary IM platform.  Early this year, long before I made the jump to jQuery, I wrote a custom web part that was added to my organizations My Profile page (person.aspx).  Its sole purpose was to show the user’s Skype information, status and some simple Skype commands.  The web part called the UserProfileService in order to grab the SkypeID listed in the profile and then rendered the output.  The web service call was somewhat redundant since the information was already on the page.  The web part worked well, but in the end the Skype info was shown in multiple places, which is not desirable.  It would be best to be able to integrate it into the main profile.  In the time since I have gotten a few other requests to modify the output of certain fields.  I recently took the opportunity to revisit this topic and used the Skype field as the test bed.

 

Step 1 – Create or Identify the field

The Skype ID (SkypeID) field is a simple string field that the user is able to edit.  It is pretty similar to the phone number fields.

 

Step 2 – Write the Script

I’ve referenced the GoogleAPIs library.  I run all of our jQuery scripts off a localized copy to reduce dependencies.  This also depends on a Skype script as well as seen below.

The main selector can probably be improved, but it seems the system consistently sticks with the identification referenced.

Our environment runs with SSL so the status field could not be supported in this implementation.  For implementations where SSL is not used you can grab user’s status by linking an image to this path:  http://mystatus.skype.com/smallicon/skypename

<code><br /><br /><br /><br /><br /><br />    $(document).ready(function() {<br /><br />        var cntID = $(&quot;#ctl00_PlaceHolderMain_ctl00_PlaceHolderMain_ProfileViewerValueSkypeID&quot;).text()<br /><br />        var mOutput = &quot;&nbsp;&nbsp;&nbsp;<a href="&quot;">Add</a>&nbsp;&nbsp;&nbsp;&quot;;<br><br>        $(&quot;#ctl00_PlaceHolderMain_ctl00_PlaceHolderMain_ProfileViewerValueSkypeID&quot;).append(mOutput);<br><br>        mOutput = &quot;<a href="">Chat</a>&quot;;<br><br>        $(&quot;#ctl00_PlaceHolderMain_ctl00_PlaceHolderMain_ProfileViewerValueSkypeID&quot;).append(mOutput);<br><br>    })<br><br><br /></code>

Step 3 – Prepare the Web Part

I’ve placed the script in a Content Editor Web Part on another site and then added it to the catalog on the Personalization site collection.  Be sure to set the title, and I recommend setting the Chrome type to “None.”

Step 4 – Add the Web Part the Person.aspx Page

The Web part can now be added to the page.  Its placement really doesn’t matter since it will not render anything to this section.  Once on the page it will show the updated output if the value is present.  If the referenced field is not shown, doesn’t have a value, then it will not modify anything.

Here is a sample.  The “[Add]   [Chat]” links were added which give visitors the option to add the user to their Skype contact list or to initiate a chat with them.

Summary

While this example is pretty simple, it should do a good job of illustrating some of the capabilities developers and customizers now have. In addition, I now have one less web part and assembly to manage on the server.

This same process can be applied to each field to change the connection to the people search, integrate with other systems, or to simply reformat the text returned.

Tags: , , ,

3 Responses to "Using jQuery to Customize the User Profile Display"

  • Alex R says:
  • Alex R says:
  • next_connect says:
Leave a Comment