Wednesday, September 06, 2006

MOSS 2007 controls - have a bit of fun with the "people editor" form control!

Many times in my web applications I need to get input from the user about other users. For example, if I am creating a task-tracking application, the user will need to assign a task to another user.
Another example is when I developed an ASP.NET2 application that connected to SAP, and had to manage user travel details. Again, I had to let the users select other users to say "I want to create a new trip for that user" (something that happens often, when secrateries fill in the forms for the managers).

If you have SharePoint 2007, you can relax and stop developing a person selector box for these applications. SharePoint has a very nice control to do exactly that. In this article I will demonstrate how to use that control in a web part - see how in two lines of code I get a world of functionality!

The Code

The object we are talking about is called PeopleEditor and it is part of the Microsoft.SharePoint.WebControls namespace.
To add it to the web part, just declare it and add it to the web part controls. Example:
        PeopleEditor p;
        protected override void CreateChildControls()
            p = new PeopleEditor();

The Results

The control renders on the page thus:

what do we have here? a text box that allows the user to write a user name, a "check name" button to verify that name, and an "address book" button to pop up a search window:

Here we can search for a person, and return the results to the text box we started from.

If the user typed a user name and used the "check name" button, he will be shown if the user name is valid or not, and may click on the invalid name to get "more names" options:

Now, how can we customize this to our form's needs?
you can:

  • use ".AllowEmpty" to specify if the user must fill the contorl
  • use ".AllowTypeIn" to specify if the user can type the wanted user name in the text box, or if he must use the search pop up
  • use ".MultiSelect" to specify if the user can select multiple people in the control.
  • use ".PrincipalSource" to specify where the control will look for users (if you have more than one source of users...)
  • use ".PlaceButtonsUnderEntityEditor" to specify if the "check name" and "address book" buttons will be on the same line with the text box, or underneath:
  • use ".SharePointGroup" to filter the people the user can select to be only people from a specific group defined in the site.

There are more options, but you will have to play around with them yourself. Unfortunately, Microsoft didnt release (yet) any documentation on the control and its use, so its up to us to find out and share our findings!!!
Have fun!


Tagorenet said...

Good one...
I just wants to access the value that came into the people editor.

I tried to acces but did not find out any solution.

Please let me know if there any solution...

Thanks in advance,

Robert said...

In your example you showed how to use people editor control in web part. Is it possible to use it in 2.0 web pages.


Israel said...

To get the values, you can usa


Anonymous said...

I want to check userName. But I don't know how to do this.
when I click check Image UserName nothing happens.

Anonymous said...

Same question as Robert... In the example you show how to use the PeopleEditor control in a WebPart. Any idea if it could be used in an 2.0 web page?

meera said...

I would like to know more about the PeopleEdito control.I placed the control in a normal aspx page with some CSS.Now I need to know more of its design to how the look and feel of the dialog box that pops up when 'check names' button is clicked.I tried using the cssclass property but doesnt seem to apply to this particular dialog...
Please help me on this

Gitolekha said...

I have a tab control in which the first tab contains peopleeditor, when I go to the last tab I need to show the value selected in the first tab as a summary in the last tab.I have to show it in a label.I need to do this using javascipt.
Right now I am using:
var elem = document.forms[0].elements;
for(var i=0; i < elem.length; i++)
if(elem[i].id.indexOf("pplOwner") != -1 && elem[i].id.indexOf("TextBox") != -1) users = elem[i].value;
document.getelementbyId("Label1").value = users;
However, there are some poblems in this approach, if I delete a value from the peopleeditor's (pplOwner)textbox, the value is still shown in the label. The value is displayed as domainname/userid whereas I want it as "username" like it is shown in the first tab. Can you suggest something?