none
People Picker in Provider Hosted Add-in RRS feed

  • 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.

    Tuesday, April 10, 2018 10:48 AM

Answers

  • 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.

    • Marked as answer by pointtoshare Sunday, July 1, 2018 12:43 PM
    Sunday, April 15, 2018 11:28 AM

All replies

  • 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.

    Tuesday, April 10, 2018 12:40 PM
  • 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.

    Sunday, April 15, 2018 10:38 AM
  • 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.

    • Marked as answer by pointtoshare Sunday, July 1, 2018 12:43 PM
    Sunday, April 15, 2018 11:28 AM
  • 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.

    Friday, May 25, 2018 6:48 AM