Sharepoint People Picker – AngularJs Directive [Updated]

I’ve recently updated the code for my angularJs directive that I wrote a year ago.

I won’t go into detail like the previous post, this is more of a change log.
The updated code is on Github (, a few words first on what I’m planning.
At the moment the code on Github is within a demo project, a visual studio solution of a SharePoint hosted add-in.
It would make more sense to have just the relevant code there, so that’s something I’m planning to do.
But I want to make it more easy to grab, both for myself and others, so I’m hoping to make it into a bower package.
I’m also planning to give the same treatment to a taxonomy picker, and probably some other good SharePoint utilities for angular, like some standard services for common tasks and what not.

Now for the changes.
The whole directive has been given a bit of an overhaul, basically I’ve streamlined it. I’ve decided that the model needs only be an array the key and the display name. Deciding on one model rather than a configuration that gives you different outputs makes it harder to reason about how to implement the flow within the directive.
It has a drawback, that was actually there in the previous incarnation, but I did not realize it. Which is that when you place anything other than a primitive type object on the model, the built-in change detection of the $compile service does not do a deep check of properties, so I had to implement a watch to facilitate a two-way binding mechanism of the control and model.
Previously this did not work, now if you want a different model, reading my previous post, should give you enough information to make the changes needed.

Also I’ve removed the extra html for the twitter bootstrap styles and the label, allowing the directive to be purely what it is, without forcing any styling conventions, If you want twitter bootstrap styles you can place the directive within the needed html and classes yourself.

I’ve also built a service for the directive which is very simple, and probably needs some more work. What it does is use the SharePoint script on demand services, to ask for the js files from SharePoint, so that you don’t need to place the script tags on your page, it also insures that we don’t load files twice.
I noticed that If you used a aspx page in your app, with the app.master file being used, in a SharePoint online environment, many of the files were being loaded from SharePoint online CDN’s and loading them again could cause conflicts and problems. Not to mention the waste of bandwidth.

The service exposes a promise object which the directive calls the then function and initializes the people picker first after all the scripts are loaded.
Lastly I’ve placed both the service and the directive in their own module, which can then be added as a dependency of your app.

So to use it, get the files here (until I make a bower package)

add “spUtils” as a dependency of your app in your module declaration like this.
angular.module(“yourAppName”, [“spUtils”, “otherDeps..”])

and place this tag in your html

And you should be good to go, and if something doesn’t work, write an issue on github.


3 responses to “Sharepoint People Picker – AngularJs Directive [Updated]

  1. dverlege March 11, 2016 at 11:29 pm

    Awesome work. The way you handled the sp js dependencies was particularly helpful to me. Note: I think you had intended to show what tag someone uses in their html, but that didn’t come through. Thanks again!


  2. shovonjamali June 15, 2017 at 8:58 am

    I wanted to use this in a repeating section. In that case the id remains same. I solved this by some modification. It’s working fine. I can add multiple rows. But the problem is now, when i try to resolve the user for edit page first row resolve the value but renaming ones are not. I need to solve this issue. Can you please give some suggestions? 😦 Need to solve this


    • drohreo June 15, 2017 at 9:35 am

      Im afraid I havn’t looked at this in 2 years, and have no time at the moment.
      There are plenty other implementations out on npm, which i think are more under active development. Have a look at one of those.


Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s

%d bloggers like this: