Second Life of a Hungarian SharePoint Geek

November 25, 2012

How to get the users from a multivalued field using JSCOM?

Filed under: JavaScript, JSCOM, SP 2010 — Tags: , , — Peter Holpar @ 21:17

Assume you have a SharePoint list called Projects with a field called Members of type Person or Group and the option Allow Multiple Selections is enabled. You are to retrieve the users from the Members field using JavaScript Client Object Model (JSCOM).

Note: A similar problem and solution for the Managed Client Object Model can be found here.

In this case the value of the Members field is an instance of SPFieldUserValueCollection on the server side, on the client side it’s an array of FieldUserValue instances. This latter type is a special case of the lookup value, inherited from the FieldLookupValue type, so we can access its members similarly, that means, we should use the get_lookupId and get_lookupValue methods.

In our case the JavaScript code to access the members of a specific project looks like this:

  1. <script type="text/javascript">
  2.  
  3. var siteUrl = '/';
  4.  
  5. function retrieveListItems() {
  6.  
  7.     var clientContext = new SP.ClientContext(siteUrl);
  8.     var projectList = clientContext.get_web().get_lists().getByTitle('Projects');
  9.         
  10.     // instead of the simple CAML query we could use the getItemById method of the list object
  11.     // especially if we need a simple item only
  12.     // but if we need for example the top 5 items, the CAML way is easier
  13.     var camlQuery = new SP.CamlQuery();
  14.     camlQuery.set_viewXml('<View><Query><Where><Geq><FieldRef Name=\'ID\'/><Value Type=\'Number\'>1</Value></Geq></Where></Query><RowLimit>5</RowLimit></View>');
  15.     this.collListItem = projectList.getItems(camlQuery);
  16.         
  17.     clientContext.load(collListItem);
  18.         
  19.     clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));        
  20.         
  21. }
  22.  
  23. function onQuerySucceeded(sender, args) {
  24.     var listItemInfo = '';
  25.     var listItemEnumerator = collListItem.getEnumerator();
  26.     while (listItemEnumerator.moveNext()) {
  27.          var oListItem = listItemEnumerator.get_current();
  28.         var result = '';
  29.         var members = oListItem.get_item('Members');
  30.         for(i=0; i<members.length; i++)
  31.         {
  32.             var member = members[i];
  33.             result += member.get_lookupId() + ', ' + member.get_lookupValue() + '\n';
  34.         }  
  35.  
  36.        
  37.         listItemInfo += '\nID: ' + oListItem.get_id() +
  38.         '\nMembers: ' +  result +
  39.             '\nTitle: ' + oListItem.get_item('Title');
  40.     }
  41.  
  42.     alert(listItemInfo.toString());
  43. }
  44.  
  45. function onQueryFailed(sender, args) {
  46.  
  47.     alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
  48. }
  49.  
  50. ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.ribbon.js");
  51.  
  52. </script>

Advertisements

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

%d bloggers like this: