People Picker in Provider Hosted Add-in

Question

Hi,

Could someone help me to setup a People Picker to my Provider Hosted Add-In. I followed some blogs but didn't work. 

Please also provide any other ideas.

Thanks in Advance.

Answer 1

Hi,

Please find a ready made project provided by PnP which has people picker for provider hosted add-in below.

https://github.com/SharePoint/PnP/tree/master/Components/Core.PeoplePicker

---

Ramakrishnan

---

Please remember to mark the replies as answers if they helped.

Answer 2

Hi Ramakrishnan,

Thanks for your reference, this is exactly what I need. But, I am a bit confused, how can I implement it in my existing provider hosted add-in. Could you please clarify / provide steps of the implementation in an existing add-in?

Thanks in advance.

Answer 3

Hello,

Once you have downloaded the project. Include the below files in the respective location of your project. 

1) Script files

• peoplepickercontrol.js
• peoplepickercontrol_resources.en.js
• peoplepickercontrol_resources.fi.js

2) CSS files

• peoplepickercontrol.css

3) Class Files 

Rename the namespace based on your project name space.

• PeoplePickerHelper.cs
• PeoplePickerUser.cs
• JsonHelper.cs

4) Include below code in default.aspx.cs or copy from the project downloaded.

if (!Page.IsPostBack)
            {
                // prefil people pickers with current user
                var spContext = SharePointContextProvider.Current.GetSharePointContext(Context);
                using (var clientContext = spContext.CreateUserClientContextForSPHost())
                {
                    clientContext.Load(clientContext.Web, web => web.Title, user => user.CurrentUser);
                    clientContext.ExecuteQuery();
                    Microsoft.SharePoint.Client.User currentUser = clientContext.Web.CurrentUser;
                    
                    //fill json meoplepicker
                    List<PeoplePickerUser> peoplePickerUsers = new List<PeoplePickerUser>(1);
                    peoplePickerUsers.Add(new PeoplePickerUser() {  Name=currentUser.Title, Email=currentUser.Email, Login=currentUser.LoginName});
                    hdnAdministrators.Value = JsonHelper.Serialize<List<PeoplePickerUser>>(peoplePickerUsers);   
                 
                    //fill csom peoplepicker
                    PeoplePickerHelper.FillPeoplePickerValue(hdnCsomAdministrators, currentUser);
                }
            }

5) Include the below code in Default.aspx inside form tag

 <h2>Peoplepicker using code-behind method (CSOM)</h2>
            <div id="divTestCsomPeoplePicker">
                <h3 class="ms-core-form-line" style="margin-top: 15px !important;">Select a user:</h3>
                <div class="ms-core-form-line">
                    <div id="divCsomAdministrators" class="cam-peoplepicker-userlookup ms-fullWidth">
                        <span id="spanCsomAdministrators"></span>
                        <asp:TextBox ID="inputCsomAdministrators" runat="server" CssClass="cam-peoplepicker-edit" Width="70"></asp:TextBox>
                    </div>
                    <div id="divCsomAdministratorsSearch" class="cam-peoplepicker-usersearch ms-emphasisBorder"></div>
                    <asp:HiddenField ID="hdnCsomAdministrators" runat="server" />
                </div>
            </div>

            <div class="ms-core-form-line">
                <asp:Label ID="lblCsomEnteredData" runat="server" CssClass="ms-fullWidth"></asp:Label>
            </div>
            <div id="divCsomButtons" style="float: right;">
                <asp:Button ID="btnGetValueByServer" runat="server" Text="Get values by server" CssClass="ms-ButtonHeightWidth" OnClick="btnGetValueByServer_Click" />
                <button id="GetValuesByJavascript">Get values by javascript</button>
            </div> 

If you are building the MVC based add-in have a look at the below article

http://sharethefrustration.blogspot.in/2015/12/people-picker-mvc-sample-officedev-has.html

---

Ramakrishnan

---

Please remember to mark the replies as answers if they helped.

Answer 4

Hi Ramakrishnan,

Thanks for the references and sorry for replying late.

My app is on MVC 5 and I tried with the MVC reference but didin't work. Probably, I setting it wrongly. 

For example, my project name is ProductList. I have created a dummy module under ProductList (not under ProductListWeb). Added the CSS and JS files in Content and Scripts folder respectively. Added the html part in my existing Layout and index pages as said in the reference guide.

Now I am confused, should I use a separate Layout page for this people picker or the existing one where all my menus setup?

Could you please clarify a bit? Ia there any alternative of this people picker to pick AD user in Provider Hosted Add-in? Thanks.