Angular SharePoint People Picker using PrimeNG

One of the most common customization requirements is to include custom people picker while developing client side apps. Let’s check how we can build client side people picker using Angular.

People Picker Basics

Before starting to build custom people picker, it is useful to understand how SharePoint OOTB people picker works.

SharePoint gets people picker suggestions by submitting HTTP POST request to below REST endpoint :

_api/SP.UI.ApplicationPages.ClientPeoplePickerWebServiceInterface.ClientPeoplePickerSearchUser

For submitting HTTP POST request we will need to pass a json object to this endpoint. TypeScript interface for this json object looks something like:

• QueryString : query string parameter that we need to use for querying users.
• MaximumEntitySuggestions : Maximum user suggestions to fetch.
• Others : Check MSDN docs here.

While submitting post request from our Angular app, we need to construct this json object and pass it in HTTP POST request. Another gotcha is that since this is post request, SharePoint expects X-RequestDigest value to be passed in header request. This is FormDigest value can be obtaining by HTTP GET request to below REST endpoint.

/_api/contextinfo

Response that we get from this GET request has below structure. We need FormDigestValue from this response that is required for POST request.

Response from People Picker REST Endpoint

Response from People picker REST endpoint has below structure.

PeoplePickerUser represents a single user suggestion that is returned. It has EntityData as complex type which has additional user properties like mobile number, department etc.

Array of users can be retrieved using result.d.ClientPeoplePickerSearchUser

Building Angular Service

If you are not aware how to setup Angular App to work with SharePoint, check out other post on Angular App in SharePoint.

Now that we know how to get people picker suggestions from SharePoint REST API, let us build Angular Service that will facilitate this feature.

This service method will accept PeoplePickerQuery as parameter and will first fire HTTP GET to get form digest and subsequent POST request to get user suggestions.

Building UI to displaying user suggestions using PrimeNG

Final task is to build Interface that will enable search, display and select users. For this we will use AutoComplete control from PrimeNG.

Install PrimeNG and required dependencies mentioned on PrimeNG official docs.

• ngModel : to capture selected user.
• suggestions : takes array to populate user suggestions.
• completeMethod : called after each keystroke to filter user suggestions.
• field : the field of spuser object that will be displayed in input box.
• size : size for suggestion box
• minlength : minimum input length after which completeMethod should be called.

ng-template is used to project content that will give similar look and feel as that of OOTB people picker suggestions.

After connecting all these pieces and adding some styling, we will get fully functional people picker with single user and multiple user selection capability!

Source code on GitHub : https://github.com/SumitRAgrawal/ng-sp/tree/master/sp-people-picker