Featured Employee Web Part – AJAX Enabled

Abstract: This document explains how to develop AJAX Enabled Featured Employee Web Part for SharePoint 2007. This web part displays a random employee profile after every 5 seconds using ASP.NET AJAX Technology.

Introduction

In this article, I’ll try to explain how to implement AJAX enabled “Featured Employee” web part. Actually what I mean by featured employee is any user profile which exists in SharePoint Shared Services user profiles list.

In most of the projects I worked, clients were asking for a web part which sort of displays or searches based on user profile info stored in Active Directory. I’ll try to show how to implement “Employee Directory Search” web part in another article. For this one, I’ll focus on just displaying employee info.

Let me mention some features of this web part. First of all, this web part will be changing displayed profile every 5 seconds using ASP.NET AJAX 1.0. Profiles will be displayed in a random fashion. Also, there is going to be a Department property to limit displayed profiles to a certain department of the company.

Before we start, I’d like to show you how “Featured Employee” web part will look like once we are done. (After every 5 seconds, displayed profile will be randomly changed.)

Design

Design of this web part can be divided into some sub sections as follows:

1. Implementing Featured Employee web part without AJAX capability

a. Get a list of user profiles and keep them in a collection

b. Filter user profiles based on following properties

i. Department (This is our first criteria. If user belongs to the department specified by web part properties pane, then include this user to “Displayable” collection)

ii. Photo Exists (Don’t display profiles w/o photo)

iii. Visible (If this additional ‘Visible’ Boolean property is true in user’s profile, then display this profile)

c. Randomly select only one employee profile

d. Display UI using control template

 

2. Adding AJAX capability

a. Enable SharePoint site for AJAX

i. Install ASP.NET AJAX 1.0

ii. Add necessary Web.Config entries

iii. Add Script Manager to master page

b. Create an Update Panel

c. Create a Timer and Event Handler for re-displaying profiles after each 5 sec.

d. Add code implemented in subsection 1 above to Update Panel.

First we will implement this web part as it will only display different employee profiles after every page load. Then, we will extend this functionality using AJAX.

Now, let’s start with the implementation of sub section 1.

Implementation

Implementing Featured Employee web part without AJAX capability

Get a list of user profiles and keep them in a collection

UserProfileManager profileManager = new UserProfileManager(ServerContext.Current);

Filter user profiles based on following properties

i. Department (This is our first criteria. If user belongs to the department specified by web part properties pane, then include this user to “Displayable” collection)

ii. Photo Exists (Don’t display profiles w/o photo)

iii. Visible (If this additional ‘Visible’ Boolean property is true in user’s profile, then display this profile)

private void FillDataListWithUserData(BaseDataList list)

{

…

// Get max number for randomazition

int max = 0;

ArrayList upc = new ArrayList();

 

foreach (UserProfile profile in profileManager)

// In order to show employee profile in web part,

// there should be a department value and this profile should be flagged as visible

if (Parse<String>(profile[“Department”]) != null

&& Parse<Boolean>(profile[“VisibleInFaceBook”])

&& Department == Parse<String>(profile[“Department”]))

{

// Add qualified user profile to list

upc.Add(profile);

max++;

}

 

…

}

Randomly select only one employee profile

// Generate a random index

Random random = new Random();

int randomIdx = random.Next(0, max);

 

int i = 0;

foreach (UserProfile profile in upc)

if (i == randomIdx)

{

users.Add(new FaceBookUser()

{

Name = Parse<String>(profile[“PreferredName”]),

FirstName = Parse<String>(profile[“FirstName”]),

LastName = Parse<String>(profile[“LastName”]),

Department = Parse<String>(profile[“Department”]),

Office = Parse<String>(profile[“Office”]),

Photo = Parse<String>(profile[“PictureURL”]),

AboutMe = Parse<String>(profile[“AboutMe”]),

Title = Parse<String>(profile[“Title”]),

MySiteUrl = Parse<String>(profile[“PersonalSpace”]),

HireDate = Parse<DateTime>(profile[“SPS-HireDate”])

});

break;

}

else

i++;

}

 

Display UI using control template

protected override string DeterminateView()

{

return @”~/_controltemplates/FaceBookWebPartControl.ascx”;

}

Adding AJAX capability

Enable SharePoint site for AJAX

i. Download & Install ASP.NET AJAX 1.0

Can be downloaded from Microsoft Download Center: http://www.microsoft.com/downloads/details.aspx?FamilyID=ca9d90fa-e8c9-42e3-aa19-08e2c027f5d6&displaylang=en

ii. Add necessary Web.Config entries

You can follow the post I wrote in my blog for that:

https://zieglers.wordpress.com/2009/02/02/webconfig-entries-for-enabling-ajax-for-sharepoint-2007/

iii. Add Script Manager to master page

Add the following entry to the master page of the page which hosts Featured Employee web part:

<asp:ScriptManager runat=”server” ID=”ScriptManager1″></asp:ScriptManager>

Create an Update Panel

Now, we need an Update Panel in which contents of the web part will be displayed.

protected override void CreateChildControls()

{

base.CreateChildControls();

this.EnsureUpdatePanelFixups();

UpdatePanel up = new UpdatePanel();

up.ID = “UpdatePanel1”;

up.ChildrenAsTriggers = true;

up.UpdateMode = UpdatePanelUpdateMode.Conditional;

this.Controls.Add(up);

up.ContentTemplateContainer.Controls.Add(this.lstEmployeesList);

…

}

Note above that we add lstEmployeeList DataList to update panel container. This list is holding employee profiles to be displayed.

Create a Timer and Event Handler for re-displaying profiles after each 5 sec.

We also need a timer to fire the event which will be changing displayed profile after every 5 seconds.

Timer timer = new Timer();

timer.Interval = 5000;

timer.Tick += new EventHandler<EventArgs>(HandleButtonClick);

up.ContentTemplateContainer.Controls.Add(timer);

Display Employee Profile Event Handler

So, this timer will call HandleButtonClick event handler every 5 seconds and will change displayed profile. It does nothing but calls FillDataWithUserData to get lstEmployeeList DataList filled with new employee profile.

private void HandleButtonClick(object sender, EventArgs eventArgs)

{

using (SPWeb web = SPContext.Current.Site.OpenWeb())

{

// Change displayed user profile each time clock ticks

FillDataListWithUserData(lstEmployeesList);

}

}

Helper Code

This implementation makes use of some helper code.

Our first helper class is actually a base web part class. (BaseWebPart.cs)

Second helper class is just an entity class to hold some employee profile information. (FaceBookUser.cs)

Conclusion

As a result, we have an AJAX enabled web part displaying random employee profiles every 5 sec. from a selected department. This web part can be used at internal department sites of companies. It can also be useful for pages such as “contact us”, “board of directors”, “primary client contacts”… etc.