2

I have seen plenty of examples of how to use the Client Side People Picker in a SharePoint App, but can't find anything related to how to leverage it within a SharePoint Page on a SharePoint Site. I thought this AngularJS directive looked promising but it is asking for the App URL. Is it possible to leverage this with in a SharePoint Page (not App) or does anyone else have a recommendation?

https://github.com/jasonvenema/sharepoint-angular-peoplepicker

Improve this question

2 Answers 2

Reset to default
2

Yes its possible, this is what i use, you can take a div tag to the page

<div id="managerPeoplePicker" ></div>

and below script will initialize it to people picker

 function SetPeoplePicker_Multiselect(peoplePickerElementId, allowMultiple, groupId){// arg1:div id,arg2:bool value to allow selection of more than 1 user agr3:optional groupId you want to bind people picker with
        if (allowMultiple == null) {
            allowMultiple = true;
        }
        var schema = {};
        schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';
        schema['SearchPrincipalSource'] = 15;
        schema['ResolvePrincipalSource'] = 15;
        schema['AllowMultipleValues'] = allowMultiple;
        schema['MaximumEntitySuggestions'] = 50;
        schema['Width'] = '';
        SPClientPeoplePicker_InitStandaloneControlWrapper(peoplePickerElementId, null, schema);
        $("#" + peoplePickerElementId + "_TopSpan_InitialHelpText").text('Enter Manager Name');
    }

you need to add reference of following js Script references required for PeoplePicker 

<SharePoint:ScriptLink name="clienttemplates.js" runat="server" LoadAfterUI="true" Localizable="false" />
    <SharePoint:ScriptLink name="clientforms.js" runat="server" LoadAfterUI="true" Localizable="false" />
    <SharePoint:ScriptLink name="clientpeoplepicker.js" runat="server" LoadAfterUI="true" Localizable="false" />
    <SharePoint:ScriptLink name="autofill.js" runat="server" LoadAfterUI="true" Localizable="false" />
    <SharePoint:ScriptLink name="sp.RequestExecutor.js" runat="server" LoadAfterUI="true" Localizable="false" />
    <SharePoint:ScriptLink name="sp.js" runat="server" LoadAfterUI="true" Localizable="false" />
    <SharePoint:ScriptLink name="sp.runtime.js" runat="server" LoadAfterUI="true" Localizable="false" />
    <SharePoint:ScriptLink name="sp.core.js" runat="server" LoadAfterUI="true" Localizable="false" />
Improve this answer
2
  • How are you setting the values that you pass into the function? Is there another function that executes the allowMultiple and groupId?
    – Kode
    May 28, 2015 at 15:26
  • 1
    allowMultiple is boolean you can pass true or false and groupId is optional you can remove code related to it if you don't want to use group id check here jeremythake.com/2014/01/…
    – Akshay Randive
    May 28, 2015 at 15:50
1

You should register Microsoft.SharePoint.WebControls assembly on the page first:

<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

and then you can just use standard SharePoint ClientPeoplePicker, something like this:

<SharePoint:ClientPeoplePicker PrincipalAccountType="User,DL,SecGroup,SPGroup" ID="cppUsers" ValidationEnabled="true" Required="True" VisibleSuggestions="3" Rows="3" AllowMultipleEntities="True" CssClass="ms-long ms-spellcheck-true" />
Improve this answer
2
  • My page is an HTML view loaded by AngularJS. The angular app itself is loaded within a modified .aspx page so loading the .NET won't work for me
    – Kode
    May 28, 2015 at 15:21
  • 1
    In this case you should create <div> container and initialize it by the js. Also, you should link standard SharePoint js lib's (like sp.js, clientpeoplepicker.js and etc) to the page first. All of them is placed in "_layouts/15/" folder. Here is the pretty good description how to manipulate PeoplePicker's from the js: [link]sharepoint.stackexchange.com/questions/87176/….
    – ScienceSoft team
    May 28, 2015 at 15:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.