Querying the Sharepoint User Profile Service with Javascript and a content editor web part

So you've gone to the trouble of setting up the Sharepoint User Profile Service (UPS), mapping the attributes you want to use in Sharepoint and possibly troubleshooting some of UPS problems, what's next?

More than likely you want to start using some of these attributes and one of the easiest and most flexible ways to do this is with some Javascript and a content editor web part.



Some things you need to know

The content editor web part is a funny one, and acts differently depending on how you use it. Firstly you can paste Javascript directly into the content editor, but it is much easier to host your script in a .txt file and use the content link functionality to reference it. This gives you much more flexibility in editing, you can use your editor of your choice, instead of the flaky, awkward Sharepoint editor.

While waiting for the UPS XML query to complete there is a slight delay, therefore a simply Javascript document.write operation won't work for the response of the query. Instead we need to use Javascript ID tags in conjunction with syndication to insert the data dynamically into predefined areas of your script.

The actual request is a SOAP XML request, to which I need to credit this thread for the base code.



Enough rambling, how do I do it?

I am assuming you already have the User Profile Service configured and any attributes you want to import ready to go, configuration of UPS is outside the scope of this tutorial.

The below code gives an example of how I generated a Sharepoint entry page. My requirements were to pull a Student ID number from active directory that I could then use to generate URL's and pull data from external databases.

Click HERE for example code

In this simple example I am querying the UPS for a Student ID (stored in the Active Directory department attribute) and the users "Title" to create a welcome page for my Parent Portal.

Example dynamically generated content

Example dynamically generated link with "Student ID"

Most of the code is self explainatory but there are a few changes you will need to make to get started.

1. Please replace the sharepoint.contoso.local in the below line with the address of your Sharepoint UPS.

xmlHttpReq.open('POST', 'http://sharepoint.contoso.local/_vti_bin/UserProfileService.asmx', true);

2. I am pulling the Student ID, stored in the AD "department" field. If you change department in the below line, you can pull any attribute you want, providing you have configured the UPS to poll that attribute.

GetUserPropertyByAccountName(loginName, "department");

The returned value of this attribute will be set as "responsestuid" to which you can manipulate any way you like.


3.  At the top of the file I have multiple Javascript ID's, welcomeheader, linksheader, links. You can create as many IDs as you need and apply HTML to them such as font size and color. You can also place them in the other in which you want them to appear on the page.

For example because I want my "linksheader" above my "links", I position them as follows.

<font size = "4">
<script type="text/javascript" id="linksheader" src="syndication.js">
</script>
</font>

<font size = "2">
<script type="text/javascript" id="links" src="syndication.js">
</script>
</font>

4. Once you have made all the required changes to the example code, save it as "javascript.txt" and either upload it to a Sharepoint Library or any web server.

a. Create a new content editor web part.
b. Edit the web part.
c. Put the link to your "javascript.txt" in the "Content Link" box and press save.

With any luck you will being pulling attributes from UPS and creating dynamic pages based on those attributes!

If you are having troubles getting it working use an alert('error'), and move it further and further down the javascript.txt until it now longer appears when you load your page. This will give you a strong indication of where the error (normally a syntax error) might be in the code.