People Picker MVC Sample

OfficeDev PnP has a great sample for using the people picker in a provider hosted add-in. The only problem is that the sample uses web forms. In this post I'll demonstrate using the people picker in an MVC application.

Create a new App for SharePoint

Make it Provider hosted
Choose MVC Web Application
Choose Windows Azure Access Control Service

Add a dummy module to the SharePoint project

Right click the SharePoint project and add a dummy module. This will allow you to easily get a SharePoint context.

Edit _Layout.cshtml 

Add MicrosoftAjax.js and a Styles section. Remove the menu and footer.

Copy files from the PnP Project Scripts folder into the MVC Scripts folder

app.js
peoplepickercontrol.js
peoplepickercontrol_resources.en.js

Copy files from the PnP Project Styles folder into the MVC Content folder

peoplepickercontrol.css

Edit the app.js file

Add functions for the chrome control, renderSPChrome and chromeLoaded.

Add a people picker to index.cshtml

Lets walk through this.

Line 1 add the CSS for the control.

Line 5 this is for loading the SharePoint chrome control. If this is not what you want you will need to include the SharePoint core.css file into your project or at least those bits needed for the people picker.

Lines 9 - 19 this is the html needed for the people picker. The ids are important. They are used by the JavaScript to build the control.

Line 29 add the people picker JavaScript files to the page


That's it. If you've followed along the people picker should be up and running in your MVC application. Full source code can be found here https://github.com/spkrby/MVCPeoplePicker.git