PeoplePicker in Provider Hosted App

Adding a Peoplepicker control to a SharePoint app is a very common requirement in any SharePoint App project. Until SharePoint 2010 this was a very easy task as Microsoft provided a people picker control which can be used in service side code.

SharePoint from 2013 onward shifted the focus shifted client side coding and hence building this control was not easily available. There are some resources available on MSDN which helps to build this control

For SharePoint hosted app:

• Use the client-side People Picker control in SharePoint-hosted SharePoint Add-ins

For provide hosted app:

• Use the experimental People Picker widget in SharePoint Add-ins

In this article I want to showcase one more option for building this control using Kendo control which can be used easily for people picker action. HTML dropdown control can also be used for this and can be tried.

We will be using SP.Utilities.Utility.SearchPrincipals for searching user and returning a list of users which can be bound to a dropdown control to simulate a people picker control.

The detailed steps are as below,

1. Create a MVC based provider hosted app for SharePoint 2013.
   
   
2. Add kendo.all.min.js in the scripts folder for reference,
   
   
3. Add a input control to your view as below,
   

   <input name="Users" id="users" />

4. Add a js file named peoplepicker.js to your solution in scripts folder. Here we will write all code for binding the control. This can be any existing file as per project structure.
   
   
5. Add reference to below assemblies in HomeController,
   

   using System.Runtime.Serialization;
   using Microsoft.SharePoint.Client.Utilities;

6. Add below method in Homecontroller
   

   public JsonResult searchPerson(string Id)
   {
       List < SPUser > userlist = new List < SPUser > ();
       var searchUsers = new PeoplePicker();
       userlist = searchUsers.SearchPeople(Id, System.Web.HttpContext.Current.Session["SPHostUrl"].ToString(), System.Web.HttpContext.Current.Session["AccessToken"].ToString());
       return Json(userlist, JsonRequestBehavior.AllowGet);
   }

   This method assumes that SPHostURL and Access token are stored in session. The searchpeople method can return a List of SPUser which can have predefined attributes which we will be binding to dropdown control.
   
   
7. The SearchPeople method can be build using Searchprinciples as below,
   

   public List < SPUser > SearchPeople(string searchText, string hostWeb, string contextToken)
   
   {
   
       try {
   
           List < SPUser > people = new List < SPUser > ();
   
           using(SP.ClientContext ctx = TokenHelper.GetClientContextWithAccessToken(hostWeb, contextToken))
   
           {
   
               SP.Web web = ctx.Web;
   
               ctx.Load(web);
   
               var results = SP.Utilities.Utility.SearchPrincipals(ctx, web, searchText,
   
                   SP.Utilities.PrincipalType.User, SP.Utilities.PrincipalSource.All, null, 10);
   
               ctx.ExecuteQuery();
   
               foreach(var user in results)
   
               {
   
                   SPUser uUser = new SPUser(user);
   
                   people.Add(uUser);
   
               }
   
           }
   
           return people;
   
       } catch (Exception ex)
   
       {
   
           throw ex;
   
       }
   
   }

8. Once we get the result from the above method we can bind the list of users to Kendo dropdown by below syntax,

<script>
    $(document).ready(function() {

        $("#users").kendoDropDownList({

            dataTextField: "ContactName",

            dataValueField: "CustomerID",

            headerTemplate: '<div class="dropdown-header k-widget k-header">' +

                '<span>Photo</span>' +

                '<span>Contact info</span>' +

                '</div>',

            valueTemplate: '<span class="selected-value" style="background-image: url(\'../content/web/Customers/#:data.CustomerID#.jpg\')"></span><span>#:data.ContactName#</span>',

            template: '<span class="k-state-default" style="background-image: url(\'../content/web/Customers/#:data.CustomerID#.jpg\')"></span>' +

                '<span class="k-state-default"><h3>#: data.ContactName #</h3></span>',

            dataSource: {

                transport: {

                    read: function(e) {

                        $http({

                            url: '/PHA/Home/searchPerson/' + e.data.filter.filters[0].value, // pass search text value here

                            method: "GET"

                        }).then(function(data) {

                            var users = [];

                            angular.forEach(data.data, function(item) {

                                users.push({

                                    Login: item.CustomerID,

                                    Name: item.ContactName,

                                    Email: item.CustomerEmail

                                });

                            });

                            e.success(users);

                        }, function(error) {

                            console.log(error);

                        });
                    }
                }
            }
        });

        var dropdownlist = $("#users").data("kendoDropDownList");

    });
</script>

 

Reference: http://demos.telerik.com/kendo-ui/dropdownlist/template