Use SharePoint User or Group Picker in your WebParts/user controls

Introduction

SharePoint has a user and group picker which allow browsing SharePoint users and groups. Sometimes, we need to use the user group browsing facility in our custom WebPart or user controls. I have used Firefox Firebug to inspect the way the user group picker works. And, I have got the way it works! I think I need to share this with everyone.

Basics

The SharePoint provided user/group picker contains four controls as shown in figure 1 and described below:

1. A textbox to enter user/group name.
2. A check-name icon to check if the user/group name is valid.
3. A browse icon to allow user/group to be searched.
4. A hidden control which shows messages when user/group name not found.
5. To show an error message when a user/group name is not found, the SharePoint built-in user/group picker uses a span whereas I have used a label.

Figure 1: User/Group picker

After user/group name is entered in the text box, there are two ways to check if the user/group name is valid. One way is to press Enter from the keyboard, another is to click on Check Names. I have implemented the user/group name checking logic in the Check Names icon (the ValidateSharePointUser function in the code-behind page). When the Enter key is pressed in the textbox, with a JavaScript, I actually call the Check Names icon’s click event in the JavaScript function fetchUserName().
When the browse icon is clicked, a new screen appears, allowing users/groups to search. The browse button in the SharePoint built-in User/Group Searcher is actually an anchor link (an <a href…….> in HTML). In the Click event of the anchor, a JavaScript function is called. In my example, the function is _Dialog_UserField_browse. I have tried to mimic the actual SharePoint code. In this function, I have found that SharePoint uses the current site name to show the picker. So, I have taken a hidden control in my page and put the current site name in the page_load event. The URL for the picker, as I have found, is something like: \u002fSiteName\u002f_layouts\u002fPicker.aspx?........;.
I have found the link is fixed except the SiteName, which is the current site name. So, I need to put the site name in the link. That’s why I put the site name in the hidden control. But remember that, in the case of top level site (i.e., SPSite) the site name is empty, so the \u002fSiteName will be removed from the link as I have done in _Dialog_UserField_browse. Finally, in the _Dialog_UserField_browse JavaScript function, a dialog is called, as commonShowModalDialog, with three parameters. The first parameter, sDialogUrl, is the location of the picker window. The second parameter, sFeatures, is the settings of the picker window (i.e., width, title etc.). The third parameter, CallbackWrapper_User_Browse, is the callback JavaScript function which is to be called when the user closes the picker window.
So, in the CallbackWrapper_User_Browse function, I need to parse the result of the picker and put the user name in the textbox. The picker will return an XML (if the user is found) like below:

Collapse

<Entities Append="False" Error="" Separator=";" MaxHeight="3">
<Entity Key="ONIRBAN\sohel" DisplayText="ONIRBAN\sohel" IsResolved="True
Description="ONIRBAN\sohel">
<ExtraData>
<ArrayOfDictionaryEntry xmlns:xsi=http://www.w3.org/2001/XMLSchema-instance
xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<DictionaryEntry>
<Key xsi:type="xsd:string">DisplayName</Key>
<Value xsi:type="xsd:string">ONIRBAN\sohel</Value>
</DictionaryEntry>
<DictionaryEntry>
<Key xsi:type="xsd:string">SPUserID</Key>
<Value xsi:type="xsd:string">1</Value>
</DictionaryEntry>
<DictionaryEntry>
<Key xsi:type="xsd:string">PrincipalType</Key>
<Value xsi:type="xsd:string">User</Value>
</DictionaryEntry>
</ArrayOfDictionaryEntry>
</ExtraData>
<MultipleMatches />
</Entity>
</Entities>

I have used XML DOM to parse the return XML from the picker and put the username in the textbox.
When the user clicks on the Check Names icon, the server-side function ValidateSharePointUser is called, which checks if the user has permission to the site.

Using the Code

The project, along with this article, has a user control ctlUserGroupBrowser.ascx which has the user/group picker. To use the control, you need to use SmartPart from here. Download the SmartPart and install the web part. Then, compile the project and put the UserGroupBrowse.dll in the GAC. Now, add the following entry in the SafeControls section of the web.config:

Collapse

<SafeControl Assembly="UserGroupBrowse, Version=1.0.0.0, Culture=neutral,
PublicKeyToken=af26021c4978ee97" Namespace="UserGroupBrowse"
TypeName="*" Safe="True" />

Then, add the following entry in the <assemblies> section of the web.config:

Collapse

<add assembly="UserGroupBrowse, Version=1.0.0.0, Culture=neutral,
PublicKeyToken=af26021c4978ee97" />

Put the ctlUserGroupBrowser.ascx in the usercontrols folder of the port of the SharePoint site’s virtual directories. Go to the site, and add the SmartPart web part to the page. Finally, browse the ctlUserGroupBrowser.ascx control from the SmartPart toolpane.

AJAX Extension

When you use the control, the page will be refreshed as you click Check Names or press Enter in the text box. To get rid of this, you need to use the AJAX supported SmartPart. You can get the SmartPart with AJAX support from here. Also, you need to wrap:

Collapse

<div id="actionItemPanelDivision">

with:

Collapse

<asp:UpdatePanel ID="ActionItemPanel" runat="server">
<ContentTemplate>

Then, your control markup will be as shown below:


Print this post